---
title: " Provide a text alternative for images and graphics"
date: "2024-10-24T23:19:35+00:00"
summary: "Learn how to provide text alternatives for images and graphics to enhance accessibility for visually impaired users."
image:
type: "page"
url: "/web-governance/provide-text-alternative-images-and-graphics"
id: "5cd78157-31e3-4dd1-8dad-466940db4348"
---
Table of contents will be added
1.1.1 Non-Text Content
Introduction
------------
This document provides information about the related accessibility checks:
* Image is missing alternative text.
* `SVG` element with defined role is missing an accessible name.
* Non-text object element is missing an accessible name.
* Image button is missing an accessible name.
What
----
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 must be marked as decorative in the code.
A decorative image is an image that does not convey meaningful information or serve a functional purpose. Such images are used solely for visual enhancement.
Why
---
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.
Who
---
### Affected users
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.
### User story
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.”_
Examples
--------
This section provides some examples of the issue.
### Example: image including text alternative
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 `` element to specify these four cities.
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."
### Example image not including a text alternative
On a company website, a world map is displayed that highlights the four cities worldwide where the company has offices. The code that inserts the map image does not include alternative text.
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`."
How
---
This section provides instructions on how to identify and fix this issue.
### How to identify the issue
The Acquia Web Governance platform Identifies the faulty code snippet.
### How to fix it
Correct the error as follows:
* For `` elements:
Add a text alternative via the alt attribute.
* For SVG elements:
Add a text alternative via the SVG elements tag.
<svg><title> Insert text alternative here
* For `
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."
### Example image not including a text alternative
On a company website, a world map is displayed that highlights the four cities worldwide where the company has offices. The code that inserts the map image does not include alternative text.
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`."
How
---
This section provides instructions on how to identify and fix this issue.
### How to identify the issue
The Acquia Web Governance platform Identifies the faulty code snippet.
### How to fix it
Correct the error as follows:
* For `
* For SVG elements:
Add a text alternative via the SVG elements