Screen Reader Guide

SCREEN READER FOUNDATIONS

0 of 20
Course progress: 0 / 20 lessons

PRACTICE 3 OF 5 · Forms and validation

Error summary

Submit a multi-field form and test whether the summary links to each invalid field.

  • Level: Intermediate
  • Time: 10-15 minutes
Objective

Verify that form-level summaries and field-level errors work together after validation.

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 empty form. Use the summary links, then return to each invalid field.

Expected behavior: the summary receives attention, its links move focus to invalid fields, and each field exposes its own error.

INTENTIONAL DEFECT

Find the barrier

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

Submit the empty form. Try to use the summary and then inspect each invalid field.

Hint

A useful summary should help users move to each problem and each field should retain its own error.

End of intentional defect.

DIAGNOSE

Choose the primary cause

What is missing from the defective error summary?

EXPLANATION

Understand and repair it

Reveal explanation

What happened

The defective summary lists errors as plain text and does not move focus to itself. The individual fields are also not marked invalid or associated with their error messages.

Repair

Move focus to the summary after submission, link each summary item to its field, mark invalid fields, and associate field-specific error messages.

<div class="error-summary" tabindex="-1">
  <h2>Fix these errors</h2>
  <a href="#email">Enter an email address</a>
</div>
<input id="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter an email address</p>

Retest

  • Submit the form and confirm focus moves to the summary or the first invalid field according to the product pattern.
  • Activate each summary link and confirm focus moves to the matching field.
  • Confirm each invalid field exposes its invalid state and field-level error.

Report it

Example: The account form summary lists errors but does not link to the invalid fields, and the field errors are not associated with their inputs.

Standards and support

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

Editorially reviewed 20 July 2026.