Decorative images
There are times that images shouldn’t be read because it would be repetitive or not add any value in addition to the existing page content. These types of images are generally included for purely stylistic purposes and don’t impart any meaning to the rest of the content on the page.
Icon buttons
When it’s unavoidable to use an icon button (no text label) DO NOT rely on image alt text to supply the name for a icon button.
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. In this case, check out the informative 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.
The alt attribute is still required
- To have valid HTML, the
alt
attribute must still be present, even when set to the empty empty value ofalt
. Note thatalt
andalt=""
(no space) are equivalent in HTML.- When the
alt
attribute is empty, the screen reader ignores it (and will not read anything). - When the
alt
attribute is missing, the screen reader will read thesrc
name or filename of the image which is a very poor user experience.
- When the
Reinforce decorative images with aria-hidden
- Use
aria-hidden="true"
as a backup and reinforcement toalt
:- Backup: developers often mistakenly omit the alt attribute entirely, meaning that some screenreaders will read the entire filename without an alt attribute. Including
aria-hidden="true"
will act as a backup. - Reinforcement: using
aria-hidden="true"
ensures that screenreaders ignores the image. Screenreaders have been observed reading an image role even when the alt attribute is empty.
- Backup: developers often mistakenly omit the alt attribute entirely, meaning that some screenreaders will read the entire filename without an alt attribute. Including
Note: Your plan might be changing soon.
Call us: 888-888-8888Using inline SVG
Inline SVG that is decorative
Inline SVGs require some special code to be hidden properly from screen readers:
aria-hidden="true"
If you are using a <use />
element, add aria-hidden="true"
.
Design notes
Further reading
- This entry owes a lot to Contextually Marking up accessible images and SVGs by Scott O’Hara
- W3C Image decision tree