Outcome
This method supports the outcome Text alternatives available.
Platform
- All web platforms
Technology
- HTML
- CSS
- ARIA
- ePub
Input aspects for testing
- DOM tree
- Accessibility tree
- CSS styling
Summary
Decorative images don’t add information to the content of a page. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Merely omitting the alternative text can cause problems as some screen readers will try to repair the omission by reading the image filename. Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page.
How it solves user need
Explicitly marking an image as decorative will cause assistive technology to skip over the image as if it didn’t exist on the page. This reduces time and fatigue needed to listen to descriptions of decorative images or long cryptic file names.
When To Use
Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.
In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.
Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:
- A background behind textual content;
- Visual styling such as borders, spacers, and corners;
- Supplementary to link text to improve its appearance or increase the clickable area;
- Illustrative of adjacent text but not contributing information (“eye-candy”);
- Identified and described by surrounding text.