Input buttons must have discernible text
Estimated effort: about 5 minutes.
Buttons built with <input type="button">, <input type="submit">, or <input type="reset"> get their visible label from a value attribute (or a browser default). If that value is missing or empty, a screen reader announces nothing useful, so a shopper cannot tell that a button is the "Add to Cart" or "Update Cart" action.
How to fix it
- Find the <input type="button">, <input type="submit">, or <input type="reset"> element with no text. Note that plain <input type="submit"> and <input type="reset"> get a generic browser-supplied label ("Submit"/"Reset") when value is omitted, but <input type="button"> gets no default label at all and must always have one.
- Add a value attribute containing a short, specific action label, e.g. value="Add to Cart" or value="Update Cart".
- If the button is styled with a background image or icon and no visible text is wanted, add an aria-label attribute instead, e.g. aria-label="Add to cart" on an icon-only cart button, or keep a non-empty value and hide it visually with CSS rather than removing it from the accessibility tree.
- Do not leave value="" on a submit or add-to-cart button; an empty value is treated as having no name.
- Reload the page and confirm the button announces the intended action in the browser's Accessibility Inspector or a screen reader.
Before and after
Before
<input type="submit" value="">
<input type="button" onclick="updateCart()">
After
<input type="submit" value="Add to Cart">
<input type="button" value="Update Cart" onclick="updateCart()">