Web Governance
Are the hidden images decorative?
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.
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.
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.
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.”
This section provides some good and bad examples of this error.
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.
Web Governance<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="").
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.
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.
The Acquia Web Governance platform highlights images and graphic elements that are marked as decorative in the code.
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.
For instructions on how to set the image to Reviewed in the Web Governance platform, visit How to review an áccessibility issue.
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.
Related accessibility conformance testing rules:
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.