alt-text-for-informative-images
Web validation
An informative image conveys a simple concept or piece of information that fits in a short phrase or sentence, such as an icon that labels a phone number or a small diagram that shows a single instruction. Its alt text should carry that same meaning. The alt text should state what the image means in its context, not describe how it looks. Vague text like “icon”, or a description of shapes and colors, leaves screen reader users without the information the image provides.
Pass Patterns
Icon that labels nearby content
The alt text gives the meaning the icon adds, matching the visible label.
<img src="phone.png" alt="Telephone" /> 0123 456 7890Diagram conveying a single instruction
The alt text states the instruction the diagram illustrates.
<img src="cap.png" alt="Push the cap down and turn it counter-clockwise" />Fail Patterns
Alt text is too vague
A generic word tells the user nothing about what the icon conveys.
<img src="phone.png" alt="icon" /> 0123 456 7890Alt text describes appearance, not meaning
This describes shapes instead of the instruction the diagram gives.
<img src="cap.png" alt="circle with a curved arrow" />The telephone and cap examples are adapted from the W3C Web Accessibility Tutorials: Informative Images (Examples 1 and 3), © W3C, used under the W3C Document License.
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
Failure techniques
ACT Rules
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.
- Navigate to the image.
- Listen to the announced alt text.
Expected results: The alt text explains the meaning or purpose of the image.
Actual results: The alt text is generic, inaccurate, or does not match what the image conveys.
Inspecting the browser dev-tools
- Open your browser's dev tools and select the image.
- Check the computed accessible name.
- Compare it with the information the image actually conveys.
Expected results: The accessible name reflects the image's purpose or key information.
Actual results: The accessible name is vague, misleading, or missing the key meaning.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires non-text content to have a text alternative that serves the same purpose. An informative image meets this only when its alt text conveys the same information the image does. Vague or inaccurate alt text does not serve the equivalent purpose, so the criterion is not met.
Why is this issue marked as Moderate?
Users rely on alt text to understand visual content. When it is unclear or inaccurate, important information can be lost or misunderstood. The content may still be partly usable, but comprehension and task completion suffer.
What about charts, graphs, and complex diagrams?
Images that carry more information than a short phrase can hold, such as charts, graphs, maps, and detailed diagrams, are complex images. They need a short label plus a separate long description, and they are handled by a different validation: alt-text-for-complex-images. This check covers only images whose meaning fits in a short text alternative.
Why does this check require human review?
Whether alt text truly conveys an image's meaning depends on the image's content and context, which a tool cannot fully judge. This check surfaces images whose alt text may be inadequate so that a reviewer can confirm whether it matches what the image communicates.
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. |