Accessibility Testing

2021-04-30

Automated Accessibility Testing allows you to test if your website is accessible to all types of users.

The popular accessibility testing framework Axe allows for testing your website for all kinds of accessibility issues. The framework includes checking if your website adheres to the Web Content Accessibility Guidelines (WCAG), as well as section 508 guidelines.

Why should I consider accessibility Testing?

Testing for accessibility issues allows you to make sure that your website is working well for all types of users. Some of your visitors might have issues with color contrasts, or use a screen-reader to digest your website.

If some of your DOM elements lack sufficient color contrast, these users might have a hard time reading your website.
People using screen readers might have trouble reading parts of your website, as some DOM elements might have similar titles, alt tags or aria-labels.
Alternative texts on your webpage, repeating the same content over and over, might confuse your visitors with screen readers.

By integrating accessibility testing in your test process, you'll ensure that your customers can use your product in the best way possible.

The principles of Accessibility Testing

The WCAG stipulates four main principles, stating that content on webpages should be POUR: Perceivable, Operable, Understandable and Robust.

Perceivable

The contents on your webpage must be presented to your users in a way that they can perceive, it must be visible to their senses.

This means you should provide text alternatives, adaptable content (content that can be presented in different ways) and make content distinguishable (foreground/background colors, audio, ...).

Operable

The UI of your webpage should not require interaction that a user cannot perform. Make sure your elements can be used with keyboard only, make your webpages navigable and provide enough time to your users to digest your content.

Understandable

Make the content on your webpages easy to understand. Ensure your UI operates in a predictable way.

Robust

Maximize compatibility of your webpage with current and future browsers, screen readers and other user agents, including assistive technologies.

Start using Accessibility Testing

The Axe framework comes as a javascript file, which can be injected in the page that you are testing. Axe will then report the results back to your test case, allowing you to verify if any issues are present on your page.

See a simple example below:

const webdriver = require('selenium-webdriver');
const fs = require('fs')

const testingbotKey = "[your-testingbot-key]";
const testingbotSecret = "[your-testingbot-secret]";

const capabilities = {
    'browserName': 'firefox',
    'platform': 'WIN10',
    'version': 'latest',
    'client_key': testingbotKey,
    'client_secret': testingbotSecret,
    'name': 'Accessibility Test'
};

async function runAccessibilityTest () {
  let driver = new webdriver.Builder()
    .usingServer('https://' + testingbotKey + ':' + testingbotSecret + '@hub.testingbot.com/wd/hub')
    .withCapabilities(capabilities)
    .build();
  await driver.get("https://testingbot.com");
  const data = await fs.readFileSync('path/to/axe.min.js', 'utf8')
  await driver.executeScript(data.toString());
  let result = await driver.executeScript('let result; await axe.run().then((r)=> {result=r}); return result;');
  await fs.writeFileSync('path/to/report.json', JSON.stringify(result));
  await driver.quit();
}
runAccessibilityTest();

This NodeJS example will inject the path/to/axe.min.js file in the current webpage and report the results back to path/to/report.json for verification.

The results will contain the following structure: