Testing A11y Basics
Write simple tests that catch common accessibility issues: prefer role/label queries, assert names/states, and add automated a11y checks.
Testing A11y Basics is a free React Academy lesson on CoddyKit — lesson 3 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why test accessibility
Goal: Catch a11y issues early.
- Prefer role/label queries
- Assert names, states, focus
- Add an automated check (axe)
Queries that reflect real use
- getByRole with name for buttons/links
- getByLabelText for inputs
- findBy* for async UI
- Use test IDs only as a last resort
Demo: accessible form
A small form with labels, button name, and polite feedback; ideal for user-centric queries.
<div id="root"></div>
Assertions: name/state (snippet)
Example test assertions for accessible name and live feedback.
<div id="root"></div>
Automated check with axe (snippet)
Add an automated check with axe (jest-axe). Fail the test on violations.
<div id="root"></div>
Tips & pitfalls
- Test names (labels/button text), not CSS
- Check focus when dialogs open
- Use axe to catch common issues; still do manual keyboard checks
Automated a11y check
Recap
Recap: Query by role/label, assert names and states, and add an automated axe check. Combine with manual keyboard testing for real confidence.
Frequently asked questions
Is the “Testing A11y Basics” lesson free?
Yes — the full text of “Testing A11y Basics” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “Testing A11y Basics”?
Write simple tests that catch common accessibility issues: prefer role/label queries, assert names/states, and add automated a11y checks. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “Testing A11y Basics” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Semantics, Labels, Roles, Focus
- Keyboard Interactions & Skip Links
- Testing A11y Basics