Web Governance
Alternative text for figures
1.1.1 Non-Text Content (Level A)
Check ID 105: Alternative text for figures
This is a PDF accessibility check.
A figure must have alternative text that describes it. The automated check finds figures where the alternative text is missing or empty. The system flags figures that do have alternative text, and indicates that you need to do an assisted check. Assisted checks mean that you must manually examine the issue and confirm that the text actually describes the image.
People who are blind cannot see images. A screen reader, the technology blind people typically use to have a document read aloud and to understand its structure, can only tell them about an image through its alternative text. Without alt text, the image is silently skipped or announced as just "graphic", and the content is lost. Alternative text also helps anyone whose images do not load.
This check affects individuals with:
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 cannot read properly. It happens often on news sites, where there could be hundreds of figures and images. It sometimes reads out weird codes like ‘3b87678234fj142zblablabla.jpg’ over and over, like 25 times in a row. Then I know someone has not done their job right. And it takes me forever to navigate through it. It is just really irritating.”
This section provides some examples of the issue.
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 that uses the alt attribute of the <img> element to specify these four cities.
Web Governance<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.
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 does not include alternative text.
<img src="path/to/world-map.jpg">When a screen reader encounters the image on the website, it conveys the image file name to the user because there is no defined a text alternative for the image:
offices_Wmap2024v2optimized.jpg Graphic.
This section provides instructions on how to identify and fix this issue.
The Acquia Web Governance platform Identifies the faulty code snippet.
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, mark the image as decorative in the code. Use an empty alt attribute for <img> elements: alt="", and add: aria-hidden="true" to other graphical elements that are purely decorative.
There may be other ways to correct the error.
For instructions on how to review an accessibility issue and set it to Reviewed, read How to review an accessibility issue.
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.