30 Minutes or Less: The Magic of Automated Accessibility Testing

View Github Repository Open presentation in a new window

marcysutton

See all presentation from marcysutton

30 Minutes or Less: The Magic of Automated Accessibility Testing

2 2

a11y-automated-testing

Slides for 30 Minutes or Less: The Magic of Automated Accessibility Testing at JSConf 2015

On Github marcysutton / a11y-automated-testing

30 Minutes or Less: The Magic of Automated Accessibility Testing

Marcy Sutton, Seattle, WAAccessibility 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 is about people.

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.

As far as diagnosing low-hanging fruit. Not a substitute for user testing.

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

Semantic Structure from WebAIM

Overall Page A11Y

Chrome Accessibility Developer Tools

Let's do an audit

Demo: CNN.com

Demo in Canary, show accessibility inspector https://groups.google.com/a/chromium.org/forum/#!topic/chromium-accessibility/zmWfzZic9fE

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
Use on localhost instead of hitting remote URL, add to a task runner, etc. Grunt-a11y, CI servers

+ 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
Crustiness

Example: ngAria

<some-checkbox> custom element 
{  "role": "checkbox",  "ng-model": "checked",  "ng-checked": "checked",  "class": "ng-pristine ng-untouched ng-valid",  "tabindex": "0",  "checked": "checked",  "aria-checked": "true"}
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.

The Magic of Automated Accessibility Testing@marcysutton / marcysutton.com/jsconf2015

30 Minutes or Less: The Magic of Automated Accessibility Testing Marcy Sutton, Seattle, WAAccessibility Engineer, Angular Core Team Member Slides: http://marcysutton.com/jsconf2015