Web Governance
Provide a text alternative for images and graphics
1.1.1 Non-Text Content
This document provides information about the related accessibility checks:
Image has non-empty accessible name
SVG element with explicit role has non-empty accessible name
Image button has non-empty accessible name
object element rendering non-text content has non-empty accessible name.
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.
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.
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.
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, 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."
On a company 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 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 fix this issue.
Identify the faulty code snippet in the platform and then 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. Refer to the "ACT rules" section below for a detailed technical explanation of this check that reports errors.
For instructions on how to review an accessibility issue and set it to Reviewed, visit the user guide article:
Related accessibility conformance testing rules:
Object element rendering non-text content has non-empty accessible name
SVG element with explicit role has non-empty accessible name
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.
Web Governance