This document provides information about the related Acquia Web Governance accessibility checks:
Are the hidden images decorative?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
What
Ensure that visible images and graphics that are marked as decorative in the code only have a decorative function.
A decorative image does not convey meaningful information or serve a functional purpose. Such images are used solely for visual enhancement.
Why
When images or graphics are marked as decorative in the code, assistive technologies such as screen readers will skip over the image. This is a useful feature because it allows users who cannot see the visual content to save time and skip over graphic elements that are purely aesthetic.
However, if images and graphics that provide information or functionality are incorrectly marked as decorative in the code, assistive technologies will also skip these images. The impact is that the user will not have access to the important information or functionality that the images convey.
Who
Affected users
This check affects individuals with:
Blindness: Who can read the image text alternative on a braille display.
Other vision impairments: Who access the site contents with a screen reader or other text-to-speech software.
User story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“The other day, my internet connection went down, and when I tried to call my provider for help, I ended up on their website. It just said, "Call us at," and then the computer stopped talking. I could not read the actual number I needed to call. It is really frustrating because I know it is right there on the screen if I could see it, but they have hidden it from me. This kind of thing makes me so irritated. I had to wait until the next day to get a colleague to help me read it. But it is a waste of her time and mine that it has to be necessary.”
Examples
This section provides some good and bad examples of this error.
Example: Informative image marked as decorative
On a company website, a world map displays the four cities worldwide that highlight where the company has offices. The code that inserts the map image has an empty alt attribute, which marks the image as decorative.
<img src="path/to/world-map.jpg" alt=””>
Visually, the image shows that the company has offices in San Francisco, USA; Bangalore, India; Berlin, Germany; and Toronto, Canada. However this information is not accessible to screen reader users because the image is marked as decorative with an empty alt attribute (alt="").
Example: Decorative image
The beginning of each new section on the website is marked with a prominent star. The image of the star conveys no information but is solely there to be visually striking. The star image is inserted with an <img> element with an empty alt attribute.
<img src=”red_star.jpg” alt=””>
When a blind person uses screen reader software, the screen reader ignores the images of stars and does not mention them. This is helpful because the user does not waste time dealing with visual stars that do not provide any useful information.
Example: Informative image with visible text
It is common for an informative image, such as an icon, to be marked as decorative if the visible text next to the image describes the purpose of the icon. For example, an envelope icon with the text "Send email" next to it.
In this case, the text Send email serves as a conforming alternative version, and it is acceptable to mark the icon as decorative.
How
This section provides information on how to identify, review, and fix the issue.
How to identify it
The Acquia Web Governance platform highlights images and graphic elements that are marked as decorative in the code.
How to review it
This check requires a human review. You must confirm that the highlighted images are decorative. Assess the image to determine if it conveys any information or functionality, or if it is there purely for visual or aesthetic reasons.
Ask yourself this question: Will the user lose any information or functionality if the image is removed from the page?
If the answer is no, then the image is decorative, and you can mark this issue as reviewed on the platform.
If the answer is yes, it means there is an error on the website that should be fixed. Add a descriptive text alternative to the image.
To fix it, change the empty alt attribute (which marks the image as decorative) to include a description that provides the relevant information conveyed by the image.
For example, change from:
<img src="path/to/world-map.jpg" alt=””>
To: Include a descriptive text alternative:
<img src="path/to/world-map.jpg" alt=”We have offices in San Francisco, USA; Bangalore, India; Berlin, Germany; and Toronto, Canada.”>
If an informative image, such as an icon, is marked as decorative and the visible text next to the image describes the purpose of the icon, you can set it as Reviewed in the platform. In this case, the text Send email serves as a conforming alternative version, and it is acceptable to mark the icon as decorative and set it as Reviewed in the platform.
Note
In addition to the empty alt attribute alt="", there are other coding techniques that indicate images or graphic elements are decorative. For example, aria-hidden="true" and role="none". See the "ACT rules" section below for a detailed technical explanation of this check.
This document provides information about the related Acquia Web Governance accessibility checks:
Are the hidden images decorative?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
What
Ensure that visible images and graphics that are marked as decorative in the code only have a decorative function.
A decorative image does not convey meaningful information or serve a functional purpose. Such images are used solely for visual enhancement.
Why
When images or graphics are marked as decorative in the code, assistive technologies such as screen readers will skip over the image. This is a useful feature because it allows users who cannot see the visual content to save time and skip over graphic elements that are purely aesthetic.
However, if images and graphics that provide information or functionality are incorrectly marked as decorative in the code, assistive technologies will also skip these images. The impact is that the user will not have access to the important information or functionality that the images convey.
Who
Affected users
This check affects individuals with:
Blindness: Who can read the image text alternative on a braille display.
Other vision impairments: Who access the site contents with a screen reader or other text-to-speech software.
User story
Bridgit is a blind mother to a five-year-old girl and an 11-year-old boy:
“The other day, my internet connection went down, and when I tried to call my provider for help, I ended up on their website. It just said, "Call us at," and then the computer stopped talking. I could not read the actual number I needed to call. It is really frustrating because I know it is right there on the screen if I could see it, but they have hidden it from me. This kind of thing makes me so irritated. I had to wait until the next day to get a colleague to help me read it. But it is a waste of her time and mine that it has to be necessary.”
Examples
This section provides some good and bad examples of this error.
Example: Informative image marked as decorative
On a company website, a world map displays the four cities worldwide that highlight where the company has offices. The code that inserts the map image has an empty alt attribute, which marks the image as decorative.
<img src="path/to/world-map.jpg" alt=””>
Visually, the image shows that the company has offices in San Francisco, USA; Bangalore, India; Berlin, Germany; and Toronto, Canada. However this information is not accessible to screen reader users because the image is marked as decorative with an empty alt attribute (alt="").
Example: Decorative image
The beginning of each new section on the website is marked with a prominent star. The image of the star conveys no information but is solely there to be visually striking. The star image is inserted with an <img> element with an empty alt attribute.
<img src=”red_star.jpg” alt=””>
When a blind person uses screen reader software, the screen reader ignores the images of stars and does not mention them. This is helpful because the user does not waste time dealing with visual stars that do not provide any useful information.
Example: Informative image with visible text
It is common for an informative image, such as an icon, to be marked as decorative if the visible text next to the image describes the purpose of the icon. For example, an envelope icon with the text "Send email" next to it.
In this case, the text Send email serves as a conforming alternative version, and it is acceptable to mark the icon as decorative.
How
This section provides information on how to identify, review, and fix the issue.
How to identify it
The Acquia Web Governance platform highlights images and graphic elements that are marked as decorative in the code.
How to review it
This check requires a human review. You must confirm that the highlighted images are decorative. Assess the image to determine if it conveys any information or functionality, or if it is there purely for visual or aesthetic reasons.
Ask yourself this question: Will the user lose any information or functionality if the image is removed from the page?
If the answer is no, then the image is decorative, and you can mark this issue as reviewed on the platform.
If the answer is yes, it means there is an error on the website that should be fixed. Add a descriptive text alternative to the image.
To fix it, change the empty alt attribute (which marks the image as decorative) to include a description that provides the relevant information conveyed by the image.
For example, change from:
<img src="path/to/world-map.jpg" alt=””>
To: Include a descriptive text alternative:
<img src="path/to/world-map.jpg" alt=”We have offices in San Francisco, USA; Bangalore, India; Berlin, Germany; and Toronto, Canada.”>
If an informative image, such as an icon, is marked as decorative and the visible text next to the image describes the purpose of the icon, you can set it as Reviewed in the platform. In this case, the text Send email serves as a conforming alternative version, and it is acceptable to mark the icon as decorative and set it as Reviewed in the platform.
Note
In addition to the empty alt attribute alt="", there are other coding techniques that indicate images or graphic elements are decorative. For example, aria-hidden="true" and role="none". See the "ACT rules" section below for a detailed technical explanation of this check.
Web Governance