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 important meaning, and there’s no other text on the page which explains the concept 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 item instead.

If your image contains text inside it, it should not! This is a violation of WCAG AA 1.4.5 Images of Text. Exceptions exist for logos.

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