Home Challenges Reps Problems Leaderboard Take a challenge

A form without a mouse

Every input needs a name a screen reader can read, every error needs to reach the person who caused it, and a group of radios needs to say what it is a group of. Placeholders are not labels.

Intermediate20 min on the clock5 graded checks · 100 pointsReachable by EveryonePro

Graded by reading your code against the checklist below.

What you build

A real label element, bound to its input with htmlFor
The radio group wrapped in a fieldset with a legend
Errors linked to the input with aria-describedby
aria-invalid set when the field is in error
role="alert" on the error so it is announced

Done means

Completable start to finish with only a keyboard, and every field announces its own name and its own error.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

Every input is named by a real label+25Accessibility
The radio group states what it is asking+20Semantic HTML
The error is bound to the field it belongs to+20Accessibility
The field is marked invalid, not only described+20Form validation
The error is announced when it appears+15Accessibility

What it teaches

Accessibilityintermediate

Every input needs a label and every interactive thing needs to work from the keyboard — this is the difference between a demo and something a real person can use.

Semantic HTMLbeginner

Using header, nav, main and section instead of div everywhere is what lets screen readers, search engines and your own future self understand the page.

Form validationintermediate

Validation is telling the user what is wrong before they submit, in a way your server can trust too — a schema lets you write the rule once and use it in both places.

The rest of Reachable by Everyone

The modal that traps focusIntermediate · 20 min Names the screen reader can readIntermediate · 20 min