Using SVGs with alt text

Each SVG has role="img" and a <title> that holds its alt text, joined with aria-labelledby. The same text is in the file's metadata, next to a link back to the asset's page. You do not have to write a description; you have to choose a way of embedding that does not throw it away.

Paste the markup into your page. The title stays, so assistive technology reads it, and you can still theme the file with CSS. This is the best option for informative images.

<figure>
  <!-- the svg element keeps role="img" and its title -->
  <svg viewBox="0 0 24 24" role="img" aria-labelledby="t1">
    <title id="t1">A seated figure in a wheelchair, facing right.</title>
    ...
  </svg>
</figure>

An img element ignores the title inside the file. Copy the alt text from the asset page into the alt attribute yourself. The cost: an image tag cannot be themed from your CSS, so dark mode and brand colours need a different file or inline use.

<img
  src="/wheelchair.svg"
  alt="A seated figure in a wheelchair, facing right."
  width="48" height="48">

A background-image has no text alternative at all. Use it only when the picture is decoration, and say so: see the guide on choosing decorative or informative images.

• Turn on a screen reader and move over the image. You should hear the description once.
• Inspect the page: informative images have a name, decorative ones have none.
• Run an automated check, then still listen. Tools find missing alt text; only a person can tell if it is good.

• Theming with tokens and dark mode
• Choosing decorative or informative images