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?
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
Using aria-label
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
- This page owes a lot to this exhaustive blog post: Contextually Marking up accessible images and SVGs by Scott O’Hara
- W3C Image decision tree