This is a DRAFT resource that supports Working Drafts of WCAG 3. Content in this resource is not mature and should not be considered authoritative. It may be changed, replaced or removed at any time.
🔙 WCAG 3.0 (Silver) Guidelines (Text alternatives)
Method: Decorative Images
Platform
- All web platforms
Technology
- HTML, CSS, ARIA, ePub, PDF
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.
Outcome
This method supports the outcome Text alternatives available.
Detailed description
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:
- 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.
Dependencies
None
HTML decorative bitmaps
In HTML, decorative bitmap images need to have an alt attribute with no value (e.g. alt=”” or alt). For example:
<img alt=”” src=”clipart-of-business-people-looking-at-a-computer-screen.jpg”> <img alt src=”clipart-of-someone-smiling-and-eating-a-salad.jpg”>
HTML decorative SVG
In HTML, decorative SVGs need to use the aria-hidden attribute with a value of “true”. For example:
<button type=”button”>
<svg aria-hidden=”true” viewbox=”0 0 30 30”>
<use href=”#help-icon” />
</svg>
<span>Help</span>
</button>
CSS
The CSS Generated Content Module Level 3 Working Draft includes support for alternative text for generated content. Alternative text with an empty value is specified as "". In the following example, if the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as collapsed
. Without the empty string alt value, the content would also be spoken as Black right-pointing pointer
.
.expandable::before {
content: "\25BA" / "";
/* a.k.a. ► */
}
ePub
If a decorative image is placed in an ePub document using HTML, it needs to have an alt attribute with no value and a role attribute with a value of presentation:
<img alt="" role="presentation" src="images/decorative-edge.png" />
Adding the role attribute with a value of presentation will hide a decorative SVG in an ePub document:
<svg lang="en" role="presentation" xml:lang="en" xmlns="http://www.w3.org/2000/svg"> … </svg>
Tagging PDFs for accessibility is covered in WCAG 2’s PDF4 Hiding decorative images with the Artifact tag in PDF documents.
Atomic Tests
- ACT Rules: Image has non-empty accessible name
- ACT Rules: Image not in the accessibility tree is decorative
Automated test for all images
Unit Tested: All Images
Measurement: Percentage (# passed/total # of img elements for all images)
- This test is measured by the number of img elements in the HTML document or the number of images in non-HTML content being tested.
- The percentage test result is the number passed divided by the total number of img elements or images.
Procedure for HTML
- Run an automated test that displays the text alternative (or accessible name) for images.
- Check that functional, informative, and images of text have alternative text that serves an equivalent purpose of the image
- Functional images describe the function
- Informative images describe the image
- Images of text repeat the text or the equivalent purpose of the text.
- Check that decorative images are appropriately coded (see “Decorative Images” method) so they are hidden to assistive technology.
Expected Results
Check #2 and #3 are true.
Procedure for Technology Agnostic
- Examine each image in the content.
- Check that each image that conveys meaning has its text alternative.
- If the image contains text that is not purely decorative, the text alternative contains the same text.
- If it is within a link together with text, check that it is implemented to be ignored by assistive technology or the text alternative describes the image and supplements the link text.
- If it is a button, check that the text alternative indicates the button's function.
Expected Results
Checks #2 and #3, or #2 and #4, or #2 and #5 are true.
Manual test of a CSS background image
- Unit Tested: All CSS background images
- Measurement: Percentage (# passed/total # of elements for “CSS background images”)The percentage test result is the number passed divided by the total number of elements or images.
Test Procedure
- Check for the presence of decorative images.
- Check that they are included as CSS background images.
Expected Results
If #1 is true then #2 is true.
Manual test of CSS generated content
- Unit Tested: All CSS generated content
- Measurement: Percentage (# passed/total # of elements for “CSS generated content”)The percentage test result is the number passed divided by the total number of elements or images.
Test Procedure
- Check for the presence of decorative images.
- Check if decorative images are included using CSS generated content.
- Check that the image has an empty alt value.
Expected Results
If 1 is true then 2 and 3 are true.
Manual test if an image uses null alt text and no title attribute for decorative images
- Unit Tested: All decorative HTML images
- Measurement: Percentage (# passed/total # of elements for “decorative HTML images”)The percentage test result is the number passed divided by the total number of elements or images.
Test Procedure
- Check for the presence of decorative images
- Check that the
titleattribute is either absent or has no value. - Check that the alt attribute is present and has no value.
Expected Results
If 1 is true then 2 and 3 are true.
Holistic Tests
- Still to be developed. We will include this in a future working draft.
Status
first draft
Change Log
- first draft (2020-09-19)