Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 1 OF 5 · Forms and validation

Form errors

Compare a useful field error with one that is visible but disconnected from its input.

  • Level: Beginner
  • Time: 5-10 minutes
Objective

Check whether an error is identified in text and programmatically associated with its field.

PREPARE

Set up your test

  1. Turn on a screen reader you know how to operate.
  2. Navigate by controls or use Tab where the task asks you to.
  3. Listen for purpose and state, not one exact sequence of spoken words.

WORKING EXAMPLE

Establish the expected behavior

Submit the form without entering a project code. Then navigate away from and back to the field.

Expected behavior: the visible error identifies the problem, the field is exposed as invalid, and its error remains available as the field’s description.

INTENTIONAL DEFECT

Find the barrier

The example below deliberately contains one accessibility defect. Skip the defective example.

Submit this form without entering a project code. Then navigate away from and back to the field.

Hint

After the error appears, listen to what remains available when focus returns to the field.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is the primary problem with the defective form?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective form displays useful text, but the input does not reference that text. Visual proximity alone does not create a programmatic relationship.

Repair

Keep the error visible, mark the field invalid after validation, and reference the error from the field. If the field already has instructions, include both IDs in aria-describedby.

<label for="project-code">Project code</label>
<input id="project-code"
  aria-invalid="true"
  aria-describedby="project-code-error">
<p id="project-code-error">
  Enter a six-character project code.
</p>

Retest

  • Submit the empty form and confirm that the error is identified in text.
  • Return to the field and confirm that its invalid state and error are available.
  • Correct the value and confirm that obsolete error state and text are removed.

Report it

Example: The project-code error is visible but not associated with the input, so screen reader users may not hear the correction needed when they return to the field.

Standards and support

This exercise describes behavior rather than promising identical speech across screen reader and browser combinations.

Editorially reviewed 20 July 2026.