Accessibility Testing with aXe!

Test automation

Accessibility

People with Disabilities

• Visual: Blind, low-vision, color blind
• Hearing: Deaf, hard-of-hearing
• Motor: spinal cord injury, MS, Cerebral palsy, ALS
• Cognitive: Autism, learning, TBI, memory, attention

Accessibility & Automated Testing sitting in a tree...

• Test low-hanging fruit
• Document accessibility intent
• Prevent regressions
• Get help from experts

The A11Y Testing Situation

We can automate testing in browsers, but not assistive technologies (yet).

Best practices and development tools help here.

Test low-hanging fruit

Easy wins

Use tools to help you find:

• Lacking keyboard support
• Missing labels
• Invalid ARIA attributes
• Color contrast
• …and more!

axe-core on npm

What is axe-core?

• JavaScript library for accessibility testing
• Engine powering browser extensions, test integrations
• A handy unit testing tool
• Open source*

axe-core rule descriptions on Github

aXe chrome extension

aXe firefox extension

Document accessibility intent
~and~ prevent regressions
with test coverage

Tools for the job

• axe-core
• axe-webdriverjs

axe-core API (2.0.5)

• axe.a11yCheck(context, options, callback)
• axe.getRules(['wcag2a', 'section508'...])
• axe.configure(options)
• axe.reset()
• axe.registerPlugin(plugin)
• axe.cleanup()

https://github.com/dequelabs/axe-core/blob/master/doc/API.md

axe.a11yCheck

  // Test an element reference, selector, or include/exclude object.
  var context = { exclude: ['#some-id'] };
  var config = {
    rules: {
        "color-contrast": { enabled: false },
        "valid-lang": { enabled: false }
    }
  };

  axe.a11yCheck(context, config, function(results) {
    // do stuff with the results
  });
			        

https://github.com/dequelabs/axe-core/blob/master/doc/API.md#a11ycheck-parameters

Unit testing with axe-core

  npm install axe-core --save-dev
				        

  var axe = require('axe-core');

  describe('Custom component', function() {
    it('should have no a11y violations', function(done) {
      axe.a11yCheck('.some-element-selector', {}, function (results) {
        expect(result.violations.length).toBe(0);
        done();
      });
    });
  });
					

aXe unit test demo

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

What is axe-webdriverjs?

An open source library that injects axe-core
into Selenium Webdriver instances

Integration testing with axe-webdriverjs

  npm install axe-webdriverjs --save-dev
			        

  var AxeBuilder = require('axe-webdriverjs'),
      WebDriver = require('selenium-webdriver');
 
  var driver = new WebDriver.Builder()
    .forBrowser('firefox')
    .build();
 
  driver
    .get('https://localhost:4000')
    .then(function (done) {
      AxeBuilder(driver)
        .analyze(function (results) {
          expect(results.violations.length).toBe(0);
          done();
        });
    });
						

aXe integration test demo

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

Get help from experts

The aXe Team
(besides yours truly)

To a11y and beyond!

twitter.com/marcysutton

github.com/marcysutton