Accessibility can seem a bit of a tricky subject. For example there are a whole bunch of compliance levels like ADA, WCAG (A, AA, AAA), Section 508, AODA & CVAA – all different laws and guidelines around accessibility. WCAG is probably the best known of these, government services here in the UK for example are required to reach WCAG 2.1 AA compliance.

Organisations should care about this because the more inclusive and accessible web content is, the more benefits that brings not only to individual users but also SEO rankings, reductions of legal risk and all round better user experience.

Anyway, there are some tools out there to help test such things such as Axe from Deque Systems. A useful browser plugin that can analyse sites via browser dev tools. It is worth mentioning however that automated accessibility testing (not just Axe) currently can only detect around 25% of the issues an impaired user can face (source: Elizabeth Simister & Heidi Jungel), so it’s no silver bullet. Using it as part of a wider suite of tools would be a much more robust way of reaching a desired compliance level (if that is your goal).

Because Axe is an API as well we can automate too. So lets look at some options.

Swinging the Axe

The plugin

You can obtain the Axe plugin from Chrome web store.

Open dev tools to see the Axe tab and start analysing! The output looks something like below, listing violations along with what can be done to address them:

Selenium.Axe Nuget Package

If you are a user of Selenium there is a nuget package for .net where you can perform violation checks against a page. Check out the library here.

It’s useful to run a Selenium UI test and pass/ fail an assertion after a particular page has been analysed. Some example usage from the documentation:

using Selenium.Axe;

IWebDriver webDriver = new ChromeDriver();
AxeResult axeResult = new AxeBuilder(webDriver).Analyze();

// We recommend FluentAssertions to get great error messages out of the box
axeResult.Violations.Should().BeEmpty();

AxeResult axeResult = new AxeBuilder(webDriver)
    .Exclude(".css-class-of-element-with-known-failures")
    .WithTags("wcag2a")
    .Analyze();

Sitespeed Axe Plugin

If you use sitespeed to perform front end performance tests, you can enable the –axe.enable flag on your command line to log violations as part of your report and even send the data to be graphed over time in Graphite or Influx. Very useful for catching regressions. The report will detail the violations and how to fix them as the plugin does.

As both the Selenium.Axe nuget package and Sitespeed option run axe-core; you can see the full list of violations they run against here.

On the whole it’s a great tool and I’m sure there are many other ways to utilise axe-core; which makes accessibility more accessible within the development process.

Written By

Justin Holsgrove

Comments :

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.