• Success Criterion 1.3.1
  • Conformance level A

Form Error Message Not Linked to the Field It Describes

1.3.1 — Info and Relationships

Scenario

Setting

A professional networking site's profile editor

What’s wrong

Error association: message displayed near the field but not linked via aria-describedby (code that ties help or error text to a field) (relationship visual only).

Example 

<label for="headline">Headline</label>
<input id="headline" type="text">
<p class="error-text">Headline must be under 120 characters</p>

Why it matters

A screen reader user who overflows the character limit hears nothing extra when they tab away, so the error goes unnoticed.

How to test

Trigger a validation error and focus the field with a screen reader: it should announce the error text — if aria-describedby isn't wired to the message, it stays visual-only.

How to fix

aria-describedby reads the error text aloud whenever the field gets focus, keeping it attached to the input.

<label for="headline">Headline</label>
<input id="headline" type="text" aria-describedby="headline-error">
<p id="headline-error" class="error-text">Headline must be under 120 characters</p>

Outcome

A user hears the character limit error the moment they return to the headline field, without hunting for it.

Who is affected

Screen reader users correcting a profile field never hear the specific reason it failed validation.

Learn more

Related scenarios