By the end of this lesson you can
- Use automated accessibility testing tools.
- Use browser, design tool and assistive technology tools for manual testing.
- Understand what each tool can and cannot find.
The idea
Design tools
Contrast checker plugins, colour blindness simulators and annotation kits for headings, focus order and labels. Use them before handoff.
Automated testing
Tools such as axe DevTools, WAVE and Lighthouse scan pages for detectable problems: missing alt text, low contrast, missing labels, invalid ARIA. They are fast, but they cannot judge meaning: is the alt text accurate? Is the focus order logical? Automated tools find only a portion of issues.
Browser tools
Browser developer tools show the accessibility tree (what assistive technology sees): roles, names and states. Zoom and text spacing tests need only the browser.
Assistive technology
- Screen readers: NVDA (free, Windows), VoiceOver (built into Apple devices), TalkBack (Android), JAWS (commercial).
- Voice control: Voice Control on Apple devices, Voice Access on Android.
- Magnifiers: built into operating systems.
People
No tool replaces testing with disabled people, who use assistive technology daily and in ways testers may not expect.
Why it matters in real projects
Using the right tools at the right stage catches problems early and efficiently. Knowing their limits prevents false confidence: a perfect automated score does not mean a product is accessible. Designers who can test with assistive technology produce better specs and understand the experience they are designing for.
A realistic example
A team celebrates a Lighthouse accessibility score of 100. A screen reader user then tries the checkout: the promo code field is labelled, but its error is never announced, and a custom drop-down cannot be operated.
The team adds manual keyboard and screen reader checks to their definition of done, uses axe in their test pipeline, and runs quarterly sessions with disabled participants. The next release catches similar problems before launch.
Step by step
Install tools
Install a contrast plugin, axe DevTools and WAVE.
Run automated scans
Scan a page and review results.
Inspect the accessibility tree
Check names and roles in browser tools.
Learn a screen reader
Learn ten basic commands for NVDA or VoiceOver.
Try voice control
Complete a task using voice commands.
Combine results
Compare what each method found.
Common mistakes
Mistake Trusting automated scores alone.
Instead Add manual and assistive technology testing.
Mistake Testing only in one screen reader.
Instead Test in at least two combinations where possible.
Mistake Never testing with disabled people.
Instead Include them in research regularly.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 1 h
Tool comparison
Test one page with several tools.
Steps
- Scan with axe and WAVE.
- Inspect the accessibility tree.
- Test with a screen reader and keyboard.
- Compare what each found.
Deliverable
A comparison table of findings by tool.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Use design tools before handoff.
- Automated tools are fast but limited.
- Browser and assistive technology testing finds more.
- Testing with disabled people is essential.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
Your notes
Marking complete updates your course and roadmap progress.