Integrating Accessibility into your Development Workflow with Attest By Marcy Sutton, Senior Front-End Engineer @marcysutton

CSUN 2017 We’re here to listen, “share knowledge & best practices in the field of assistive technology” CSUN is like a Meerkat huddle where like minds come together like family to build warmth and strength

In this talk: Accessibility in the Software Development Lifecycle Scaling Accessibility in Large Organizations Introduction to WorldSpace Attest Attest vs. aXe Using Attest with WorldSpace Comply

Accessibility in the Software Development Lifecycle

Accessibility ⏎ Accessibility in the Development Lifecycle

A Team Effort Product Owner Research/Analysis Design/UX Developer Make a business case Require accessibility in definition of “done” Research/Analysis Look at accessibility history in the org. User testing Design/UX PWD in personas Annotate wireframes Design for accessibility Developer Clarify requirements Include accessibility from the beginning Use testing tools QA Tester Test with the keyboard Use assistive tech. Write accessibility test cases Accessibility in the Development Lifecycle

Developers Accessibility in the Development Lifecycle

Accessibility & Development The Trifecta: HTML, CSS and JavaScript Coding Interactivity Automated Testing Accessibility in the Development Lifecycle

Accessibility & Automation 30-50% of issues can be automated Automate the easy stuff–freeing up humans for more complex tasks Validate quality with usability testing Accessibility in the Development Lifecycle

Agile Process Accessibility in the Development Lifecycle

Separate Accessibility Stories Prioritize Accessibility Issues Separate Accessibility Stories Don’t let it fall off your radar every sprint: avoid a pile of technical debt! Accessibility in the Development Lifecycle

How to overcome accessibility debt Take A11y One Dedicated Step at a Time How to overcome accessibility debt

Make a Plan Write accessibility user stories “As a keyboard user, I need to select a calendar date & time” Prototype new/complex patterns Iterate early and often Use testing tools Keyboards, screen readers, browser extensions, libraries/APIs for test automation Test with users with disabilities Accessibility in the Development Lifecycle

Scaling Accessibility in Large Organizations

Accessibility in Large Orgs: → Planning Integrate accessibility with general web development policies/timelines Coordinate accessibility efforts across teams https://www.w3.org/WAI/impl/ Scaling Accessibility in Large Organizations

Accessibility in Large Orgs: → Implementation Improve awareness of accessibility Make accessibility a definition of “done” Standardize processes Write tests! http://ic3.mit.edu/ResearchSamples/2013-08.pdf Scaling Accessibility in Large Organizations

Accessibility in Large Orgs: → Sustaining Quality Document functionality with tests Prevent regressions with CI Monitor accessibility conformance Scaling Accessibility in Large Organizations

Accessibility Strategies in Large Orgs: Shared/standard tools Shared policies, custom rules Common bug tracking Continuous integration Reporting Scaling Accessibility in Large Organizations

Introduction to WorldSpace Attest The Automated Testing Toolkit from Deque Systems Is a collection of developer tools for mature development teams that integrates easily with test automation, development pipeline and code quality reporting tools to provide automated dynamic accessibility testing and reporting within an agile development process

Features Manual and automated accessibility developer tools API integrations for test infrastructure Support for custom rules and policies Reporting Introduction to WorldSpace Attest

Integrations Attest DevTools Extension Selenium Webdriverjs Integration Ruby, Java Test integrations Sonar Qube plugin Attest Node, Java Reporters Introduction to WorldSpace Attest

Related Content at CSUN: Continuously Integrated Accessibility Wilco Fiers, Attest product team member Friday March 3, 10:00-11:00am In this room! My talk is also right after, on React.js Introduction to WorldSpace Attest

Attest DevTools: testing Puppy Cam Introduction to WorldSpace Attest

Attest DevTools and custom rules: testing Puppy Cam Introduction to WorldSpace Attest

Attest DevTools vs. aXe: Issue Download/Upload Filter rules by standard Custom rules Scripts SimulAT Introduction to WorldSpace Attest

Attest-WebdriverJS Integration Easily plumb standard rules into your tests const WebDriver = require('selenium-webdriver'), AttestBuilder = require('attest-webdriverjs'),       attest = require('attest-node')(); it('should find no accessibility violations', () => { driver.get('http://localhost:3000/') .then(function () {     new AttestBuilder(driver)       .analyze(function (results) { assert.equal(results.violations.length, 0); dqReporter.logTestResult('about', results); done();       }); Introduction to WorldSpace Attest

Attest-Node Reporting App Introduction to WorldSpace Attest

SonarQube Plugin & Widgets Sonar Qube: platform for continuous code quality Introduction to WorldSpace Attest

Attest + aXe ❤️ Same team Attest customers get early access We prioritize features for customer needs

Attest: enterprise counterpart to aXe Funding open source FTW! Attest + aXe

Coming soon: the new aXe extension Attest + aXe

Attest & WorldSpace Comply Deque Products Working Together Share issues Custom rules Scripts +

Wrap-Up Accessibility belongs all over the SDLC It’s a team effort Accessibility & Development are BFFs Use agile to your advantage Small stories, incremental progress Make a Plan Accessibility can scale with large organizations WorldSpace Attest was created for developer workflows Advanced tools, custom support

It’s a balance

Questions? attest@deque.com ~ marcy.sutton@deque.com @marcysutton

Deque’s Full CSUN Schedule: Sign up to receive presentation slides: www.deque.com/csun17 Deque’s Full CSUN Schedule: www.deque.com/info @dequesystems

Stump the Accessibility Expert Deque Party + Accessible Karaoke Today – 3:30-4:30pm Deque Party + Accessible Karaoke Today – 6:30-10pm Palm Foyer aXe Hackathon Saturday, March 4th 9am-12pm Solana Beach AB Room