30 Minutes or Less:
The Magic of Automated Accessibility Testing

Marcy Sutton, Seattle, WA
Accessibility Engineer, Angular Core Team Member

Slides: http://marcysutton.com/jsconf2015

Accessibility is the answer to a more inclusive Web.

(Pizza is also always the answer.)

Accessibility Basics

  • Alternative text
  • Document structure & hierarchy
  • HTML semantics
  • Keyboard interactivity
  • Color contrast
  • Focus management

More principles

How to Accessibility

Dude, sucking at something is the first step towards being sort of good at something. Jake the Dog from Adventure Time

Let tooling to do some heavy lifting for you.

Let's talk about:

  • Manual Testing
  • Sorta-Automated Testing
  • Definitely Automated Testing

But automating’s no substitute for...

real user feedback

* Inclusive of people with disabilities

First thing I do:

Tab through a page with
the keyboard

Demo: GOV.UK

Next thing:

Use a screen reader

Demo: Soundcloud

Sorta-Automated Testing

Headings & Semantic Structure

Firefox Web Developer Toolbar
Navigating to Information, View Document Outline in Firefox
Heading structure output from Accessibility Wins

Semantic Structure from WebAIM

Overall Page A11Y

Chrome Accessibility Developer Tools
Chrome Extension

Let's do an audit

Demo: CNN.com

Concept

The Accessibility Tree

Output from Codepen video player demo in Chrome's Accessibility tree

Post from The Paciello Group

Chrome Accessibility Developer Tools

Open Source Audit Library

Audit JS files on Github

What do you do with those?

Adventure Time Finn stroking his chin

Definitely Automated Testing

A11y by Addy Osmani

by Addy Osmani


      var a11y = require('a11y');

      a11y('cnn.com', function (err, reports) {
        var report = reports.report;
        console.log(report);
      });
              

Ways to Integrate

  • Run on save
  • Run on commit
  • Run on deploy

Protractor for AngularJS

+ Accessibility Plugin

Documentation on Github

Protractor


Test for:

  • Focus management
  • Live updates
  • Color contrast

Angular Material Start

Demo app running on localhost
Protractor config file open in Sublime Text
Project package.json file open in Sublime Text
Project package.json with test line highlighted

Write some tests, deliver some audits


 describe('bottom sheet view', function() {
  beforeEach(function() {
    // click on share button
    element(by.css('button.share')).click();
  });

  it('should focus on the first item', function() {
    // verify focus was sent into bottom sheet
    element.all(by.css('[ng-click="vm.performAction(item)"]'))
      .then(function(items) {
        expect(items[0].getAttribute('id'))
          .toEqual(browser.driver.switchTo().activeElement().getAttribute('id'));
    });
          

Protractor Accessibility Plugin

Runs your tests against

Chrome A11y Developer Tools & Tenon API

Protractor output on the terminal

Fixing test failures

Bottom Sheet HTML with text alternative missing
Bottom Sheet HTML with text alternative added
Bottom Sheet HTML with text alternative added and highlighted

Unit Testing for Accessibility

Opportunities:

  • Watched ARIA properties
  • Keyboard operability
  • Text alternatives
  • Semantics

Example: ngAria

<some-checkbox> custom element
Attributes rendered

ngAria Unit Tests


  ddescribe('tabindex', function() {
    beforeEach(injectScopeAndCompiler);

    it('should not attach to native controls', function() {
      compileElement("");
      expectAriaAttrOnEachElement(element, 'tabindex', undefined);
    });

    it('should attach tabindex to custom inputs', function() {
      compileElement('
'); expect(element.attr('tabindex')).toBe('0'); compileElement('
'); expect(element.attr('tabindex')).toBe('0'); }); it('should attach to ng-click', function() { compileElement('
'); expect(element.attr('tabindex')).toBe('0'); }); ...
Angular.js ngAria (refactor)

Accessibility Testing,

delivered


  • Keyboard, screen reader
  • Firefox Web Developer Toolbar
    Chrome Accessibility Developer Tools
  • A11y, Protractor, Unit testing

Resources

Let's eat.

Beyonce dance move to reveal a pizza