A six-check audit on three charts
The checks are yes or no and can run in a test (Phase 16 puts them in tests/). They check that words exist, not that the words are right.
Run a short, repeatable audit on every chart: a handful of yes-or-no checks, an automated scan with its limits understood, and a session with a real screen reader user. Automation finds a missing name. Only a person finds a useless one.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a seventh check to audit: the chart's description is not longer than 600 characters.
Write the one-line axe call that returns the list of violation ids for the whole page (with axe-core loaded).
Explain it without notes
What does an automated scan find, and what does it miss?
Why a short checklist instead of a long standard?
What would you ask a screen reader user to do in a test session?
Where do you put the audit so it keeps running?
Preview
Console
Nothing logged yet.Expected console output
Bare svg: 1 of 6 pass
FAIL has a role (img or group)
FAIL has a name
FAIL name says more than 'chart'
FAIL has a description
FAIL has a table twin
Labelled 'chart': 3 of 6 pass
FAIL name says more than 'chart'
FAIL has a description
FAIL has a table twin
Full: 6 of 6 pass