Sanna Kramsi - Blog A peek into my life

Accessibility testing tools

June 19, 2021 | Accessibility

There are a lot of tools and techniques to test for accessibility. Fortunately, there are a lot of free tools you can use, you don't automatically have to worry about spending a lot of money on testing tools. In this post, I only list tools that are free or at least have a free version. I recommend testing some tools to find your own preferred tools. In this post, I list some of the tools I've used while auditing websites.

Color scheme and motion reduction

Chrome browser has some built-in tools for testing for vision deficiencies and there are also options for emulating the CSS media features 'prefers-color-scheme' and 'prefers-reduced-motion'.

How you can tweak these settings on your machine

Unfortunately, I don't have the knowledge of where these settings might exist on Linux systems but hopefully, search engines can help you out with that. But below is where you can alter these settings on a Windows or a Mac.

The settings on a Windows 10 machine

The color scheme setting: Settings > Personalization > Colors > Choose your color. If you have chosen custom, then the setting the prefers-color-scheme listens to is Choose your default app mode.

The motion reduction setting: Settings > Ease of Access > Display > Show animations in Windows.

The settings on a Mac machine

The color scheme setting: System preferences > General > Appearance > Light/Dark.

The motion reduction setting: System preferences > Accessibility > Display > Reduce motion. Under these settings, you can also find the option to invert colors or increase contrast.

Screen readers

There are many different screen readers. And like other programs, these are very different for the user, and they also don't support the same things. But the basics should exist in all of these programs.

- Windows 10 has a built-in screen reader called Narrator. A popular screen reader on Windows machines is NVDA. Both of these screen readers are free.
- For Macs, there is Apple VoiceOver, which you can also use on iPads and iPhones.
- For Android there is TalkBack.

I have the most experience with VoiceOver. It seems like really good software and it's quite easy to use. I have also tried both TalkBack and Narrator briefly. But for accessibility audits, I've been using VoiceOver because I use a Mac at work.

Bookmarklets and plugins

There seem to be quite a lot of various bookmarklets for accessibility testing.

One of my default tools is HTML_CodeSniffer. It lists errors and warnings of a page with code snippets.

There is also a text spacing bookmarklet to help you test for criteria 1.4.12.

Many people also like to use WAVE, which exists both as a website and as plugins

NoCoffee visual simulation extension for Chrome allows you to test for various vision deficiencies.

Deque's axe devtools has a free plan as well as more extensive paid plans. I've only used the free version, but I've seen a demo of the paid version. The free tool is very nice to have. But the paid version, of course, has more nice features. You get descriptive information about the problems on the page, and you also get the names of the related WCAG criteria.

Other tools

For code validation, I generally use The W3C Markup Validation Service. The tool is not perfect and might require some interpretation of the errors. However, as a developer, I find this tool quite useful in every project.