This page was built deliberately, against the WCAG 2.2 AAA bar.
Decisions made on the way:
-
Real labels, real autocomplete
Every field has a real <label for="..."> — never placeholder-as-label. Email and name fields set autocomplete="email" / "name" so the browser autofills properly.
-
Validation on blur, not on every keystroke
Errors only appear after the user leaves the field — no yelling while they type. Once an error is shown, re-validation runs on input so they get immediate feedback when fixing it.
-
Errors linked via aria-describedby
Error containers are linked to their inputs from the start. When focus lands on an invalid field, the screen reader announces the label, then the error.
WCAG 3.3.1WCAG 4.1.2
-
Submit jumps focus to the first invalid field
If validation fails on submit, focus moves to the first broken field automatically. A live status message ("please fix the highlighted fields") is announced via aria-live.
WCAG 3.3.1WCAG 3.3.3
-
Radio group has a real <fieldset> + <legend>
The "What’s this about?" radio group uses semantic grouping so screen readers announce the group name once when entering, then each option name. No ARIA needed.
WCAG 1.3.1WCAG 4.1.2
-
Touch targets are at least 44×44
Inputs are 2.75rem (44px) tall. Radio labels include enough padding that the click area covers the whole row. AAA target size.
WCAG 2.5.5