• Success Criterion 3.3.1
  • Conformance level A

Error Text That’s Visible but Never Announced to Screen Readers

3.3.1 — Error Identification

Scenario

Setting

A job board's application form

What’s wrong

Error text present visually but not associated or announced (no aria-describedby (code that ties help or error text to a field), no live region (code that makes screen readers announce updates)/alert, focus untouched) — user not *informed* in text they can find.

Example 

<label for="salary">Desired salary</label>
<input id="salary" type="text">
<span class="error-text">Enter a number, not text.</span>
<!-- error-text is only shown/hidden with CSS; no aria-describedby, no role=alert, focus stays put -->

Why it matters

The error is sitting right on screen, but a screen reader user tabbing past the field never hears it and submits the application thinking it went through.

How to test

Submit invalid data and check DevTools: if the error text isn't linked to its field via aria-describedby, and no live region announces it, a screen reader user won't discover it.

How to fix

Associate the text with aria-describedby, mark the field invalid with aria-invalid, and move focus to the field so the announcement actually fires.

<label for="salary">Desired salary</label>
<input id="salary" type="text" aria-describedby="salary-error" aria-invalid="true">
<span id="salary-error" class="error-text" role="alert">Enter a number, not text.</span>

salaryInput.focus();

Outcome

The applicant hears the salary field's requirement immediately and fixes it before moving on.

Who is affected

Screen reader users, since visible text with no programmatic tie to the field or the moment of failure is invisible to assistive technology.

Learn more

Related scenarios