Accessibility, from the document out
Accessibility means building pages that work for everyone: people using a keyboard, a screen reader, zoom, or voice. You do not need to know any of it yet. Each lesson starts with a one-minute summary, then lets you break and fix a real example with your own hands.
In one minute
- Use the right HTML element first. Most accessibility comes free from buttons, links, headings, and labels.
- Test with the keyboard. Press Tab. If you cannot see where you are, or cannot use it, neither can many users.
- ARIA comes last. It only describes things; it never adds behaviour.
How to study a lesson
Read the one-minute box, play with the lab using Tab only, read the plain-words explanation, then finish with the "Try it yourself" box. Tick "Mark complete" at the bottom to track progress.
The shape of the course
Lessons 1–4Who we build for, and the page structure that screen readers navigate.
Lessons 5–14Buttons, focus, forms, tables, and how to debug barriers.
Lessons 15–21The ARIA reference: names, states, widgets, live regions, relationships.
Learning path
Part 1 · HTML labs (lessons 1–14)
- 01 Who we design for Blindness, low vision, motor, hearing, cognitive load, and calm UI — the needs the later labs serve
- 02 Structuring documents Language, title, viewport, and a document that is a page before it is a component
- 03 Structuring pages Landmarks, labels, heading outline, and source order
- 04 Linking content Links versus buttons, downloads, new contexts, and hit targets
- 05 Performing actions Real buttons, names, pressed state, and why disabled is often the wrong signal
- 06 Styling content Color, contrast, units, user preferences, and motion
- 07 Managing focus Visible focus, skip links, moving focus, and containing it on purpose
- 08 Navigating sites Current page, item counts, disclosure menus, and narrow-viewport nav
- 09 Toggling content visibility Hiding versus removing, native disclosure, and grouped disclosures
- 10 Constructing forms Names, descriptions, errors, groups, and multi-step flows
- 11 Filtering data Batch filters, result announcements, and sort that does not steal focus
- 12 Presenting tabular data When a table is the right element, captions, headers, and sortable columns
- 13 Creating custom elements IDs, ARIA references, and focus inside shadow DOM
- 14 Debugging barriers Accessibility tree, names and roles, tab order, preference emulation, and what automation misses
Part 2 · WAI-ARIA reference (lessons 15–21)
- 15 The ARIA model First rule, host language, name/role/value, abstract roles, and when a role fights the element
- 16 Names, descriptions, and hiding label, labelledby, describedby, description, details, hidden, braille, and role description
- 17 States and widget properties Every widget state: checked, pressed, selected, expanded, invalid, values, and the rest
- 18 Widget roles Standalone and composite roles, with a keyboard tablist you can operate
- 19 Structure and landmark roles Document structure, landmarks, and the roles that must not be named
- 20 Live regions, windows, ariaNotify alert, status, log, dialogs, live attributes, and the ARIA 1.3 notify API
- 21 Relationships and grid indices controls, owns, active descendant, flowto, errors, set position, and table indices