See plans and pricing

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

  1. 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.
  2. Add a value attribute containing a short, specific action label, e.g. value="Add to Cart" or value="Update Cart".
  3. 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.
  4. Do not leave value="" on a submit or add-to-cart button; an empty value is treated as having no name.
  5. 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()">

View the full rule reference from Deque University

See plans and pricing