Accessibility tools

Last updated: 27 juli 2022

An overview of tools I use in my daily accessibility life. Some extra attention tools that make your website accessible or compliant. 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.

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

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

Magnify

  • iOS Zoom
  • Android Zoom
  • Browser Zoom
  • ZoomText

Alternative ways

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.

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.

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.

Reading level

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

Validate

Developers

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 the following tools:

A new phenomenon are extra functionality by tools like Readspeaker and BrowseAloud. Those tools could help people by reading out the text of a web page. But nowadays those tools also add extras that make your website less accessible. My advice: If you want those tools on our 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 these tools are evil not that good.

The following websites are fake! Some of the lies on this website give a 404 error now. Be aware that te information on these websites are not independed obtained. No links, only web adresses: topwebaccessibilitychecker.com and bestwebsiteaccessibility.com

Some resources: