An overview of tools I use in my daily accessibility life.
Automatic accessibility check
Axe browser plug-in of Deque Systems.
Axe is also available for local installation on a server. Great for testing multiple pages in one batch.
HeadigMaps shows structure of headings of the current 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.
- 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.
- JAWS is mostly used, but you have to buy a version. There is a 40-minute version, but this version is not available for testing, demo or presentation purposes.
- NVDA only works on Windows. This open source screen reader is becoming more popular these days.
By starting screen reader software your keyboard or touch screen works differently. Check on forehand what these differences are.
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. For Internet Explorer you can install aViewer by Paciello Group.
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.
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.
Succes criterion 3.1.5 level AAA can be partly tested automatically in Dutch via Leesniveautool by the Accessibility Foundation. I have found one for the English language; there might be more. I have not used this one yet Readability formula test
- 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.
Web Content Accessibility Guidelines (WCAG) 2.0
How to Meet WCAG 2.0 Quick Reference
Website Accessibility Conformance Evaluation Methodology (WCAG-EM)
- Accessible Name and Description Computation 1.1
- WAI-ARIA practices
- WAI-ARIA practices examples
- WAI Tutorials
- ARIA in HTML
- HTML specs (living standard)
- HTML Accessibility API Mappings 1.0 (draft)
- Powermapper overview attributes (title, alt, etc.)
There are tools that you should not use. These are tools which you can use on an inaccessible site and it suppose to make the website accessible. Most of these tools make accessibility even worse!
Here are some articles to make the right decision.
- Honor the ADA: Avoid Web Accessibility Quick-Fix Overlays
- #accessiBe will get you sued
- Accessibility Overlays
Page updated: 20 August 2020