1.1.1 Non-Text Content
This document gives information about the related Acquia Optimize checks:
Image not in the accessibility tree is decorative.
Check that visible images and graphics only have a decorative function if they are marked as decorative in the code.
A decorative image is one that 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, it means that assistive technologies, such as screen readers that enable blind users to read a webpage, will skip over the image. This is a useful feature because it allows users who cannot see the visual content to avoid wasting time on graphic elements that are purely aesthetic.
However, it is a problem if images and graphics that provide information or functionality are marked as decorative in the code. Assistive technologies will also skip these images, meaning the user won't 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 gives some good and bad examples of this error.
On a company's website, a world map is displayed, highlighting the four cities worldwide 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="").
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 using an <img> element with an empty alt attribute.
<img src=”red_star.jpg” alt=””>When a blind person uses screen reader software to have the webpage read aloud, the screen reader will ignore the images of stars and will not mention them. This is helpful because it means the user does not waste time dealing with visual stars that do not provide any useful information.
The Optimize platform highlights the images and graphic elements that are marked as decorative in the code.
Your task is to confirm whether the highlighted images are truly decorative. You need to assess if the image 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 by adding a descriptive text alternative to the image.
For instructions, see the user guide article:
In the example above where a world map shows the cities where a company has offices, you can fix it by changing the empty alt attribute (which marks the image as decorative) to include a description that provides the relevant information conveyed by the image.
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.”> It is relatively 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 have the icon itself marked as decorative.
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.
Related accessibility conformance testing rules.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Mon Dec 02 2024 12:25:45 GMT+0000 (Coordinated Universal Time)