Testing tools
Automated browser tools and a few bookmarklets to help with manual testing.
Training
Those nice people over at Web Dev have released an excellent
They also have an excellent article on
Bookmarklets
Add bookmarklet to the browsers bookmarks. Once added, navigate to the page for testing then click the bookmark, or just click to test on this page.
-
Highlight all keyboard tab stops
All tab-stops are outlined green then change to blue upon focus. With the Tab key, check for anything missed or inappropriate. Note: An
iframeoutline won't change colour upon focus.This is to help check
2.1.1 – Keyboard and2.4.3 – Focus Order . -
Test text spacing:
The user must be allowed to adjust text spacing: margins, line-heights, letter-spacing, and word spacing in order to meet
1.4.12 – Text Spacing . This bookmarklet increases those setting to the maximum requirement. Run on a page, and check it did not break the site / app layout, that content can be read and interacted with. -
Outline all landmarks:
All landmarks are outlined and marked. Check for anything missed or inappropriate.
This is to help check
2.4.1 – Bypass Blocks and1.3.1 – Info and Relationships . -
Outline all headings:
All headings are outlined and marked. Check for anything missed or inappropriate.
This is to help check
2.4.1 – Bypass Blocks ,1.3.1 – Info and Relationships , and2.4.6 – Headings and Labels . -
Outline all lists:
All lists are outlined and marked. Check for anything missed or inappropriate.
This is to help check
2.4.1 – Bypass Blocks and1.3.1 – Info and Relationships .
Automated accessibility testers
-
Deque
Browser extension.
-
WebAim
Browser extension.
-
Lighthouse
Chrome extension.
-
Ark Toolkit
Chrome extension.
-
A11y.css
Browser extension.
-
Tota11y
Browser extension.
-
Aria-devtools
Browser extension.
-
IBM Accessibility
Project tools for accessibility, including browser extensions.
Color contrast tools
-
WebAim
Online tool.
-
Colors
Online tool.
Screen-readers
-
Freedom Scientific
Windows software.
-
NV Access
Windows software.
-
Narrator
Pre-installed on Windows
-
Voiceover
Pre-installed on MacOS.
| Screen-reader & browser | Respondents | Respondents (%) |
|---|---|---|
| JAWS with Chrome | 500 | 32.5% |
| NVDA with Chrome | 246 | 16.0% |
| JAWS with Edge | 194 | 12.6% |
| NVDA with Firefox | 149 | 9.7% |
| JAWS with Firefox | 74 | 4.8% |
| VoiceOver with Safari | 72 | 4.7% |
| Excerpt from WebAims |
||