Automated Testing
Catches: missing alt text, color contrast, missing labels, invalid ARIA, heading structure
Testing Overview
Accessibility testing requiresboth automated and manual testing. Automated tools catch about 30-40% of issues; the rest require human judgment.
Manual Testing
Catches: keyboard navigation, screen reader experience, focus management, meaningful alt text
Browser Extensions
Install these in Chrome, Firefox, or Edge for quick testing.
| Tool | Best For | Cost |
|---|---|---|
| axe DevTools | Comprehensive automated scanning; developer-friendly; integrates with DevTools | Free (Pro available) |
| WAVE | Visual overlay showing issues in context; great for beginners | Free |
| Accessibility Insights | Guided manual testing; FastPass for quick checks; detailed reports | Free (Microsoft) |
| ARC Toolkit | Professional-grade; WCAG mapping; detailed technical reports | Free |
| Lighthouse | Built into Chrome DevTools; includes accessibility audit | Free (built-in) |
Recommended Setup
Installaxe DevToolsfor automated testing andAccessibility Insightsfor guided manual testing. Together they cover most needs.
Screen Readers
Test with real screen readers to understand the user experience.
| Screen Reader | Platform | Cost | Notes |
|---|---|---|---|
| NVDA | Windows | Free | Most popular for testing; works best with Firefox |
| VoiceOver | macOS, iOS | Free (built-in) | Cmd+F5 to start on Mac; essential for iOS testing |
| JAWS | Windows | $$$ | Industry standard; 40-minute demo mode available |
| Narrator | Windows | Free (built-in) | Win+Ctrl+Enter to start; improving rapidly |
| TalkBack | Android | Free (built-in) | Essential for Android app testing |
Quick Screen Reader Test
- Turn on the screen reader
- Close your eyes or look away
- Navigate through the page using only keyboard
- Can you understand the content? Complete tasks?
Color & Contrast Tools
| Tool | Use Case |
|---|---|
| WebAIM Contrast Checker | Quick online check of two colors |
| Colour Contrast Analyser | Desktop app with eyedropper for screen sampling |
| Color Oracle | Simulates color blindness on your screen |
| Chrome DevTools | Rendering tab Emulate vision deficiencies |
Document Testing Tools
Automated Testing in CI/CD
Integrate accessibility testing into your development pipeline.
| Tool | Integration |
|---|---|
| axe-core | JavaScript library; works with any test framework |
| Pa11y | Command-line tool; CI-friendly; generates reports |
| Playwright | Built-in accessibility testing with axe integration |
| Lighthouse CI | Run Lighthouse audits in CI; track scores over time |
Example: axe-core with Jest
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);
test('page has no accessibility violations', async () =>{
const { container } = render(<MyComponent />);
const results = await axe(container);
expect(results).toHaveNoViolations();
});Example: Pa11y CLI
# Test a single URL
pa11y https://example.com
# Test with specific standard
pa11y --standard WCAG2AA https://example.com
# Output as JSON for CI
pa11y --reporter json https://example.comMobile Testing Tools
| Platform | Tool | Notes |
|---|---|---|
| iOS | Accessibility Inspector (Xcode) | Inspect accessibility properties of UI elements |
| iOS | VoiceOver | Settings Accessibility VoiceOver |
| Android | Accessibility Scanner | Google app that audits UI for issues |
| Android | TalkBack | Settings Accessibility TalkBack |
Recommended Testing Process
- Automated scan— Run axe DevTools or WAVE first
- Fix automated issues— Address all flagged problems
- Keyboard test— Tab through entire page without mouse
- Screen reader test— Navigate with NVDA or VoiceOver
- Zoom test— Zoom to 200% and check layout
- Color test— Check contrast; simulate color blindness
- Content review— Check alt text quality, link text, headings