Accessible Forms

Accessible Ariel

The Rules

Click any rule to expand it. Tags show which W3C WAI section it covers.

Use <label> with htmlFor — never placeholder-only

Use useId() — never hardcode IDs

Wrap radio & checkbox groups in <fieldset>/<legend>

Group related text fields with role="group"

Use <optgroup> in <select> for grouped options

Place overall instructions BEFORE the <form>

Link hints with aria-describedby

Show error summary & move focus to it on submit

Scroll to & focus the first invalid field

Set aria-invalid and link error via aria-describedby

Announce outcomes with live regions

Custom controls need role + aria state + keyboard

Never rely on color alone for errors

Demo: Labeling Controls

Labeling Controls

A visible label linked with htmlFor gives every input an accessible name. Placeholders are never a substitute.

✓ Correct

Email address

✗ No label

Demo: Grouping Controls

Grouping Controls

Radios, checkboxes, and related fields need semantic grouping so screen readers announce the group name alongside each control.

Radio buttons → <fieldset> + <legend>

Output format

Text fileCSV fileHTML file

Checkboxes — also need <fieldset> + <legend>

I want to receive

The weekly newsletterOffers from the companyPartner offers

Select with <optgroup>

Choose a course

Related text fields → role="group" + aria-labelledby

Shipping Address

Name

Street

Billing Address

Name

Street

Demo: Custom Controls

Custom Controls

When native elements won't do, add role, aria-checked, and keyboard handlers so custom widgets behave like their native counterparts.

Star rating → role="radiogroup" + role="radio" + arrow key navigation

Toggle switch → role="switch" + aria-checked

Dark mode (disabled)

Demo: Instructions + Validation + Notifications

Full Form — All Together

Pre-form instructions, fieldset grouping, inline hints, aria-invalid, a focusable error summary, and a live-region success message. Submit empty to see validation in action.

Before you begin:

Fields marked with an asterisk are required.
Email must be a valid address, e.g. you@example.com
Bio is optional — max 200 characters.

Full ARIA Checklist

Every rule from this tutorial, mapped to the pattern it covers.

Every input has a <label> linked via htmlFor/id
IDs generated with useId() — no hardcoded duplicates
Radio & checkbox groups wrapped in <fieldset>/<legend>
Related text fields grouped with role="group" + aria-labelledby
Selects use <optgroup> for grouped options
Overall instructions placed BEFORE the <form> element
Hints linked to inputs via aria-describedby
Required fields: aria-required + visual asterisk + sr-only text
Failed submit: error summary rendered with role="alert"
Failed submit: focus programmatically moved to error summary
Failed submit: first invalid field scrolled into view
Error summary links point to each invalid field
Each invalid field has aria-invalid + aria-describedby linking its error
Success state announced via role="status" + aria-live="polite"
Urgent errors use role="alert" + aria-live="assertive"
Custom controls have role, aria-checked/selected, and keyboard handlers
Errors shown with icon + text + color — never color alone
Focus indicators are visible (never outline: none)
Placeholder text is supplementary only, never the sole label