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
Beginners guide to VoiceOver on MacOS Keyboard shortcuts, audio settings, and links to resources.
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.
-
Email testing
Seven accessibility bookmarklets to test the HTML version of an email.
- Show image alt text
- Outline headings and levels
- Outline table usage
- Highlight keyboard tab stops
- Outline larger text
-
Show image alt text
All images show their accessible name, usually the alt text. When present, images are outlined in green, but when missing they're outlined in red. You will still need to consider the appropriateness of the alt text in the context of the page.
Helps to check
1.1.1 – Non-text content -
Outline tables
Mostly for testing HTML versions of email content. Outlines all tables present. When the role is valid for layout purposes the outline is green, otherwise it's outlined in red and then it must be a data, or comparision, table.
Helps to check
1.3.1 – Info and Relationships -
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.Helps to 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.
Helps to 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.
Helps to 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.
Helps to check
2.4.1 – Bypass Blocks and1.3.1 – Info and Relationships . -
Edit webpage copy:
Allow a web pages' text to be editable. Good for rephrasing content in situ. More for editors and design than accessibility checking.
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.
-
Headings map:
Generates a document-map or index of any web document structured with headings.
Helps check:
2.4.1 – Bypass Blocks ,1.3.1 – Info and Relationships , and2.4.6 – Headings and Labels .
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 |
||