Web Governance
Provide a text alternative for images and graphics
This check affects individuals with:
Blindness: These users can read the image text alternative on a braille display.
Vision impairments: These users 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:
“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.”
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 with 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 besides those mentioned above.
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.