Accessibility: Browser extensions and Standalone tools

Introduction

In the previous article we looked at the reasons to ensure your website is accessible to the largest audience possible and if it's possible to (partially) automate the testing process.

In this post we'll review some of the tools available for the less tech savy persons (I'm looking at you managers!) which can provide a quick way to give some insights on how your site is doing.

Browser extensions

Browser extensions are… well… extensions for your browser that provide extra functionality :-). These extensions are very handy as they give you very quick results and are always within reach as they are in the same browser you use to visit the site you're gonna audit. We'll discuss the most used browser extensions.

Wave (Web Accessibility Evaluation Tool)

AVE is a tool from WebAIM, an non-profit organisation based at the Utah State University.

When activated through the right-click contextual menu it gives you direct feedback on the webpage your viewing, with options to view the offending source code and information on how to remedy the issue and some background information on why it matters that this error is flagged.

The onscreen indication of an accessibility violation.
The accompanying explanation and solution are provided in the WAVE sidebar.

Wave is a very handy tool and gives instant feedback making it very useful for a quick audit on a page.

Available for Firefox and Chrome, download it here.

SiteImprove

The Siteimprove Accessibility Checker uses the same approach as the aforementioned WAVE, minus the onscreen indicators which make WAVE so useful. Siteimprove is a complete platform which also provides SEO, Ad insights, Analytics, Performance metrics and more.
When your invested in there ecosystem the Siteimprove route can be a very rewarding one.

Available for Chrome, download it here.

Axe Accessibility Browser Extension

The Axe extension is part of a larger ecosystem maintained by Washington based Deque Systems inc.. Besides this excellent extension they maintain the equally excellent axe-core library (which we'll cover in a future article), but also provide training and an awesome reference where you can read up on all the rules axe detects.

Axe uses a slightly different approach then the previous extensions as axe lives in your browsers dev-tools (inspect element).

Clicking the Analyze button will run axe on the current page and present you with the results:
The results.

You can then click through the results to highlight them on the page, view the element in the inspector and get the Xpath of the element. There's a small suggestion to fix the issue and a link to the previously mentioned Deque university. The interface looks good and as a developer you'll feel right at home in the browser dev-tools!

As Axe is also available as NodeJS application we can use Axe in our development process too, which, in my humble opinion, is a huge plus.

Available for Firefox, Chrome and Edge Download it here.

Native browser tools

Just as Axe lives in your dev tools, these dev tools themselves offer accessibility checks too.

Firefox Accessibility Inspector

As this functionality lives in the dev-tools section of the browser suggests, this is mostly geared towards developers. You can generate a list of faux-pas, which you can click to highlight the element onscreen. You can follow the "learn more" link in the description to view an explanation on the Mozilla Developer Network website.

It also lists the properties of the element, including all attributes (styling), role, actions and more. Very handy for developers!

Another handy feature of the Firefox Accessibility Inspector is that you can easily select all elements in the accessibility tree for inspection, not just the erroneous ones.

Chrome Lighthouse

Lighthouse is not júst an accessibility checker, it offers an audit tool for performance, accessibility, best practices, SEO and more.
This does however, makes it slightly limited in it's functionality accessibility wise.

Chrome does however, offer another way to check the accessibility of elements. In the Elements part of the inspector you'll find the accessibility tab.

In this pane you can traverse the accessibility tree, and inspect some of the properties of the node, much like its Firefox counterpart. The functionality found in Lighthouse gives you a fast report, while the accessibility pane of the inspector appears to be most useful for developers.

Desktop tools

Besides all these browser plugins there are also some desktop applications available.

Koa11y

The Pa11y project is an opensource project providing various free and open source tools to help designers and developers make their web pages more accessible.
One of these tools is Koa11y, a desktop application available for all major platforms which is easy and intuitive to use. Simply download and install the application and enter a url to test. When the test is run, a report is generated in HTML format for easy sharing with coworkers or customers.

Available for Mac, Windows, Linux, download it here.

Colour Contrast Analyser

This application is not specifically meant to check websites, but can be used for all computer programs. It gives you the opportunity to select a background and a foreground color to see if the contrast ratio is compliant. There are various ways of selecting colors, you can sample them from your screen using a picker, use a direct input method in different formats (HEX, RGB, HSL, HSV).

Another handy function is that you can simulate colorblindness on your selection.

Colour Contrast Analyser can be a handy application in some specific situations, but it's a bit limited in its use as it only checks for contrast.

Available for Mac and Windows, download it here.

Conclusion

This is only a small sample of the tools available to automatically check the accessibility features of a website. As mentioned in the previous article is automated testing by no means a substitution for a thorough manual test, it's only a useful addition to your toolbox.


More in this series

Meer van Wouter Immerzeel

Meer artikelen

accessibility
digitoegankelijk
Tijdelijk besluit digitale toegankelijkheid
drupal

Why automated testing?

Wouter Immerzeel
3 minuten lezen
Lees het artikel Why automated testing?
liferay
dxp
freemarker
fragments
webcontent

Using Liferay Fragments as modular webcontent templates

Danielle Ardon
9 minuten lezen
Lees het artikel Using Liferay Fragments as modular webcontent templates
liferay
dxp
theme
inheritance

Liferay themes with a custom base theme

Geert van der Ploeg
6 minuten lezen
Lees het artikel Liferay themes with a custom base theme