alt-text-for-functional-images
Web validation
A functional image acts as a control: it is the content of a link or a button. Its alt text needs to say what the control does or where it goes, not what the image looks like. If the alt describes the picture, for example “right arrow” or “magnifying glass”, instead of the action, screen reader users hear the control but cannot tell what it will do. The alt should name the function, such as “Search” or “Continue to checkout”.
Pass Patterns
Link image describes the destination
The alt says where the link goes, not what the icon looks like.
<a href="/checkout">
<img src="continue.png" alt="Continue to checkout" />
</a>Button image describes the action
The alt names what the button does.
<button>
<img src="search-icon.svg" alt="Search" />
</button>Fail Patterns
Alt describes appearance, not function
“right arrow” describes the icon but not where the link goes.
<a href="/checkout">
<img src="continue.png" alt="right arrow" />
</a>Vague alt that does not state the action
“icon” tells the user nothing about what the button does.
<button>
<img src="icon.png" alt="icon" />
</button>WCAG techniques
Sufficient techniques
- G82: Providing a text alternative that identifies the purpose of the non-text content
- H30: Providing link text that describes the purpose of a link for anchor elements
- H36: Using alt attributes on images used as submit buttons
- 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-based control.
- Listen to how the control is announced.
Expected results: The control is announced with a clear action or destination, such as “Search” or “Continue to checkout”.
Actual results: The control is announced with unclear or visual-only text, such as “icon” or “arrow”.
Inspecting the browser dev-tools
- Select the image-based button or link in your browser's dev tools.
- Check its computed accessible name in the Accessibility panel.
- Compare it with what the control actually does.
Expected results: The accessible name states the control's action or destination.
Actual results: The accessible name describes the image (for example, “arrow”) or is vague (for example, “icon”).
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. For a functional image, that purpose is the action it performs, so the alt must convey the function or destination. Alt text that only describes the image's appearance does not serve the equivalent purpose.
Why is this issue marked as Moderate?
This issue impacts usability rather than complete access. The control is still reachable, but its purpose may be unclear. That creates confusion for assistive technology users and can slow navigation or lead to incorrect actions.
Why does this check require human review?
Whether alt text correctly describes a control's function depends on what the control actually does, which a tool cannot determine. This check surfaces image-based controls so a reviewer can confirm the alt names the action or destination rather than the picture.
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. |