Automated Tools for Testing Accessibility

by Arthur RIGAUD

I am Front-end developper

I discovered web accessibility 19 years ago

Disclaimer

I am begining with automatic testing in NPM

You'll see results of demo
but no demo (My VPN is blocked)

Survey

Do you know NPM ?

Do you use automatic tools for accessibility audits?

The tools

  • Pa11y (HTML Code Sniffer)
  • Axe Core (Deque)
  • Lighthouse (Google - Accessibility powered by Axe)
  • BBC a11y

Why this tools (1/2)?

  • They are free to use
  • Available via GIT and NPM
  • They are open source
  • You can contribute

Why this tools (2/2)?

  • Dynamic communities
  • Recent commits in Github
  • Recent publish in NPM
  • If the tool rely on WCAG 2.1 it's better!

NPM

  • Stands for Node Package Manager
  • Default package manager for the JavaScript runtime environment Node.js

Pa11y

Uses HTML Code Sniffer Engine

pa11y npm page

	npm install pa11y --save-dev
						

To use it you can add in "scripts"
in your package.json file

	"scripts": {
		"pa11y": "pa11y"
	}
						

Some examples with pa11y


	pa11y <url>
	pa11y --include-warnings <url>
	pa11y --include-warnings <url> -R <elements you want to test>
	pa11y --include-warnings <url> -E <elements you exclude>
	pa11y --include-warnings <url> -E <elements you exclude>
	

Lighthouse

Project by Google
included in Chrome

Uses Axe for accessibility

Documentation about Lighthouse on npm

npm install -g lighthouse
					

If installed globally you can use it directly in command line

lighthouse https://deque.com
					

Lighthouse

Can also be runned on multiple urls

Lighthouse from the command line on multiple urls

BBC a11y

Project by BBC in the UK to test
their own accessibility standards

Documentation on Github

npm install bbc-a11y --save-dev
					

To use it you can add in "scripts" in your package.json file

"scripts": {
	"a11y": "bbc-a11y"
}
					

BBC a11y

Let's test it!

npm run a11y https://bbc.co.uk						
npm run a11y https://pa11y.org
				

Fun facts with BBC a11y

  1. BBC Homepage have 98 errors with their tools!
  2. Pa11y website have 34 errors with bbc a11y

Some thoughts about automatic testing

Some other thoughts about automatic testing

Thanks

  • Twitter : @arigaud_ca
  • LinkedIn : https://ca.linkedin.com/in/arthurrigaud