This document gives information about the related Monsido checks:
Image accessible name is descriptive.
What
When images and graphic elements have an 'accessible name,' it should be descriptive. This ensures that the text alternative effectively conveys the visual content. The accessible name is defined by the code associated with the image, such as an alt attribute or an aria label.
Why
When images and graphics include a text alternative, it enhances accessibility. It allows users to understand the information through different senses such as sight, sound, and touch. For instance, a person who is blind and unable to see the image can access the information by having the text alternative read aloud by screen reader software or displayed as braille on a braille reader.
However, it is crucial that the text alternative that you provide gives an accurate and meaningful description of the information or function that the image conveys. If not, the text alternative will not serve as a true alternative for users who cannot visually see the image.
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:
“You know, the people who work on describing images on websites, I don’t think they always really think it through. It seems like they describe the images just because they’ve been told they have to. But they don’t realize that what they write actually needs to help those of us who can’t see what’s on the screen. I remember when my son had just started school.
There was one day he was sick, and I needed to call the school. On the contact page of the school’s website, all I could read was “Contact,” and then my screen reader just said “Image of the school’s phone number and email.” That didn’t do me any good at all. It would’ve been a lot more useful if they’d just put the actual phone number there so I could read it with my screen reader.”
Examples
Example – image with a good text alternative
On a company website, a world map is displayed. The map highlights 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 will convey the image to the user as:
"World map showing our office locations in San Francisco USA, Bangalore India, Berlin Germany, and Toronto Canada Graphic.”
This is good, because the text alternative provides the primary information you get from visually seeing the map, specifically where the company offices are located.
Example image including a none-describing text alternative
On a company website, a world map is displayed. The map highlights the four cities worldwide where the company has offices. The code that inserts the map image includes an alt attribute, which provides the accessible name for the image. However, in this case, it does not describe the relevant information in the image, so it is not a good text alternative.
<img src="path/to/world-map.jpg" alt=”World map showing office locations>
When a screen reader encounters this image on a website, it will communicate that there is a picture of a map: “World map showing office locations Graphic". However, this is not sufficient because it does not provide information about where the company offices are located. Therefore, it does not serve as a true text alternative to what can be visually seen in the image.
How
How to review it?
The Monsido platform highlights images and graphic elements that have an accessible name defined in the code. Your task is to confirm that the text in the accessible name serves as a good text alternative for the image.
You might already know the accessible name of the image. For example, if you added the image yourself through your content management system and filled out a field for alternative text when you inserted the image.
If you do not know the accessible name of the image, you can find it with the developer tools in your browser. In Chrome, you can do it as follows:
Open Developer Tools:
Right-click on the image you want to inspect and select "Inspect" from the context menu.
This will open Chrome Developer Tools and highlight the HTML element for the image in the "Elements" tab.
Navigate to the Accessibility Panel:
With the image element still selected in the "Elements" tab, click on the "Accessibility" tab located on the right side of Developer Tools. If you do not see this tab, you might need to click on the double arrow >> to reveal more tabs, and then select "Accessibility."
View the Accessible Name:
In the "Accessibility" panel, look for the section labeled "Name." This section shows the accessible name of the image, which could be derived from the alt attribute, aria-label, or other accessible elements associated with the image.
The "Name" field displays the text that screen readers and other assistive technologies use to describe the image to users.
Now that you know the accessible name, ask yourself the following question:
If I remove the image and can only see the text alternative, will I still have enough information?
If the answer is yes, you can mark this issue as reviewed. For instructions on how to set an issue to Reviewed, see the user guide article: How to Review and Accessibility Issue.
If the answer is no, then you need to revise the text alternative to make it sufficiently descriptive of the image before you can mark it as reviewed.
Often, you can edit the text alternative for an image through a field in your content management system. However, you may also need to ask your web developer to update the alternative text.
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.