Course 12 · Craft
Accessibility
Everyone, or it does not work.
Semantics, names, keyboard, focus, contrast and ARIA — checked against the browser’s own accessibility tree, not against a linter’s opinion.
0 of 16 lessons finished — nothing yet
The syllabus
16 lessons,
in the order they build on each other.
Who this is for
The people, the numbers, the law — and why the fixes make the product better for everyone.
The right element
What a button gives you for free, and everything a div makes you rebuild.
Headings and landmarks
How somebody who cannot see the page finds their way round it in ten seconds.
The accessible name
The one string every control has, where it comes from, and the order the browser resolves it in.
Images, video and audio
Alt text that says the right thing, decorative images, captions and transcripts.
The keyboard
Tab order, what is reachable, what is a trap, and the shortcut that steals a letter.
Focus, and where it goes
Visible indicators, :focus-visible, and moving focus when the page changes under you.
Forms
Labels, grouping, required, and an error message somebody actually hears.
ARIA, and its five rules
What ARIA does, what it cannot do, and why the first rule is not to use it.
Custom widgets
Tabs, disclosure and combobox: the roles, the states and the keys each one owes.
Dialogs and focus traps
The modal done properly: focus in, background inert, escape out, focus back.
Announcing changes
status, alert and aria-live — telling somebody what happened without interrupting them.
Contrast and colour
The ratios, what counts as large, non-text contrast, and never colour alone.
Motion, zoom and targets
prefers-reduced-motion, 200% zoom, reflow at 320px, and a tap target you can hit.
Testing it
What automated tools catch, what they never will, and a ten-minute manual pass.
Practice: fix a component
One inaccessible menu, rebuilt until the accessibility tree is right.
Keep going
The other courses.
HTML
The document, the elements and the meaning behind them. Everything else on the web is layered on top of this.
CSS
Selectors, the box model, layout with flexbox and grid, and motion that has a reason to move.
JavaScript
Values, functions, the DOM, events and asynchronous work — written so you can debug it later.