Video examples

iOS Voiceover

Android Talkback

Windows Jaws Chrome

Windows NVDA Chrome

MacOS Voiceover Safari

Is this image decorative or informative?

If the image conveys meaning, and there’s no other text on the page which explains the content within it, then the image is likely informative.

If the image is included for purely stylistic purposes and doesn’t impart any meaning to the rest of the content on the page, then the image is likely decorative. In this case, check out the decorative image checklist instead.

What about lifestyle images or stock photos?

Lifestyle images of attractive people are informative because they are intended associate the product with the beautiful and successful looking people featured in the image. As it turns out, people with disabilities are beautiful and successful too.

Text inside the image

If your design involves images of text, stop. There’s almost certainly a way to accomplish your particular design with CSS and web typefaces.

Exceptions exist for logos or when the presentation of the text requires it to be an image.

Describe the content of the image

If you were describing the image to someone via phone conversation and they couldn’t see what you were looking at, what would you say?

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

Using inline SVG

Inline SVG that conveys meaning

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

  • Name: either aria-label or <title />
  • Role: role="img"

If you are using a <use /> element, add aria-hidden="true" to it.

Using title

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

Using aria-label

<svg role="img" aria-label="Accessible name" focusable="false">
  <use href="#svg-id" aria-hidden="true" />
  <!-- if not using <use> then the child elements 
       of the inline SVG would go here -->
</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

Related informative image entries