Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Code examples

Describe the content of the image

If you were describing the image to someone who couldn’t see it, what would you say?

<img src="/farm.jpg" 
     alt="Rustic barn surrounded by rolling hills">

Linked SVG that conveys meaning

<img src="/smartphone.svg" 
     role="img"
     alt="Smartphone">

Images that are decorative

When the alt attribute is empty, the screen reader ignores it. The alt attribute is still required to be valid html.

<img src="/smartphone.png" alt="">

<img src="/smartphone.png" alt>

Inline SVG that conveys meaning

<svg role="img" focusable="false">
  <title>Accessible Name</title>
  <use xlink:href="#svg-id" aria-hidden="true" />
  <!-- if not using <use> then the child elements 
       of the inline SVG would go here -->
</svg>

Inline SVG <use> that conveys meaning

<svg role="img" aria-label="Name" focusable="false">
  <use xlink:href="#..." aria-hidden="true"></use>
</svg>

Inline SVG that is decorative

<svg aria-hidden="true" focusable="false">
  <!-- ... --> 
</svg>

Developer notes

Animations (like gifs) can be accessible if:

  • they are set to stop after 5 seconds or
  • if users are presented with a way to pause it

Further reading

  • Exhaustive test driven blog post: https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html