Informative Image

How to test an informative image

Gherkin Condensed WCAG

Given that I am on a page with an informative image

1 Keyboard for mobile & desktop

WHEN I use the arrow keys to browse to an image I SEE the image comes into view

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow keys to browse to an image
- I HEAR The content of the image alt text is clear (ignored if decorative)
- I HEAR It identifies its role as an image or graphic (ignored if decorative)

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to browse to an image
- I HEAR The content of the image alt text is clear (ignored if decorative)
- I HEAR It identifies its role as an image or graphic (ignored if decorative)

1 Keyboard & screen reader actions

When I use	I see/hear
Arrow-keys	Screen reader reads the alt text (ignored if decorative)

2 Mobile screenreader gestures

When I use	I hear
Swipe	The screenreader reads the alt text (ignored if decorative)

3 Screenreader output for all devices

Reads	I hear
Name	The content of the image alt text is clear (ignored if decorative)
Role	It identifies its role as an image or graphic (ignored if decorative)

An informative image must meet these WCAG principles.

1Perceivable

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, unless it is decorative or repetitive
If an image contains text critical to understanding the page the user has a text alternative that serves the equivalent purpose

Video examples

iOS Voiceover Safari

Android Talkback Chrome

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