• Success Criterion 3.3.1
  • Conformance level A

Error Shown Only Through a Placeholder or Color Change

3.3.1 — Error Identification

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Errors described only via placeholder change or color change of label.

Example 

<label style="color: red;">Expiration date</label>
<input placeholder="Invalid expiry, try again">
<!-- original 'MM/YY' placeholder is replaced by the error text itself -->

Why it matters

The moment the shopper starts typing again, the placeholder disappears and the error message vanishes with it, along with the reminder of the format expected.

How to test

Submit invalid data with a screen reader: if the error is conveyed only by a placeholder change or the label's color, with no separate error text, it fails.

How to fix

Keep the format hint in a persistent label and put the error in its own element that a placeholder swap can't erase.

<label id="exp-label">Expiration date (MM/YY)</label>
<input aria-labelledby="exp-label" aria-describedby="exp-error" aria-invalid="true">
<p id="exp-error" role="alert">Enter the expiration date as MM/YY, for example 09/28.</p>

Outcome

The shopper enters the date in the right format and the checkout proceeds without a second attempt.

Who is affected

Screen reader users, who don't hear placeholder text reliably, and anyone who clears the field and loses the error before reading it fully.

Learn more

Related scenarios