30 Minutes or Less:
The Magic of Automated Accessibility Testing

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

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...

* 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

Semantic Structure from WebAIM

Overall Page A11Y

Let's do an audit

Demo: CNN.com

Concept

The Accessibility Tree

Post from The Paciello Group

Chrome Accessibility Developer Tools

Open Source Audit Library

What do you do with those?

Definitely Automated Testing

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

+ Accessibility Plugin

Documentation on Github

Protractor

Test for:

• Focus management
• Live updates
• Color contrast

Angular Material Start

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

Fixing test failures

Unit Testing for Accessibility

Opportunities:

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

Example: ngAria

{<br>  "role": "checkbox",<br>  "ng-model": "checked",<br>  "ng-checked": "checked",<br>  "class": "ng-pristine ng-untouched ng-valid",<br>  "tabindex": "0",<br>  "checked": "checked",<br>  "aria-checked": "true"<br>}

ngAria Unit Tests

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

    it('should not attach to native controls', function() {
      compileElement("<button ng-click="something"></button>");
      expectAriaAttrOnEachElement(element, 'tabindex', undefined);
    });

    it('should attach tabindex to custom inputs', function() {
      compileElement('<div type="checkbox" ng-model="val"></div>');
      expect(element.attr('tabindex')).toBe('0');

      compileElement('<div role="checkbox" ng-model="val"></div>');
      expect(element.attr('tabindex')).toBe('0');
    });

    it('should attach to ng-click', function() {
      compileElement('<div ng-click="someAction()"></div>');
      expect(element.attr('tabindex')).toBe('0');
    });
    ...
        

Accessibility Testing,

delivered

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

Resources

• Including People with Disabilities in User Research
• Conducting User Evaluations
• How I Audit a Website for Accessibility
• Web Accessibility Evaluation Tools
• Notes on Client-Rendered Accessibility
• WebAIM Screen Reader Survey
• What is ARIA?

Let's eat.