input-image-alt
Web validation
Browsers and assistive technologies treat an <input type="image"> as a functional image. Its alt, aria-label, or aria-labelledby attribute value becomes the control's accessible name.
Without that name, screen-reader users cannot tell what the button does, which can block completion of critical tasks. Always supply brief text that expresses the action (for example, “Search”) rather than describing the file name or the image itself.
Pass Patterns
Using an alt attribute
The alt text “Search” gives assistive-technology users enough information to operate the button.
<input type="image" src="/icons/search.svg" alt="Search" />Using the aria-label attribute
The aria-label attribute value “Search” provides an accessible name when no alt attribute is present.
<input type="image" src="/icons/search.svg" aria-label="Search" />Fail Patterns
No text alternatives
Because no alt, aria-label, or aria-labelledby attribute is present, the button has no accessible name, so its function is invisible to screen-reader users.
<input type="image" src="/icons/search.svg" />WCAG techniques
Sufficient techniques
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.
- Move focus to the image button.
- Listen to the announced name.
Expected results: The screen reader announces the action, for example, “Search button”.
Actual results: The screen reader announces nothing or reads the file path.
Inspecting the browser dev-tools
- Open browser dev tools, and go to the Accessibility panel.
- Select the image button element.
- Check the Name property.
Expected results: The property shows the provided alt attribute value, aria-label attribute value, or referenced text.
Actual results: The Name field is empty.
FAQ
How does this issue relate to 1.1.1 Non-text Content?
SC 1.1.1 requires a text alternative for any non-text content. An image button is a control, so it must expose a name describing its purpose. Missing or vague alt text breaks this requirement, creating a barrier for assistive-technology users.
Why is this issue marked as Critical?
Without an accessible name, users who rely on screen readers cannot identify or activate the button, preventing them from completing essential form actions. Because the impact is task-blocking and affects all browsers and assistive technologies, the severity is Critical.
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. |