Image buttons must have alternate text
Estimated effort: about 5 minutes.
An <input type="image"> element turns an image into a clickable button, commonly used for "Add to Cart" graphics or a PayPal-style checkout button. Screen reader users need alt text that describes the action the button performs (e.g. "Add to cart"), not a description of the picture itself. Without it, the button is announced as unlabeled.
How to fix it
- Find every <input type="image"> element (image-based buttons are common for graphical "Add to Cart" or "Checkout with PayPal" buttons).
- Add a non-empty alt attribute that names the action the button performs, e.g. alt="Add to cart" or alt="Check out with PayPal", not a caption of the artwork.
- If aria-label or aria-labelledby is already present and accurate, that also satisfies this rule; alt is not required in that case, but at least one of the three must exist.
- Never leave alt="" on an <input type="image"> — unlike decorative <img> elements, an image button is always interactive and must always announce its purpose.
- Reload the page and confirm the button's accessible name matches the action it performs.
Before and after
Before
<input type="image" src="add-to-cart-button.png">
After
<input type="image" src="add-to-cart-button.png" alt="Add to cart">