Goal
Ensure that image inputs are programmatically identifiable for people using assistive technology (AT).
Why this matters
The <input type="image">
behaves as a button, and the alt text on that input behaves as the button’s label. If a user doesn’t know what the label for a button is, they’re not likely to use it.
How to implement
Writer
Read Image alt text and SVG titles for instructions on writing quality alt text.
Developer
See <input type=”image”> on MDN’s site for instructions on how to implement.
How to test
Manual testing
- Right-click the input and inspect the code.
- Confirm that the
<input type="image">
also includes a populatedalt="..."
attribute.- An empty alt string is a failure.
- No alt attribute is a failure.
- Alt text that tells the user what the button looks like, not what it does, is a failure.
Automated testing
alt
attribute is not required according to the HTML spec, so confirm that your HTML validator flags this as an error, not a warning!HTML validation may identify that the alt attribute is missing or empty.
Because the content of the attribute is contextual, automated testing cannot identify whether the alt text makes sense in the context of the page.