Accessibility is an incredibly important aspect of any website. In order to provide the best experience for any user, it is crucial that websites are accessible to those with disabilities such as vision impaired, hearing impaired, and more. This article dives into the criteria that makes a site accessible, and how you can automate testing your site before sending it live to ensure you produce the most accessible site possible.

What is Accessibility?

Accessible websites focus on how a disabled person interacts with and benefits from a site, system, or application. According to Usability.gov, “Section 508 is the governing principle and it requires that all government information be accessible to disabled users.”

What Makes a Site Accessible?

ARIA

Aria how-to: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Accessibility Criteria

Color: Color contrast is an extremely important factor in determining accessibility. Do not rely on color as a navigational tool or as the sole way to differentiate items. Calls to action should not be marked simply by color, but also in the text as well. For instance, “Click Here” is not as accessible of a call to action as “Download White Paper Here.”

Functionality: Websites should be navigable through mouse and keyboard functions. They should also be tagged to work with voice control systems as well. That way, impaired users can still easily navigate the site and click on the items they need to without friction.

Transcripts for Audio: If you are hosting podcasts on your website, be sure to provide transcripts for the audio underneath. It’s also necessary to caption your videos, if you are embedding videos on the page. This guide walks through adding captions to YouTube videos, and this one for Vimeo videos.

Alt Text: Images should always include alt text in the markup or code of the website. Complex images should have an extensive description near the image, as a caption or in a neighboring paragraph. This way, visually impaired users can still read the description of the image.

Friendly Navigation: Sites should have a skip navigation feature to make it easier for users to be able to navigate the site.

These are just a few aspects of accessibility criteria. To ensure compliance, we suggest hiring an agency or professional with experience in accessibility testing to get you started.

Why Automate Accessibility Testing?

1. Can test before going live in a local/stage environment, ensures live site is accessible. Testing is extremely important to ensuring the site that’s sent to production is absolutely pristine, both in look and functionality.

2. Easier fixes that do not affect the live site. Fixing things in stage is not only easier and faster, but reduces the chance of making changes twice by fixing something in a stage environment and again in production.

3. Whatever you automate can be put into a workflow. Including accessibility testing in your workflow will help ensure that your site remains accessible.

How to Automate Accessibility Testing: Step by Step

Our test script will be written using node.js, a non-browser based and command-line version of Javascript. Throughout the article we will be referencing this GitHub repo: https://github.com/weienwong/accessibility-page.

Our test script will be doing the following:

• Serving our HTML, CSS, and JS

• Running a headless version of Google Chrome called Puppeteer to request and parse our website, and test for accessibility using Axe.

Tools / libraries to use:

• Axe/Puppeteer, by Dequelabs https://github.com/dequelabs/axe-puppeteer

• Puppeteer https://github.com/GoogleChrome/puppeteer

• If you wish to test your website locally for development purposes, use the native http package from node.js to serve your HTML and assets

• If you wish to test against a Zesty.io site, you will not need to host it locally

Step 1: Install axe and puppeteer using the Node Package Manager (npm):

npm install axe-puppeteer puppeteer

Step 2: Write your test script. Here’s an example: https://github.com/weienwong/accessibility-page/blob/master/testServer.js

This is serving your index.html.

Embed:

<script src="https://gist.github.com/weienwong/0705d32bf4d62a75b07d0b6dfcac3e9b.js"></script>

Run axe tests using Puppeteer / Headless Chrome

Embed:

<script src="https://gist.github.com/weienwong/5cbe821fedb7f4d6790517c9af6d5b7c.js"></script>

In your test code, you will need to provide the URL for the page you wish to test.

You can also pass in various parameters to narrow down what you wish to test for. This is specified in the API docs here: https://github.com/dequelabs/axe-core/blob/master/doc/API.md

Step 3: Bind the test script to an npm command.

In your package.json (https://github.com/weienwong/accessibility-page/blob/master/package.json)

"scripts": {
"test": "npm install && node testServer.js",
"start": "node server.js",
"stop": ""
}

Here we bind the npm test command to run the above test server code. From here we could attach our commands to other things, such as git pre-commit hook which is not shown in the repo.

And that’s it! Happy testing and if you have questions or need assistance, feel free to join our developer Slack community at https://chat.zesty.io.