Adding images to a website makes your content more engaging and informative. But for people who use screen readers, such as users who are blind or have low vision, those images are invisible unless you describe them in code. Providing alternate text also supports users with cognitive disabilities who rely on clear or spoken descriptions to understand visual content.
Without alternate text, a screen reader might only say “image” or, worse, read out the file name, such as “IMG_2045.jpg.” That does not tell the user anything useful.
This is why every image needs an accessible text alternative, also known as alternate text.
WCAG Success Criteria
The following WCAG 2.1 success criteria highlight why alternate text is essential for accessible web content.
1.1.1 Non-text Content (Level A)
All non-text content that conveys information must have a text alternative that serves the same purpose.
Example:
An image showing a cat sleeping should include
so that screen readers can convey the same meaning to users who cannot see the image.
1.3.1 Info and Relationships (Level A)
Information, structure, and relationships shown visually must also be available in text.
Example:
If an image is used to represent data in a chart, the same information should appear in a caption or table.
1.4.5 Images of Text (Level AA)
If an image contains important text, that text must also be available in a text-based format.
Example:
A banner image with the words “50% Off Sale” should include
alt=”50% Off Sale”
So users who cannot see it still get the message.
2.4.6 Headings and Labels (Level AA)
Labels and accessible names must clearly describe the purpose of the content or control.
Example:
Instead of a vague description like alt=”icon”, use alt=”Search” so users understand the image’s purpose.
4.1.2 Name, Role, Value (Level A)
For assistive technologies to interpret elements correctly, every interactive image must expose its name, role, and state.
Example:
An image used as a button should include a descriptive text alternative, such as
alt="Submit"or
aria-label="Send"So the screen reader announces it as a “button” with a clear name.
What Is Alternate Text for Images
Alternate text, often called alt text, is a short written description that explains the purpose or content of an image to users who cannot see it. It allows assistive technologies such as screen readers to convey the same information that the image provides visually.
For example:
A screen reader will announce:
“Drawing of a sleeping cat, image.”
Why This Matters
Screen readers cannot interpret images. They rely entirely on the text you provide. Without alternate text, people who are blind or have low vision will not know what the image represents, whether it is a logo, a chart, or a photograph.
Alternate text ensures that everyone can access the same information, no matter how they experience your website.
When You Should Use It
Add alternate text for all meaningful images, including:
- Photos, illustrations, or icons that convey information.
- Logos that identify a brand.
- Charts or graphs that display data.
- Images of text that communicate meaning.
If an image is purely decorative, such as a background pattern or a divider line, you should still include an alt attribute but leave it empty:
This tells screen readers to skip the image completely.
How to Add Alternate Text
There are three reliable ways to give an image an accessible name, depending on how it is used.
1. Using the alt Attribute
This is the most common and preferred method.
2. Using aria-label
If you cannot use alt, for example, when the image is generated dynamically, use aria-label instead.
3. Using aria-labelledby
If there is visible text near the image that already describes it, you can point to it with aria-labelledby.
Writing Good Alternate Text
Good alternate text focuses on meaning, not appearance. It explains why the image is there and what it contributes to the content.
Ask yourself:
- Why is this image here?
- What information does it provide?
- What would I say if I could not show this image?
Tips for writing effective alternate text:
- Keep it short and descriptive, usually under 125 characters.
- Focus on the purpose of the image, not every small detail.
- Do not start with “Image of” since screen readers already announce that.
- Avoid file names or generic terms like “graphic” or “picture.”
Good example:
<img src="chart.png" alt="Bar chart showing monthly sales growth">Bad example:
<img src="chart.png" alt="Chart image">Fixing the Problems
Here is how to fix missing or incorrect alternate text.
| Problem | Fix |
| Missing alt | Add one with a clear description |
| Decorative image | Use alt=”” |
| Unhelpful alt like “image” or file name | Replace with meaningful text |
| Image with nearby description | Use aria-labelledby |
Who Is Affected
Missing or incorrect alternate text impacts:
- Users who are blind or have low vision who rely on screen readers to understand visual content.
- Users with cognitive disabilities who benefit from concise or spoken descriptions.
- Users with slow internet connections, where images fail to load, and the alt text provides a fallback meaning.
Wrapping Up
Alternate text makes your images understandable for everyone, especially users who cannot see them. It ensures that your visuals communicate meaning, not just decoration.
Without alternate text: “image, cat.jpg”
With alternate text: “Drawing of a sleeping cat”
Always include descriptive alternate text for informative images, and empty alternate text (alt=””) for decorative ones. It is a simple change in your code that makes a major difference in accessibility.
