Automated Accessibility Testing

Accessibility is extremely important to making the internet available for all. Automate your accessibility testing with this simple tool.

Automated Accessibility Testing

Wei-En Wong 07.24.2019

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:

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.

PS… Are you in San Diego? Come check out the group for San Diego Accessibility & Inclusive Design!

Experience a Headless Content Management System, Join Zesty.io.


Start a Sandbox Now

More from Mindshare: Content Marketing

Placeholder image

Omni Channel Marketing Made Easy

The right strategy + the right technology = skyrocketing content!

Read Article
Placeholder image

How to Choose the Best CMS Platforms for Marketing

We’ve created a checklist to pinpoint how to choose the best CMS platforms that can take digital experiences next level.

Read Article
Placeholder image

What is a Microsite? | Top 19 Microsite Examples of 2018

Microsites make excellent choices for promoting a standalone marketing campaign. Snag some Microsite inspiration here!

Read Article
Placeholder image

How to Fix Social Media Article Shares

Whether you're trying to share an article on Facebook, Twitter, or another network, sometimes the image doesn't render correctly. What

Read Article
Wei-En Wong photo

Wei-En Wong

Software Engineer, Zesty.io

I'm a software engineer who likes to tinker. Backend engineer at Zesty.io. Graduated from University of Waterloo with a degree in Computer Science in 2016.... Learn More

Speak with an Expert


Chat with Us

To speak with someone in sales and marketing, use the chat popup on this page. To speak with a developer, join https://chat.zesty.io

Exploring content solutions? Looking to replatform?