This document provides information about the related Acquia Web Governance accessibility checks:
Is the image alternative text descriptive enough?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
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 to users with visual impairments. 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, accessibility is enhanced. It allows users to understand the information through different senses such as sight, sound, and touch. For instance, people who are blind and cannot view the image can access the information when screen reader software reads the text alternative or when text is displayed as braille on a braille reader.
The text alternative must give an accurate and meaningful description of the information or function that the image conveys, for accessibility reasons. If it does not, the text alternative is not a true alternative for users who are unable to view the image.
Who
Affected users
This check affects people 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 do not think they always really think it through. It seems like they describe the images just because they have been told they have to. But they do not realize that what they write actually needs to help those of us who cannot see what is 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 did not do me any good at all. It would have been a lot more useful if they had 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 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.”
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 for users with visual impairments.
When a screen reader encounters this image on a website, it communicates 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. Users with visual impairments do not get the information that the image projects to other people.
How
How to review it?
The Web Governance 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, and to create a better text alternative when needed.
You might already know the accessible name of the image. For example, if you added the image 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 opens Chrome Developer Tools and highlights 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 it is not visible, click on the double arrow >> to reveal more tabs.
Select Accessibility.
View the accessible name: In the Accessibility panel, look for the section labelled Name. This section displays 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-
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 in the Web Governance platform, visit How to review an accessibility issue.
If the answer is no, revise the text alternative so that it sufficiently describes the image before you mark it as reviewed.
You can edit the text alternative for an image through a field in your content management system in most cases. However, you may need to ask your web developer to update the alternative text if you do not have access.
See the ACT rules section below for a detailed technical explanation of this check that reports errors.
This document provides information about the related Acquia Web Governance accessibility checks:
Is the image alternative text descriptive enough?
This check is related to the Web Content Accessibility Guidelines (WCAG) success criteria 1.1.1 non-text content.
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 to users with visual impairments. 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, accessibility is enhanced. It allows users to understand the information through different senses such as sight, sound, and touch. For instance, people who are blind and cannot view the image can access the information when screen reader software reads the text alternative or when text is displayed as braille on a braille reader.
The text alternative must give an accurate and meaningful description of the information or function that the image conveys, for accessibility reasons. If it does not, the text alternative is not a true alternative for users who are unable to view the image.
Who
Affected users
This check affects people 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 do not think they always really think it through. It seems like they describe the images just because they have been told they have to. But they do not realize that what they write actually needs to help those of us who cannot see what is 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 did not do me any good at all. It would have been a lot more useful if they had 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 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.”
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 for users with visual impairments.
When a screen reader encounters this image on a website, it communicates 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. Users with visual impairments do not get the information that the image projects to other people.
How
How to review it?
The Web Governance 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, and to create a better text alternative when needed.
You might already know the accessible name of the image. For example, if you added the image 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 opens Chrome Developer Tools and highlights 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 it is not visible, click on the double arrow >> to reveal more tabs.
Select Accessibility.
View the accessible name: In the Accessibility panel, look for the section labelled Name. This section displays 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-
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 in the Web Governance platform, visit How to review an accessibility issue.
If the answer is no, revise the text alternative so that it sufficiently describes the image before you mark it as reviewed.
You can edit the text alternative for an image through a field in your content management system in most cases. However, you may need to ask your web developer to update the alternative text if you do not have access.
See the ACT rules section below for a detailed technical explanation of this check that reports errors.
Web Governance