Video examples

iOS Voiceover Safari

Android Talkback Chrome

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Basic 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">

Decorative images

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

The alt attribute is still required

  • To be valid html, the alt attribute must still be present, even if empty
    • When the alt attribute is empty, the screen reader ignores it.
    • When the alt attribute is missing, the screen reader will read the src url or filename of the image.

Reinforce decorative images with aria-hidden

  • 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>
<a href="tel:8888888888">
  <!-- The phone icon would be repetitive in this case and should be hidden -->
  <img src="/phone-icon.png" aria-hidden="true" alt>
  Call us: 888-888-888
</a>

Using inline SVG

Inline SVG that conveys meaning

Inline SVGs require some special code to be read consistently in all screenreaders.

<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>

Animated gifs

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