Accessibility tools

Last updated: 23 augustus 2024

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 is also available for local installation on a server. Great for testing multiple pages in one batch.

Keyboard

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.

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.

Contrast

  • 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.

Chrome and color settings

Colors in Chrome can be different by a default setting in Chrome. Colors in Chrome adapt to your screen. So you can have different findings on your laptop screen and your second screen. Resolve this by:

  • Go to: chrome://flags
  • Search for: color
  • Set 'Force color profile' to: sRGB
  • There is this button to Relaunch the browser, use it.

This is a known feature issue since 2010: Issue 44872: Unmanaged CSS colors.

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.

Screen reader

  • 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.

Reading level

Succes criterion 3.1.5 level AAA can be partly tested automatically.

Magnify

These functions are often built in the operating system of your device. Look under Settings for Accessibility.

  • iOS Zoom
  • Android Zoom
  • Browser Zoom
  • ZoomText

Accessibility tree

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.

Text spacing

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.

Validate

Developers

Alternative ways

Resources

MND web docs (greatest resource)

W3C References

Handy

Tools I have to check myself first

PDF

Check accessibility

Tools to create accessible PDF's

  • Adobe Acrobat DC Pro
  • Prince 14
  • iText7 (I've worked successfully with iTextSharp)

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.

Some resources: