Français

<title>

Giving an SVG an accessible title and description

— 1 min read

  • HTML
  • accessibility
  • semantics
  • SVG

<title> + <desc> SVG — Graphics accessibility

In SVG, <title> provides a short accessible name (equivalent to an image's alt) and <desc> a longer description. Together, they make a vector graphic understandable for people who cannot see it.

When to use it

Your SVG conveys information (chart, diagram, meaningful icon). Place a <title> as the first child of <svg> and a <desc> right after. Link them with aria-labelledby for maximum screen reader compatibility.

What you gain

Accessibility: <title> is announced by screen readers as the image name. <desc> provides the detail. Without them, a complex SVG is a black hole for assistive technologies.

Code example

<svg role="img" aria-labelledby="pie-title pie-desc"
     viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <title id="pie-title">Market share distribution</title>
  <desc id="pie-desc">
    Pie chart showing: Product A at 45%, Product B at 30%, Others at 25%.
  </desc>
  <circle cx="50" cy="50" r="40" fill="teal"
          stroke-dasharray="113 251" stroke-dashoffset="0"
          stroke="coral" stroke-width="80" />
</svg>

Further reading