This document gives information about the related Monsido checks:
Image has non-empty accessible name
SVG element with explicit role has non-empty accessible name
Image button has non-empty accessible name
objectelement rendering non-text content has non-empty accessible name
What
Images and graphics must have an associated text alternative. This alternative text is added to the HTML code, which links the image to the text alternative. If an image is purely decorative and does not provide important information, it must not have a text alternative and should be 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.
Why
When images and graphics include a text alternative, it enhances accessibility because the information can be conveyed through different senses such as sight, sound, and touch. For example, a person who is blind and cannot see the image can access the information by having the text alternative read aloud through screen reader software or displayed as braille on a braille reader.
Decorative images that do not convey information or serve any function beyond visual decoration should be coded so they can be ignored. This ensures compatibility with screen reader software and braille displays, preventing users from wasting time and energy on content that does not provide meaningful information.
Affected Users
This check affects individuals with:
Blindness; Who can read the image text alternative on a braille display.
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:
“It’s so frustrating when I go on those websites with tons of pictures that my computer can’t read properly. It happens a lot on news sites where there could be hundreds of images. Either it reads out weird codes like ‘3b87678234fj142zblablabla.jpg’ over and over, like 25 times in a row. Then I know someone hasn’t done their job right. And it takes me forever to navigate through it. It’s just really irritating.”
Examples
Example – image including text alternative
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 includes alternative text using the alt attribute of the <img> element to specify these four cities.
<img src="offices_Wmap2024v2optimized.jpg" alt="World map showing our office locations in San Francisco USA, Bangalore India, Berlin Germany, and Toronto Canada">
When a screen reader encounters the image on the website, it conveys the image to the user as:
"World map showing our office locations in San Francisco USA, Bangalore India, Berlin Germany, and Toronto Canada Graphic."
Example image not including a text alternative
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 does not include alternative text.
<img src="path/to/world-map.jpg">
When a screen reader encounters the image on the website, it will convey the image file name to the user because there isn’t defined a text alternative for the image:
"offices_Wmap2024v2optimized.jpg Graphic."
How
How to fix it?
Once you have identified the faulty code snippet in the platform, you can correct the error as follows.
For <img> elements:
Add a text alternative via the alt attribute.
<img src=”path_to_img.jpg” alt=”Insert text alternative here”>
For SVG elements:
Add a text alternative via the SVG elements <title> tag.
<svg><title> Insert text alternative here </title></svg>
For <object> elements:
Add a text alternative via the <object> elements aria-label.
<object aria-label=”Insert text alternative here”>
For <input type=”image”> elements:
Add a text alternative via the <input type=”image”> elements alt attribute.
<input type=”image” aria-label=”Insert text alternative here”>
If the image that fails is purely decorative, you should fix the issue by marking the image as decorative in the code. This can be done by using an empty alt attribute for <img> elements, like this: alt="", and by adding aria-hidden="true" to other graphical elements that are purely decorative.
There may also be other ways to correct the error besides those mentioned above. Refer to the "ACT rules" section below for a detailed technical explanation of this check that reports errors.
Additional Resources
For instructions on how to review an accessibility issue and set it to Reviewed, see the user guide article:
WCAG success criteria
ACT rules
Related accessibility conformance testing rules.