A11ying with Sanna - I would if I could a guide to web accessibility

Tools to help monitor accessibility

There are several types of tools available that can help you. But it's good to keep in mind that no automated tool can find all accessibility issues. There are still a lot of things that require manual testing. Nonetheless, automated tools can save time.

Self-hosted tools

If you can host a tool, there are several free options.

Pa11y Dashboard

If you are a developer, you might have heard about Pa11y before. Pa11y dashboard is a web interface to the Pa11y accessibility reporter.

Pa11y Dashboard is available on GitHub.

Salvia

Salvia is the tool the Regional State Administrative Agency uses to do their accessibility monitoring. They have released the source code of Salvia on GitHub.

Getting Salvia to work will require some developer knowledge.

Learn more about Salvia from the Regional State Administrative Agency's website article.

The user interface of the tool is nice to use. The results the tool gives aren't the best if you are new to accessibility. But still, the tool is available to us for free, so can't complain! The Regional State Administrative Agency has information about the licensing of the tool on its website. Make sure to check that before you use the tool.

There are a lot of paid tools available. Some are better than others. These are the three that I know about the most.

All the tools provide results together with information about the problem as well as how it can be fixed. So from that perspective, they have the same features. The main differences come with the user interfaces as well as how the information is formatted.

I've done quite a lot of research lately into the tools that are available because I'm trying to get a good toolkit collected for my clients. These are the tools I know about the most.

Deque has a lot of Axe tools

If you've read about accessibility in English, you will likely have encountered Deque. Deque also organises the axe-con events.

Deque has tools to monitor accessibility for both developers and content editors alike. Pricing of the tools is unknown because they don't release that information. My guess is they aren't cheap, but I do know that their tools are very good.

I would imagine their Axe Monitor is a great tool for accessibility monitoring. But because I work at an agency, I haven't seen the software in action. And why does it matter that I work at an agency, you might ask? Because agencies are competing in the same space as they are. So they sell the Monitor product directly to owners of services and not to agencies.

Webwarden

They are a very new player in the market. Their tool is just coming out of a pilot phase and the tool looks very promising. There are a lot of great features from accessibility to HTML and other quality monitoring. Their pricing is also more affordable, which is a nice plus for people/companies with a smaller budget.

Based on what I've seen, this tool might change the game. 

Learn more about Webwarden on their site in Finnish.

Eficode Accessibility Keeper

You might have also heard about Eficode. They do a lot of things on many fronts, including accessibility. They have released their accessibility monitoring tool.

The user interface is clean and understandable. Though it does provide much fewer features than some other tools. The user interface is still very well designed from a cognitive accessibility perspective.

I'm not sure about the pricing of the tool, but the tool is excellent. I was lucky enough to get a demo access to the tool and I was really impressed.

Eficode Accessibility Keeper focuses on accessibility, so it has fewer features than some other tools. If you are looking for a tool to specifically monitor accessibility, Accessibility Keeper is a quality option.

Learn more about Accessibility Keeper on their website.

QAutoEqual

A tool that I most recently learned about is QAutoEqual. The tool is developed by QAutomate.

The tool uses QualWeb as its engine, like Salvia which was mentioned earlier.

I'm going to get to test the tool so I'll know more of its functionalities later on. But based on a demo I've seen, the tool has good features.

What interests me probably the most about this tool is that it can be used to scan local environments. The tool I've seen comes with both a command line interface as well as a sort of hybrid browser plugin. Not all tools support scanning a local environment so that is a plus for QAutoEQual.

Learn more about QAutoEQual on their website.

Siteimprove

Siteimprove is another well-known player in the market. Their tool offers other qualities on top of accessibility monitoring such as SEO and quality assurance. Far from cheap, but it does have good quality results and a lot of different features.

What separates Siteimprove most from other players in the market is that it also provides analytics. If you want one tool to provide all the things, Siteimprove might be the one for you.

Siteimprove also has CMS plugins for at least WordPress and Drupal and many other integrations. At the moment the Drupal module doesn't offer Drupal 11 support, so if you are already running the newest Drupal, you'll have to wait for support. They've had more time to build a wide range of supporting tools that can help a lot with the monitoring.

Tools to check single pages

If neither of the self-hosted or paid services are an option for you, don't worry. There are a lot of free tools available as well that don't require coding expertise.

Deque Axe DevTools (free version)

Axe DevTools has a free version available. While the tool is not nearly as comprehensive without paying for it, the tool is still my favourite.

The user interface is nice and the descriptions of all issues are very clear.

Unfortunately, at the moment I can't afford to get the paid version of the tool, but I've seen a demo of it and it is incredible.

The Axe DevTools browser extension is available on Chrome, Firefox and Edge.

Siteimprove

Siteimprove also has an Accessibility Checker extension that is available for Chrome, Opera, Edge and Firefox. I've used this plugin and I like it quite a bit.

Siteimprove also has a Browser extension that allows you to check your DCI score. This one is available for Chrome and Firefox.

Learn more about Sitemprove's browser plugins on their website.

Lighthouse

Available by default in Chrome. You can access it from the developer tools in the browser.

You can use the tool to check the mobile or desktop version of the page. There are multiple categories you can check results for:

  • performance,
  • accessibility,
  • best practices,
  • SEO and Progressive Web App.

Wave

I hear a lot of people use this tool. I prefer other tools, but there is nothing wrong with Wave. Wave comes as a browser extension or a website. So if you don't want to install any plugins, check out Wave. The site also provides links to install the browser extensions to Chrome, Firefox and Edge.

HTML_CodeSniffer

Browser bookmarklet that scans the page for errors, warnings and notices.  This was one of the first tools I learned to use actively.

Free options for monitoring specific things

There are lots and lots of tools for accessibility monitoring. Not all of them will be good. So don't automatically trust any tool you see.

Here are some of the tools I use more consistently.

Monitor the use of headings with headingsMap

The tool will show you very quickly the structure of the page by showing all the headings and their levels.

Get the headingsMap extension from the Firefox Add-ons store.

Landmarks plugin allows you to check if all your content is inside a landmark

Landmarks are regions that assistive technology users can use to navigate the page.

The extension will also show you the names of each landmark, so it's easier for you to check that landmarks have unique names when there are several instances of a certain type of landmark.

A good example of a landmark that might not be unique on a page is a navigation element (<nav>). If there are multiple navigation elements without names, the user will not know which is which.

Get the Landmarks extension from the Firefox Add-ons store.