See plans and pricing

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

  1. Find every <input type="image"> element (image-based buttons are common for graphical "Add to Cart" or "Checkout with PayPal" buttons).
  2. 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.
  3. 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.
  4. Never leave alt="" on an <input type="image"> — unlike decorative <img> elements, an image button is always interactive and must always announce its purpose.
  5. 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">

View the full rule reference from Deque University

See plans and pricing