aXe Live Tutorial

Hosted by Marcy Sutton
Senior Front-End Engineer, aXe Core Team

https://marcysutton.github.io/axe-tutorial

Goals for Today

Basics of accessibility debugging
Identify bugs with aXe Chrome
Set up a test with axe-core
Demo axe-webdriverjs
Install axe-cli
Ask questions
Have fun!

Basics of a11y debugging

Keyboard testing
Run the aXe Chrome extension
Open menus/dialogs, run it again
Check headings, landmark structure

aXe Chrome

aXe Chrome Extension — http://bit.ly/axe-chrome

aXe Firefox

aXe Firefox Extension — http://bit.ly/axe-firefox

Let’s Demo!

https://dequeuniversity.com/demo/mars/

aXe-core JavaScript API

aXe-core on Github — https://github.com/dequelabs/axe-core

Helpful links:

Things you’ll need:

A terminal
Node.js and npm
Git and a Github account
Something to test

Unit Test Demo

https://github.com/marcysutton/axe-jasmine-unit

aXe-WebdriverJS Utility

aXe-webdriverjs on Github — https://github.com/dequelabs/axe-webdriverjs

Installing Drivers

http://www.kenst.com/2015/03/installing-chromedriver-on-mac-osx/

Integration Test Demo

https://github.com/marcysutton/axe-webdriverjs-demo

aXe-CLI

aXe-cli on Github — https://github.com/dequelabs/axe-cli

Install and run axe-cli


  $ npm install axe-cli -g

  $ axe https://google.com

https://docs.npmjs.com/getting-started/fixing-npm-permissions

Questions?

Thanks for joining today! I’d love to hear what you learned :)