input-image-alt
Ensures <input type="image">
elements have alternate text.
Description
Ensures that every <input type="image">
has an accessible name.
Why is it important?
If an <input type="image">
button doesn’t have alternate wording, screen reader users won’t understand what it’s for. Since a screen reader cannot convert images of words into output, alternate text is still necessary even if the image only includes text.
Simply entering text next to the form element does not constitute a label in the real sense of the word. Screen readers and other assistive technologies demand labels in code that can be decided programmatically. Some screen readers are designed to infer the label’s meaning from the text around it, but this technique is not foolproof and may cause confusion if the screen reader makes an incorrect assumption.
Examples
-
Success:
- The function of the picture button is explained by its
alt
attribute. The function of the switch is obvious to both sighted and non sighted users.
- The function of the picture button is explained by its
-
Failure:
- There is no alternative text for an image button. Assistive technology is unable to determine its purpose.
How to fix?
Ensure alternative text is provided that describes the input button’s purpose. This can be done using title
, aria-label
, aria-labelledby
or alt
attributes.
Tags
cat.text-alternatives, wcag2a, wcag111, wcag412, section508, section508.22.a, ACT
References
- WCAG 1.1.1: Non-text Content
- WCAG 4.1.2: Name, Role, Value
- Deque University: input-image-alt
- Accessibility Insights: input-image-alt
- Evinced Digital Accessibility Knowledge Base: input-image-alt
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!