HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

  <meta name=viewport content="width=device-width,initial-scale=1">

  <title>longdesc — modern pattern</title>

  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7}h1{margin:0 0 1rem;font-size:1.25rem;color:#0f172a}figure{max-width:300px;margin:0}img{display:block;width:100%;border:1px solid #cbd5e1;border-radius:8px 8px 0 0}figcaption{padding:.5rem .65rem;background:#fff;border:1px solid #cbd5e1;border-top:none;border-radius:0 0 8px 8px;font-size:.8125rem}#chart-long-desc{margin-top:.75rem;padding:.75rem 1rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.8125rem;max-width:300px}.hint{margin-top:1rem;font-size:.8125rem;color:#64748b;max-width:320px}</style>

</head>

<body>

  <h1>Accessible long description</h1>

  <figure>

    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect fill='%23e0e7ff' width='300' height='120'/%3E%3Crect x='40' y='70' width='30' height='30' fill='%234f46e5'/%3E%3Crect x='90' y='55' width='30' height='45' fill='%234f46e5'/%3E%3Crect x='140' y='40' width='30' height='60' fill='%234f46e5'/%3E%3Crect x='190' y='25' width='30' height='75' fill='%234f46e5'/%3E%3Ctext x='150' y='20' text-anchor='middle' fill='%233730a3' font-family='system-ui' font-size='12'%3EQuarterly sales%3C/text%3E%3C/svg%3E" alt="Quarterly sales bar chart" aria-describedby=chart-long-desc width=300 height=120>

    <figcaption>

      Sales 2024

      <a href=#chart-long-desc style=margin-left:.35rem>Long description</a>

    </figcaption>

  </figure>

  <div id=chart-long-desc>

    Q1: 12 units, Q2: 18 units, Q3: 24 units, Q4: 30 units. Sales increased each quarter with the largest jump between Q3 and Q4.

  </div>

  <p class=hint>This replaces <code>longdesc="page.html"</code> with discoverable on-page text linked by <code>aria-describedby</code>.</p>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML longdesc Attribute — Modern aria-describedby Pattern
