Building Accessible React Forms with React Hook Form and Zod

Forms are where accessibility quietly succeeds or fails. React Hook Form and Zod give you a clean way to get validation right, but accessibility still takes intent. Here's the setup I reach for.

Schema first with Zod

Define the shape and rules in one place, then infer your types from it. Your validation and your TypeScript stay in sync automatically.

const schema = z.object({
  email: z.string().email('Enter a valid email'),
  message: z.string().min(10, 'Tell me a little more'),
});

Respect the keyboard

Test the whole form with the mouse unplugged. Tab order should be logical, focus states must be visible, and Enter should submit from any field. If you can't complete it on the keyboard, it isn't done.

Accessible forms aren't a separate feature — they're just forms built correctly.