HTMLARIAWCAGIntermediate~4h

Accessibility

Find what the scan cannot

A scanner finds a fraction of this, and that fraction is the easy part. The rest is four things a browser will tell you exactly if you ask: what a control is called, where Tab really goes, what a colour measures against the rule that applies, and what a screen reader says. You ask all four, on a page someone broke.

Start this project See the modules

Modules: 5
Drills: 11
Build steps: 8
Time: ~4h

Walk out able to

Audit a page you did not write — names, tab order, contrast, announcements — and repair every defect with an element, an attribute or a value, and say which.

What the project covers

Semantics, then ARIA

Repair the tree with an element before an attribute.

Focus and tab order

Where focus goes, and where it should have gone.

Contrast ratios

The number, and which of four thresholds applies.

The screen reader model

What is announced, and what silently is not.

The pitch

What you practise, and what you leave with

One broken checkout page, repaired until it can be used from the keyboard alone — plus the audit record that justifies every change.

You will practise

Repairing a control: element or attribute
The accessible name, computed from its markup
Tab order, and where focus should go next
Contrast ratios and the four thresholds

Afterwards you can

Find controls no keyboard can reach, in one line
Compute the name a control announces
Pick the contrast threshold a case needs
Say what a screen reader would and would not say

Modules

5 modules, 31 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Make the tree right first
~50 min
Repair a broken control by choosing the element, before reaching for an attribute.
- LessonWhy put the mouse down4 min
- LessonThe tree is not the page6 min
- LessonWhat an attribute cannot do7 min
- DrillChoose the element or the attribute11 min
- DrillName the rule this markup breaks9 min
- Build stepFind what is clickable and unreachable8 min
- Build stepRead the name devtools computes5 min
2
A role is a promise
~50 min
Compute the name a control announces, and say its state in the attribute that carries it.
- LessonWhat the control is called7 min
- LessonA name is not a description7 min
- DrillCompute the name it announces11 min
- DrillSay the state in the right attribute9 min
- Build stepFind the fields nobody named7 min
- Build stepName each one with the right source9 min
3
Focus is a place you can lose
~49 min
Predict a document's tab sequence, and decide where focus goes when the page changes.
- LessonFocus is a place you can lose7 min
- LessonThe ring, and when to move focus7 min
- DrillPredict the tab sequence12 min
- DrillSend focus where it belongs10 min
- Build stepTab through it with no mouse7 min
- Build stepCount the stops, then the gap6 min
4
Pick the threshold, then measure
~41 min
Compute a contrast ratio, and choose which of the four thresholds this case needs.
- LessonThe threshold before the colour6 min
- LessonFour numbers, and which applies7 min
- DrillHold the right threshold12 min
- Build stepMeasure the palette you were given8 min
- Build stepCheck it in devtools, then repair8 min
5
What it actually says
~1h
Predict an announcement, navigate the way the user does, and audit a page end to end.
- LessonWhat it actually says7 min
- LessonThe half of the page nobody hears7 min
- DrillPredict the announcement11 min
- DrillChoose the alternative it needs9 min
- DrillFind what the jump list offers8 min
- DrillSpot the one broken line7 min
- LessonShip the audit24 min