This is an old revision of the document!

Accessibility Testing

Testing for accessibility involves a combination of automated testing tools and manual testing procedures using your keyboard. You can add screen readers, switches, or other devices as necessary, but you can find the majority of problems without any extra equipment or software.

First, use a browser extension to catch basic problems with HTML structure, form labels, color contrast, and link and button names. Then try navigating the screen using your keyboard to tab between items. These two steps alone will uncover many issues. You can then go further by setting up a screen reader or using browser bookmarklets to highlight specific problems.

How To Do an Accessibility Review, Rob Dodson, web.dev
A beginner’s guide to manual accessibility testing, Whitney Lewis
Quick Start for Evaluating and Testing Web Accessibility, WebAIM - YouTube, 56 minutes
Accessibility review videos by Marcy Sutton ~20 minutes each

You can examine problems as they come up in the browser extensions, or start with a checklist to tackle things in a more logical order.

Testing with Browser Extensions

Browser extensions are great for testing the overall accessibility of a page and finding straightforward errors. However, these tools can’t test criteria that require subjective consideration, and they can sometimes give false positives.

Axe DevTools
- See the Intelligent Guided Tests features for tables, forms, and interactive controls
Lighthouse
- See how Lighthouse scores relate to WCAG 2.1
- You can export Lighthouse’s accessibility report to share with colleagues
WAVE
Firefox Accessibility Inspector

Testing Keyboard Navigation

Keyboard navigation is not enabled by default in some browsers.

[https://stackoverflow.com/a/11713537|How to enable keyboard tabbing in Firefox on Macs]
In Chrome, to go Settings > Accessibility. Turn on “Navigate pages with a text cursor” and “Show a quick highlight on the focused object.”
In Safari, go to Settings > Advanced and check “Press Tab to highlight each item on a webpage” ([https://twitter.com/springbroken/status/1552718321899954179|screenshot])

Place your cursor in the address bar and then press the tab key to move sequentially through focusable items. Use Shift-Tab to go back. Press Enter or Space to open dropdowns or activate buttons. Within dropdown menus and tab sets, you should be able to use the arrow keys to navigate the subsections. Use Escape to close dropdowns, popups, and modals.

Make a note of any controls that can’t be reached using the keyboard, or any areas where you lose track of which item has focus. Items should be highlighted in more or less the same order as a person would read them; if your focus jumps to other areas of the page out of the expected order, make a note of that as well.

References:

* [Keyboard Testing: The A11y Enhancement to Your Definition of Done](https://dev.to/steady5063/keyboard-testing-the-a11y-enhancement-to-your-definition-of-done-2n7c)

Testing with Screen Readers

Getting started with screen readers can be challenging because they lack visible controls. Find a cheat sheet of keyboard shortcuts for the software you’re using, and have it ready before you begin.

[https://www.sarasoueidan.com/blog/testing-environment-setup/|Setting up a screen reader testing environment on your computer, Sara Soueidan]

[https://accessibility.huit.harvard.edu/manual-testing-accessibility#sr|Getting started with screen reader testing, Harvard University Digital Accessibility team]

Guides to keyboard shortcuts in screen readers:

[https://dequeuniversity.com/screenreaders/survival-guide|Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts] Shows a combined chart of common shortcuts in all major screen readers
[https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts|JAWS Keyboard Shortcuts]
[https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts|NVDA Keyboard Shortcuts]
[https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts|VoiceOver Keyboard Shortcuts]

To speed up testing, you can turn on the screen reader’s feature to display a transcript of the page. This shows exactly what the screen reader will announce. For Macs, the [https://www.smashingmagazine.com/2021/06/automating-screen-reader-testing-macos-autovo/|Auto VO] tool automates VoiceOver tests. The transcript will update live as you move through interactive controls.

Testing Color Contrast

The various accessibility testing browser extensions will flag instances of insufficient color contrast. To test new color combinations, there are numerous tools. The most basic are: