• Success Criterion 3.3.1
  • Conformance level A

Form Errors Marked Only by a Red Border, With No Text

3.3.1 — Error Identification

Scenario

Setting

An online clothing store's product listing page

What’s wrong

Errors indicated only by red borders/icons with no text describing the item in error.

Example 

<div class="size-options">
  <button class="size-swatch error-icon" data-size="M">M</button>
  <button class="size-swatch" data-size="L">L</button>
</div>
<!-- clicking Add to Bag with nothing selected just adds a red dot icon to the swatch row -->

Why it matters

A shopper who can't see the small red dot has no idea a size is required, so they click Add to Bag repeatedly with nothing happening.

How to test

Submit invalid data and inspect the error indication: if only a red border/icon appears with no text describing the specific problem, it fails.

How to fix

Name the exact item and field in the text, since a listing page often has dozens of products with identical icons.

<div class="size-options" role="group" aria-labelledby="size-error">
  <button class="size-swatch" data-size="M">M</button>
  <button class="size-swatch" data-size="L">L</button>
</div>
<p id="size-error" role="alert">Please select a size before adding this item to your bag.</p>

Outcome

A shopper picks a size after reading the message and completes the add-to-bag action without confusion.

Who is affected

Low-vision shoppers and screen reader users who cannot perceive a color-only icon marking which selector needs attention.

Learn more

Related scenarios