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="/coffee-roaster.svg" 
     role="img"
     alt="Coffee roaster">

Images that are decorative

There are times that images shouldn’t be read because they would be repetitive or not add any value to the content.

• When the alt attribute is empty, the screen reader ignores it.
  • The alt attribute is still required to be valid html.
• Use aria-hidden="true" as a backup and reinforcement:
  • As a backup: developers often mistakenly omit the alt attribute entirely, meaning that some screenreaders will read the entire filename.
  • As a reinforcement to ensure the screenreader ignores the image. Screenreaders have been observed reading an image role when the alt attribute is present but empty.

<img src="/info-icon.png" aria-hidden="true" alt="">

<!-- The ="" is not necessary for an empty attribute -->
<img src="/info-icon.png" aria-hidden="true" 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