iOS Voiceover Safari
Android Talkback Chrome
Windows Jaws Chrome
Windows NVDA Chrome
MacOS Voiceover Safari
Describe the content of the image
If you were describing the image to someone who couldn’t see it, what would you say?
Linked SVG that conveys meaning
Images that are decorative
There are times that images shouldn’t be read because they would be repetitive or not add any value to the content.
- When the
altattribute is empty, the screen reader ignores it.
altattribute is still required to be valid html.
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.
Inline SVG that conveys meaning
<use> that conveys meaning
Inline SVG that is decorative
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
- Exhaustive test driven blog post: https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html