An End to End Accessibility Platform for Developers

Introductions Shari Trewin, Ph. D Lead Researcher IBM Accessibility Chair, ACM SIGACCESS (ACM Special Interest Group on Accessible Computing) trewin@us. ibm. com IBM Accessibility / DPO / © 2020 IBM Corporation Marc Johlic Senior Accessibility Engineer Product Owner IBM Accessibility johlic@us. ibm. com 2

Agenda IBM context How do agile teams do accessibility? IBM Equal Accessibility Toolkit IBM Equal Accessibility Checker Automation tools Carbon Design System Getting involved IBM Accessibility / DPO / © 2020 IBM Corporation 3

IBM Context IBM Accessibility / DPO / © 2020 IBM Corporation 4

IBM ~ 3000 products IBM Accessibility / DPO / © 2020 IBM Corporation >

Agile development Waterfall Discover → Plan → Design → Develop → Test IBM Accessibility

brief history of Accessibility at IBM 1950 s 1970 s Remote control First Braille keyboard printer 1962 1914 IBM Shoebox Hired first employee with a disability IBM Accessibility / DPO / © 2020 IBM Corporation 1980 Talking Typewriter 1998 Via. Voice 2010 Connections 3. 0 2003 Easy Web Browsing 2009 Media Captioner & Editor 2014 Mobile Accessibility Checker 2019 moves to IBM Design 2020 Equal Access Toolkit 7

IBM Accessibility vision statement to establish an open source platform that empowers offering teams to conceive, design, develop, ship, and report on their digital accessible offerings regardless of their accessibility expertise IBM Accessibility / DPO / © 2020 IBM Corporation 8

IBM Accessibility Team Simeon Mc. Aleer Tom Brunet Marnie Hoover Marc Johlic Shari Trewin Bo Campbell Will Scott Michael Gower Phill Jenkins Mary Jo Mueller Charu Pandhi Sharon Snider Brent Shiver Shunguo Yan Zhennan Wang Ali Unwala Jessica Lin Meghan Grable Alexandra Grossi Erick Renteria Josiah Hoskins IBM Accessibility / DPO / © 2020 IBM Corporation 9

How do agile teams do accessibility? IBM Accessibility / DPO / © 2020 IBM

Investigating the reality - a ‘fly on the wall’ study • 5 teams • 27 people interviewed • 14 people followed OM, dev, design, focal, … log all accessibility activities weekly check-ins 8 weeks • 57 hours of conversation Photo by Unknown Author is licensed under CC BY-SA IBM Accessibility / DPO / © 2020 IBM Corporation 11

The reactive team accessibility? ? !! Design Dev IBM Accessibility / DPO / ©

Reactive team experience Design Dev “… there hasn't been any accessibility-related workflow in our design process. ” - Designer IBM Accessibility / DPO / © 2020 IBM Corporation Release Issues found “… I was assuming that potentially design and development know what needs to be done? ” - Manager Address issues Revisit design “we are slammed with all the results” - Developer Not fully accessible “two big things were not spotted” - Manager 13

Most common pains 341 pain points and barriers observed or reported IBM Accessibility / DPO / © 2020 IBM Corporation testing finds a long list of failures Why? not planning accessibility in Why? not building accessibility in Why? testing too late 14

Planning pains Why? not a priority Why? no demand IBM Accessibility / DPO / © 2020 IBM Corporation not planning accessibility in Why? is costly Why? no meaningful stages hard to know status Why? headcount 15

Testing pains testing too late Why? takes too long Why? triaging issues Why? requires

Building pains developers don’t build it in Why? relying on Carbon designers don’t design it in Why? teams lack expertise component unit test process Why? large topic Why? IBM Accessibility / DPO / © 2020 IBM Corporation need specific guidance Why? learn by doing Why? hard to fix as an afterthought Why? can’t use screen reader Why? devs don’t have JAWS Why? complexity of screen readers 17

Building expertise - Developer “ it was more about trial by fire…, getting some work put on my plate and then I … learn what I need to learn about it in order to … resolve the issue and keep going. ” “There's a tremendous amount of information. It's very overwhelming, especially using JAWS and you have no idea if what you're doing is right. ” “… from those two days [working with a blind user] I learned more about using a screen reader than I've ever in the last three years. Just to see it being used as it should be …” IBM Accessibility / DPO / © 2020 IBM Corporation 18

Building expertise - Designer “I think for most of the designers, accessibility is not something that they're well versed enough in that it comes naturally to them. ” – Design Lead “As a design team we don't generally have an awareness of items we might need to be providing that are not visible. ” – Design Lead IBM Accessibility / DPO / © 2020 IBM Corporation 19

How can we help agile teams do accessibility? IBM Accessibility / DPO / ©

Whose job is it anyway? “If you have one person that's really not thinking about it … then it can have a ripple down effect later on. … So, you know, it's not necessarily just the developer's job. It's not necessarily just the designer's job or the offering management. Everyone needs to kind of work together towards that goal…” IBM Accessibility / DPO / © 2020 IBM Corporation 21

Some teams are still thinking like this “Accessibility is black and white. If you fail one checkpoint you FAIL even if you did all this hard work. ” – QA IBM Accessibility / DPO / © 2020 IBM Corporation 22

Every step makes a difference 1. Build it in to new designs 2. Take small steps every sprint 3. Let others do the work - use Carbon, HTML 5 4. Unit test every component as you go IBM Accessibility / DPO / © 2020 IBM Corporation 23

Building expertise • Guidance built into tools • Learning in the moment • Relevant to the role • Relevant to the task at hand • Raise the level of expertise • Lower the expertise requirement IBM Accessibility / DPO / © 2020 IBM Corporation 24

IBM Equal Access Toolkit IBM Accessibility / DPO / © 2020 IBM Corporation 25

IBM Equal Access Toolkit IBM Accessibility / DPO / © 2020 IBM Corporation 26

IBM Equal Access Tools IBM Accessibility / DPO / © 2020 IBM Corporation 27

IBM Equal Access Pace of Completion IBM Accessibility / DPO / © 2020 IBM

IBM Equal Access Design Research IBM Accessibility / DPO / © 2020 IBM Corporation

IBM Equal Access Bulleted Topics IBM Accessibility / DPO / © 2020 IBM Corporation

IBM Equal Access Expand for details and resources IBM Accessibility / DPO / ©

IBM Equal Access Robust search IBM Accessibility / DPO / © 2020 IBM Corporation

IBM Equal Accessibility Checker IBM Accessibility / DPO / © 2020 IBM Corporation 33

IBM Equal Access IBM Accessibility Checker Tool IBM Accessibility / DPO / © 2020

IBM Equal Accessibility Checker Auditor view IBM Accessibility / DPO / © 2020 IBM

IBM Equal Accessibility Checker Violation information IBM Accessibility / DPO / © 2020 IBM

IBM Equal Accessibility Checker Report IBM Accessibility / DPO / © 2020 IBM Corporation

IBM Equal Accessibility Checker Report details IBM Accessibility / DPO / © 2020 IBM

IBM Equal Accessibility Checker Developer view IBM Accessibility / DPO / © 2020 IBM

IBM Equal Access Automation Tools IBM Accessibility / DPO / © 2020 IBM Corporation

Accessibility Checker for Node – Command-line or API driven accessibility-checker – Works with Selenium, Puppeteer, and other script-driven DOMs – Accessibility testing locally or in CI environments (Travis, Jenkins, …) – Ideal for multi-page UI testing (workflows, multi-page function tests, system tests, …) – Input – Command-line useful for batch content scanning – Works with various test frameworks (e. g. , Jasmine, Mocha, Cucumber) IBM Accessibility / DPO / © 2020 IBM Corporation • Puppeteer • Selenium Web. Driver • URL, file, list of pages – Baselines: regression detection, ignore lists, progressive fixing 41 41

Accessibility Checker for Karma – karma-accessibility-checker – Open source, browser automation framework – Accessibility testing locally or in CI environments (Travis, Jenkins, …) – Framework runs within the browser – Input – Ideal for unit testing UI components (vs. workflows) – Supports Firefox, Chrome, and other browser environments – Works with various test frameworks (e. g. , Jasmine, Mocha, Cucumber) IBM Accessibility / DPO / © 2020 IBM Corporation • HTML Node / widget • Local HTML File • HTML String – Baselines: regression detection, ignore lists, progressive fixing 42 42

Carbon Design System IBM Accessibility / DPO / © 2020 IBM Corporation 43

Carbon is the open source product design system for IBM Accessibility / DPO /

What is a design system? IBM Accessibility / DPO / © 2020 IBM Corporation

A set of living guidelines and components that outline visual styles, UX patterns and

IBM Accessibility / DPO / © 2020 IBM Corporation

→ IBM Accessibility / DPO / © 2020 IBM Corporation 49

IBM Accessibility / DPO / © 2020 IBM Corporation 50

IBM Accessibility / DPO / © 2020 IBM Corporation 51

IBM Accessibility / DPO / © 2020 IBM Corporation 52

IBM Accessibility / DPO / © 2020 IBM Corporation 53

Where does it fit? Carbon Accessibilit y IBM Accessibility / DPO / © 2020

Accessibility Starts with an Inclusive Culture. IBM Accessibility / DPO / © 2020 IBM

Accessible Color Palette IBM Design System Colors are “ 60 points” apart comply with

Accessible Code IBM Accessibility / DPO / © 2020 IBM Corporation 57

Accessibility Guidelines Overall IBM Accessibility / DPO / © 2020 IBM Corporation Per component

What accessibility rules do you test against? IBM Accessibility / DPO / © 2020

Carbon is Open Source IBM Accessibility / DPO / © 2020 IBM Corporation

3, 113 44, 526 Git. Hub Stars IBM Accessibility / DPO / © 2020

IBM Equal Access Toolkit is Open Source IBM Accessibility / DPO / © 2020

Get involved! IBM Accessibility / DPO / © 2020 IBM Corporation 63

Thank you! Toolkit: ibm. com/able/ Carbon Design System: www. carbondesignsystem. com Twitter: @IBMAccess Speakers: trewin@us. ibm. com johlic@us. ibm. com IBM Accessibility / DPO / © 2020 IBM Corporation 64