Accessibility Testing Tools

Testing websites and applications for accessibility is a lot of work. Good thing there are some automated testing tools that help you find about 30% of the bugs right away. Some of these are color contrast errors, missing alt tags or missing descriptive link text.

I want to provide you with a list of some great tools that I use for automated testing on a regular basis when I am testing a website or application for accessibility.

In the coming weeks, I will give you a detailed description of each tool I list here and how I use them as well as alternatives that can also be used.

List of Tools

axe DevTools

The extension scans the web page you are currently on and shows you all the problems it could find, divided into critical, serious, moderate and minor ones.

It is said that especially the first two groups of problems MUST be solved. To easily find the problem on the website, you can mark the problem and get tips and recommendations on how to solve it.

taba11y

When you enable taba11y on your webpage, it shows you the current tab order, which helps you verify that the order of focusable elements is correct and comprehensible. This ensures that people going through the web page with the keyboard have a comprehensible reading order.

Landmarks

When you enable the landmarks extension, it shows which landmarks are used on the particular web page. The landmarks can be highlighted to make them visible.

Web Developer

The great benefit of these extensions is that you can watch the web page in plain HTML by setting the CSS stylesheet inactive (and many other things related to CSS), show alt text and link details , enable or disable form inputs and much more. It really has a lot to offer.

WebAIM Contrast Checker & WebAIM Link Contrast Checker

To check if the color contrast between background and text color and between link text and text body is high enough, WebAIM's Color Contrast Checker is very good.

You can also darken or lighten the colors to see how you should change them to make them (still) accessible.

VoiceOver on MacOS

VoiceOver is a screen reader that is automatically installed on the MacBook. You can enable it in the Accessibility preferences to experience the web as people who depend on it do. This lets you test whether screen reader users can have the same experience as mouse users.

Tab key

Last but not least, I go through a web page using only the tab key. This shows whether focusable elements show the outline, are in the correct order, and keyboard users are able to view the web page using only the keyboard.

Thanks for your reading and time. I really appreciate it!