Best Chrome Extensions for Accessibility Testing
Patrick Bushe
July 20, 2024 · 5 min read
Automated checkers catch the obvious accessibility problems in seconds: missing alt text, low contrast, unlabeled form fields, broken heading order. They can't tell you whether a page actually makes sense to someone using a keyboard or a screen reader. Use an extension for the first pass and test the rest by hand.
The main testing extensions
- axe DevTools (Deque) adds an accessibility tab to Chrome's DevTools. The free version scans a page and lists issues by severity, with the code involved and how to fix it. It's known for few false alarms.
- WAVE (WebAIM) marks issues directly on the page with icons, which makes it easy to see where problems are and to explain them to designers and content editors.
- Accessibility Insights for Web (Microsoft) has a quick automated check, a tab-stop visualizer that shows keyboard order, and a guided manual assessment.
- ARC Toolkit (TPGi) adds a DevTools panel focused on headings, landmarks, links and ARIA.
They all use similar rules (based on WCAG), so one scanner plus manual testing beats running all four.
What Chrome already has built in
- Lighthouse (DevTools → Lighthouse) includes an accessibility score and a list of failed checks.
- Accessibility pane (DevTools → Elements → Accessibility) shows an element's name, role and the accessibility tree.
- Contrast: the color picker in DevTools shows a text color's contrast ratio. For quick checks of two colors, use the free contrast checker.
- Vision simulation: DevTools → More tools → Rendering → Emulate vision deficiencies previews the page with different kinds of color blindness and blurred vision.
What you have to test by hand
- Keyboard: unplug the mouse. Can you reach every link, button and form field with
Tab, see where you are, and use menus and dialogs with the keyboard? - Screen reader: try NVDA (free, Windows), VoiceOver (built into Mac and iPhone) or ChromeVox (ChromeOS). Listen to whether headings, links and buttons make sense out of context.
- Zoom: zoom to 200 percent and check nothing overlaps or gets cut off.
- Meaning: is alt text actually useful? Are error messages clear? Does anything rely on color alone?
A simple routine
- Run one automated scan and fix everything it flags.
- Tab through the page.
- Listen to the key flows with a screen reader.
- Re-scan after changes.
For contrast in depth, see color contrast analyzers that work in Chrome.