Orientation: one form, fifteen passes, three tests

1. The promise

You'll know what this chapter promises, what you're building (a multi-step job-application form), which packages you'll install in which order, and the three tests the assignment grades against. Eight minutes. Read along.

2. The mental model

This chapter is a workshop. You build one thing end to end and learn the tools by using them. The thing is a job-application form for a fictional company. Three steps: personal details, work history, references. Every unit adds one capability to it.

By unit 13.assign you ship a form that real humans can use — including humans who cannot see the screen and humans who do not use a mouse.

(DIAGRAM: the chapter as one form built in fifteen passes — flowchart — central box "the job-application form" with arrows from 13.1 through 13.14 each adding one capability)

(SCREENSHOT: the finished multi-step form on step 1 — Chrome — full window — Personal Details heading and three text inputs visible)

The three tests the chapter assignment grades against:

• axe-core scan. Zero violations on every step. axe-core is an open-source accessibility scanner that flags WCAG rule breaks.
• Screen-reader walkthrough. NVDA on Windows or VoiceOver on macOS, from first field to success message. A screen reader is software that reads the page out loud for blind users.
• Keyboard-only run. First field to success without touching the mouse. Tab, Shift+Tab, Enter, Space, Arrow keys only.

(SCREENSHOT: axe DevTools panel after a clean scan of the finished form — Chrome DevTools — full window — green "0 issues" message visible)

3. You do it, with me

Open VSCode. Open the Next.js starter from Ch 12.

(SCREENSHOT: VSCode showing the Ch 12 Next.js starter open — file tree on the left — full window)

Read the package list you'll install across the chapter. Don't install yet. Each unit installs what it needs.

• React Hook Form (13.2). A form library that uses refs, not state. A form library is code that manages the state and lifecycle of form inputs so you don't write that code by hand for every form.
• Zod (13.3). A schema validator. A schema is a written-down shape that data has to match.
• @hookform/resolvers (13.4). The bridge between React Hook Form and Zod.
• axe DevTools (13.11 onwards). A Chrome extension. Install once, use forever.
• NVDA (13.13). Free on Windows from nvaccess.org. On macOS, VoiceOver is built in (Cmd+F5).

(SCREENSHOT: NVDA speech viewer showing the form reading out its first field — Windows — speech viewer window highlighted)

The chapter promise, restated: after this chapter your forms will work for keyboard users, screen-reader users, and the server they post to.

The honest time. Content takes about three hours forty minutes at honest pace. The assignment takes about two hours. Real accessibility takes real time.

You do not need a backend running until 13.6. Units 13.1 through 13.5 work against an in-memory submission.

4. What you should be seeing

Three pictures in your head:

1. One form. Built across fifteen units. Each unit adds one capability. The form in 13.14 is the form you submit.
2. Three tests. axe-core, screen reader, keyboard-only. The assignment grades against all three.
3. Four packages. React Hook Form, Zod, @hookform/resolvers, axe DevTools. You'll meet each one in the unit that uses it.

If you can name those three things without scrolling up, you're done with this unit.

5. Common stumbles

• You think accessibility is a polish step at the end. It is not. A form built without thinking about keyboards or screen readers needs to be rewritten, not retrofitted. Do the units in order.
• You skip ahead to 13.14 thinking the multi-step part is the interesting bit. The state machine in 13.10 and the ARIA in 13.11 are prerequisites. Don't skip.
• You install everything now to "get it out of the way". Each unit explains what it installs and why. Installing blind costs you the explanation.

6. You should know