Build accessibility into your CI process and make your website better for everyone
An accessible web is necessary for some and better for everyone. The customers you have today may be able to use your site despite bad contrast, invalid html and missing support for keyboard navigation but they may soon leave you for an easier experience elsewhere. Even if you don’t care about their user experience, you may care about breaking the law. Accessibility is becoming a regulatory requirement in both Europe and the USA.
Accessibility testing tools are of great help in making an accessible website. Automatic accessibility tests can be of even greater help, freeing up time to focus on the changes that will make your website better for everyone.
In this workshop you’ll learn how to set up and write your own automatic accessibility tests. While doing this we’ll also cover some of the most common accessibility errors that can be discovered automatically and learn how to fix them.
We will start by using a browser extension to test a website. This is not automated testing but it shows what kind of errors we can find with automated testing and how accessibility errors are reported.
Soon enough we will start coding. If you don’t want to write your own code you are welcome to follow along and listen. For the full experience you need three things:
1) A github account.
2) An IDE where you can write code. I will use Atom, a free tool you can download from https://atom.io/ Feel free to use the editor where you feel most comfortable writing code.
3) Node.js. Instructions here: https://nodejs.org/. Recommended version is 12.16.1 or higher
Next step is unit testing. We will be using axe-core. I will provide a project with code and tests and together we’ll look at how we can write our own tests and configure them to test what we want.
After unit testing comes integration testing. We will use axe-webdriver-js and selenium. Once again you will get a project, but this time there’s no code for you to test. Instead you’ll set up the tests to verify a web site of your choice.