text-in-image
Web validation
Images such as banners, buttons, infographics, and charts often contain text that carries part of their message, like an offer, a label, or a key figure. Screen readers don't read the text inside an image. They announce only its alternative text, so when that text is left out, screen reader users might miss out on part of the content or not understand it properly. Change the alternative text so it includes the text from the image in a meaningful way. Where possible, avoid the problem altogether by using real text, styled with CSS, instead of text embedded in an image.
Note: Not every word in an image is important. Incidental text, such as a street sign in the background of a photo or a brand name on a product in a lifestyle shot, usually doesn't need to be in the alternative text, unless it matters for understanding the image in its context. If an image contains a lot of text, such as an infographic, provide the full text on the page or as a long description, rather than in the alt attribute. See the related alt-text-for-complex-images and alt-text-is-too-long validations.
Pass Patterns
Banner with its text in the alternative text
The alternative text includes the offer shown in the image.
<img src="summer-sale.png" alt="Summer sale: 30% off all shoes until June 30" />Chart with its key figures in the alternative text
The alternative text includes the title and the figures that the chart presents.
<img src="sales-chart.png" alt="Quarterly sales 2025: Q1 $1.2M, Q2 $1.5M, Q3 $1.4M, Q4 $2.1M" />Fail Patterns
Banner described without its text
The alternative text describes the image but leaves out the offer, which is the most important part of the banner.
<img src="summer-sale.png" alt="Summer sale banner" />Image button whose text is missing
The image shows the word "Subscribe", but the alternative text describes the icon, so screen reader users don't know what the button does.
<button>
<img src="subscribe-button.png" alt="Newsletter icon" />
</button>WCAG techniques
Sufficient techniques
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- H37: Using alt attributes on img elements
Advisory techniques
Failure techniques
Try It Yourself
Using a screen reader
New to screen reader testing, or need a refresher?
Review this article first: Practical guides for using screen readers
- Load the page and open a screen reader.
- Move to the image, for example with the graphics navigation key (G in NVDA and JAWS).
- Compare what the screen reader announces with the text shown in the image.
Expected results: The screen reader announces all the text in the image that is important for understanding it.
Actual results: The announcement leaves out important text, such as an offer, a label, or a key figure.
Inspecting the browser dev-tools
- Inspect the image in your browser's dev tools.
- Read its
altattribute, or its accessible name in the Accessibility panel. - Compare it with the text shown in the image.
Expected results: The alternative text includes the important text from the image.
Actual results: The alternative text describes the image without its text, or leaves out part of it.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires a text alternative that serves the equivalent purpose of the non-text content. When an image contains important text and its alternative text leaves that text out, the alternative is not equivalent, and screen reader users don't get the same information as sighted users.
Why is this issue marked as Serious?
The image has alternative text, but it leaves out part of the content. Screen reader users may miss key information, such as the terms of an offer or the purpose of a button, and may not realize anything is missing, so it is rated serious.
How is this different from 1.4.5 Images of Text?
SC 1.4.5 asks authors to use real text instead of images of text wherever possible, except for cases such as logos, where the visual presentation is essential. It applies regardless of the alternative text. This validation checks the alternative text itself. The best fix for both is to use real text styled with CSS, so the content is available to everyone without relying on the image.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.1.1 Non-text Content (A) | All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for controls/input, time-based media, tests, sensory experiences, CAPTCHA, and decoration/formatting/invisible content. |
| EN 301 549 | 9.1.1.1 Non-text Content | Same as the WCAG text. |
| Section 508 | 1194.22(a) | A text equivalent for every non-text element shall be provided (e.g., via “`alt`”, “`longdesc`”, or in-element content). |
| 508 Trusted Tester | 1.1.1-meaningful-image-name, 7.A | The accessible name and accessible description for a meaningful image provides an equivalent description of the image. |