Role queries fail on div soup and pass on real elements
The same tests, two versions of the component. The div-soup version looks identical on screen, but the queries can't find a labelled textbox or a button, exactly as a screen reader user wouldn't. Note that the placeholder doesn't count as a label. Enter on the real button submits the form, which userEvent simulates like a browser.
Test accessibility in layers: role-based Testing Library queries that fail when names and roles are missing, automated axe scans, keyboard-only walkthroughs, real screen reader checks, and checks for reduced motion and colour contrast.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a test (using the tiny test helper style) that checks a Modal returns focus to its opener when closed.
Write a useReducedMotion-aware Toast that slides in normally and just appears when the user prefers reduced motion.
Explain it without notes
How do Testing Library's role queries act as accessibility checks?
What can automated tools like axe catch, and what can't they?
Describe a keyboard-only test pass. What are you looking for?
How do you respect reduced motion in a React app, and what contrast ratios does WCAG AA require?
Preview
Console
Nothing logged yet.Expected console output
-- div-soup version
✗ the email field has a label → Unable to find an accessible element with the role "textbox" and name "Email"
✗ a keyboard user can subscribe → Unable to find an accessible element with the role "button" and name "Subscribe"
-- fixed version
✓ the email field has a label
✓ a keyboard user can subscribe