H3.11.2color-only errors fail announcementdesign

Color-only error states are silent to AT

Aliases: color-only error · red border · color is not an error

What it is

A border turning red, a label changing hue, an icon swapping to another tint: that is state for vision, and usually nothing for a screen reader—color is not speakable text, and not a change of name or description. A color-only error leaves the announcement channel empty. This entry is not about whether to speak unprompted. It only notes that this channel does nothing for assistive technology. It is also not about whether colorblind users can see the difference.

Why it happens

Assistive technology speaks accessible name, description, value, and state attributes, not computed style. A CSS recolor does not update those strings, and a live region has no new text to send. When the user reaches the field linearly, they hear the original label and treat a failed field as still submittable. Even if they know “something is wrong,” color does not give a navigable target for which field. Text and an icon (not hue alone) can serve visual difference and spoken content at once.

Where it stops holding

Color may still be a visual accelerator if the same state is also expressed as text or a state attribute. A red box may be more obvious in a high-contrast theme; that does not make color into an announcement. A legend that says “red border means error” does nothing for a screen-reader user unless the legend itself is spoken and the field refers to it—and that is no longer color only.

Applying it

  • An error state must change accessible name or description, or add real text; forbid a border-color-only change.
  • An icon or text mark appears with the color; the mark needs a text alternative and must not be pure decoration.
  • Walk the form with color suppressed or in forced monochrome; failed fields must still be distinguishable and speakable.
  • Verify by dropping CSS color (or reading only the screen reader’s virtual buffer). If a failed field’s text is identical to a valid field’s, the state never entered announcement.

Related

  • Within the group: H3.11.1 Errors have to be announced, not merely drawn · H3.11.3 Announcing too early interrupts the keystroke · H3.11.4 The announcement must name the field and the reason
  • Adjacent: H1.05 Error location and focus · J2.03 Information not by color alone · E6.03 Inline validation
  • Search terms: color-only error · non-text contrast · accessible name

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/H3.11.2