HTML Code
<!DOCTYPE html>

<html lang=en>

<head>

  <meta charset=UTF-8>

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

  <title>longdesc — expandable description</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}img{display:block;max-width:280px;border:1px solid #cbd5e1;border-radius:8px}button{margin-top:.75rem;padding:.5rem 1rem;font:inherit;cursor:pointer;border-radius:6px;border:1px solid #cbd5e1;background:#fff}#diagram-desc{margin-top:.75rem;max-width:480px;padding:.75rem 1rem;background:#fff;border:1px solid #e2e8f0;border-radius:8px;font-size:.8125rem}.hint{margin-top:1rem;font-size:.8125rem;color:#64748b;max-width:480px}</style>

</head>

<body>

  <h1>Expandable long description</h1>

  <img id=diagram src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='100'%3E%3Crect fill='%23f1f5f9' width='280' height='100'/%3E%3Ccircle cx='70' cy='50' r='20' fill='%2394a3b8'/%3E%3Ccircle cx='140' cy='50' r='20' fill='%2394a3b8'/%3E%3Ccircle cx='210' cy='50' r='20' fill='%2394a3b8'/%3E%3Cline x1='90' y1='50' x2='120' y2='50' stroke='%2364748b' stroke-width='2'/%3E%3Cline x1='160' y1='50' x2='190' y2='50' stroke='%2364748b' stroke-width='2'/%3E%3Ctext x='140' y='90' text-anchor='middle' fill='%23334155' font-family='system-ui' font-size='11'%3ENetwork diagram%3C/text%3E%3C/svg%3E" alt="Network diagram with three connected nodes" aria-describedby=diagram-desc width=280 height=100>

  <button type=button id=toggleBtn aria-expanded=false aria-controls=diagram-desc>Show long description</button>

  <div id=diagram-desc hidden>

    Three nodes labeled A, B, and C. Node A connects to B, and B connects to C in a linear chain. Data flows from left to right through the network.

  </div>

  <script>var btn=document.getElementById("toggleBtn"),panel=document.getElementById("diagram-desc");btn.addEventListener("click",(function(){var e="true"===btn.getAttribute("aria-expanded");btn.setAttribute("aria-expanded",e?"false":"true"),panel.hidden=e,btn.textContent=e?"Show long description":"Hide long description"}))</script>

  <p class=hint>Expandable panels are discoverable for all users—unlike hidden <code>longdesc</code> URLs.</p>

</body>

</html>
Lines: 0 | Characters: 0
Live Preview Auto-refresh on Run
HTML longdesc Attribute — Expandable Description
