Build a form error summary that jumps focus to every problem field

My form repaints with small red text next to the broken fields, and nobody scrolling by keyboard ever sees it.

Beginner to intermediateRead 7 minDoing: a couple of hours7 steps

▶ Start

What you'll have at the end

An error summary at the top of the form that lists every invalid field and links straight to it

Before you start

You need

A React form whose fields are already registered with a validation library that exposes a live, per-field object of current problems after a failed submit (react-hook-form is the example this recipe builds on, but any library with the same shape works).

Not covered

Writing the validation rules themselves, such as which pattern makes an email address count as valid. This recipe only makes an already-failing field's problem reachable and audible, it never decides what counts as a problem.

Leans on

7 steps

Where to go next

What does your app sound like to a screen reader user?

for actually turning a screen reader on and listening to the summary and each field's own message, instead of trusting how it looks on screen

Keeping a live region's search-result count from talking over itself

for a live region that updates on its own without stealing focus, the pattern this recipe's own late-arriving server variant leans on

Lint a React app for accessibility mistakes before you run it

for catching a field missing its own label or id automatically, before it ever reaches a summary link with nowhere real to land

Checked 22 Aug 2026

Part of the Web Accessibility cookbook