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.

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

The user interface of the tool is really 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 really complain! The Regional State Administrative Agency has information about the licensing of the tool on their 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.

Deque has a lot of Axe tools

If you've read about accessibility in English, you will likely have encountered Deque. Or if you have taken part in the axe-cons.

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.

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.

If you are interested in Deque's tooling, contact them so you can see a demo! All the people I've talked with at Deque have been super friendly. If you are looking for the best tool available no matter what the cost, I have a feeling Deque might be the one to currently have it.

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.

Eficode Accessibility Keeper focuses on accessibility. So if you aren't looking for a tool that monitors every single thing, this might be the tool for you.

The user interface is clean and understandable. You get information and instructions for each finding so that you can get the issues fixed.

The tool is available in Finnish and English.

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. I'm hoping I get to use the tool at my work.

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.

The user interface is not as clear as it is in Eficode's tool. But I can understand that because there are a lot more features available.

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 really nice and the descriptions of all issues are very clear.

Unfortunately at the moment I can't really 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.

Lighthouse

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

You can use the tool to check 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. Personally I prefer other tools, but 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 extension 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 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.