Last updated: 3 november 2022
An overview of tools I use in my daily accessibility life. I have paid also some attention to to tools you should NOT use on your website. Read more about these tools that are called Accessible Overlays at the end of this page. But first the tools that make the web better.
Automatic accessibility check
- Axe browser plug-in of Deque Systems.
- WAVE Web Accessibility Evaluation Tool by WEBaim
Axe is also available for local installation on a server. Great for testing multiple pages in one batch.
Tools for visualizing the focus order.
Most keyboard functionality should be checked manually.
- Is there a skiplink?
- Can you always see where you are?
- Can you reach every interactive element?
- Do you never got stuck in the interface?
- Is there a logical focus order?
Use Tab and Shift+Tab to navigate through links, buttons, input fields and other focusable elements.
Use Space or Enter to activate buttons or Enter to follow a link.
Use arrow keys to navigate through a group of radio buttons, a select box or a calendar. In some websites arrow keys are used for navigation through menu's, tabs and accordions. Arrow keys can be also used to scroll through pages.
Use Esc to close opened select boxes and in most cases popup windows and opened menu's.
Use of headings
HeadingMaps shows structure of headings of the current page.
- HeadingsMap for Firefox
- HeadingsMap for Chrome
- Polypane has a built in function to show the outline
The Markup Validation Service of W3C has an option 'Show Outline' to show the structure after validating the page. Remember that what you see is based on the unrendered page.
- Colour Contrast Analyzer is an application that you have to install on your computer. Colour Contrast Analyzer of The Paciello Group is available for Mac and Windows.
- Contrast ratio (online tool)
- Polypane has a built in contrast checker.
Use of color
- Color Blindness Simulator Online tool wher you can upload your photo or screenshot.
- Polypane has a built in function to show the current page in different types of color blindness.
- For mobile there are several apps to emulate color blindness on real objects and text.
- NVDA (NonVisual Desktop Access) only works on Windows. This open source screen reader is one of the most used screen reader these days.
- JAWS (Job Access With Speech) is a common used screen reader with a retail price of $ 1285 (around € 1300). There is a 40-minute version, but this version is (was?) not available for testing, demo or presentation purposes.
- VoiceOver is available on your Mac, iPad and iPhone.
- Talkback is available on Android devices.
- Narrator (Dutch:Verteller) is available on Windows, but yet not fully operable. I personally don't use this one for audit purposes.
By starting screen reader software your keyboard or touch screen works differently. Check on forehand what these differences are and how to stop the screenreader.
Succes criterion 3.1.5 level AAA can be partly tested automatically.
- Dutch language: Leesniveautool by the Accessibility Foundation.
- Dutch language: Is het B1?
- English language: Readability formula test (I have no experience with this tool)
These functions are often built in the operating system of your device. Look under Settings for Accessibility.
- iOS Zoom
- Android Zoom
- Browser Zoom
This is the tree where you can find out if an component is really that what it suppose to be. Also you can read out the name of the component and the state. The Accessibility tree is available in every modern browser by inspecting the element, often available via the shortcut Ctrl+Shift+i.
Success criterion 1.4.12 can be tested with the Text Spacing bookmarklet of Steve FaulknerGroup.
If the script does not work, you can add this in the CSS-code.
If that doesn't work there is a browser plugin Stylus for Chrome or Stylus for Firefox that could work.
Web developers toolbar
This is a browser plugin (Chrome, Firefox) with lots of handy tools like disable CSS, view alt-texts of images, resize Window and shortcuts for W3C validators.
- Dragon NaturallySpeaking (speech recognition)
- On-screen keyboard
- Eye tracking
MND web docs (greatest resource)
Web Content Accessibility Guidelines (WCAG) Overview
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
How to Meet WCAG 2.1 Quick Reference
- Accessible Name and Description Computation 1.1
- WAI-ARIA practices
- WAI-ARIA practices examples
- Accessibility Developr Guide
- A11Y Project
- WAI Tutorials
- ARIA in HTML
- HTML specs (living standard)
- HTML Accessibility API Mappings 1.0 (draft)
- Powermapper overview attributes (title, alt, etc.)
Tools I have to check myself first
- Adobe Acrobat DC Pro
- PDF Accessibility Checker (PAC 3)
- Tingtun Checker
- New PDF-checker: Coming soon
Tools to create accessible PDF's
Avoid Accessible Overlays
I frequently get the question if tool X makes your website accessible. Unfortunately there is no tools to make your website fully compliant. Even worse, most of those tools make your website less accessible! For Blind Internet Users, the Fix Can Be Worse Than the Flaws.
In audits your website automatically don't comply to WCAG when you use one of those tools. In The Netherlands some of these tools are already in use, so beware of: AccessiBe, A11y.app, Pojo and Userways.
Read more in Dutch on my website: Accessibility Overlays.
ReadSpeaker and BrowseAloud
A new phenomenon are extra functionality by tools like Readspeaker and BrowseAloud. Those tools could help people by reading out the text on a web page. But nowadays those tools also add extras that make your website less accessible. My advice: If you want those tools on your website just use the minimum those tools have to offer. Just use the play and stop button. All other functions are just noise for people.
More indepth info on overlayfactsheet.com where you can add your name if you know that accessibility overlay tools are
evil not that good.