An End to End Accessibility Platform for Developers
An End to End Accessibility Platform for Developers — IBM Accessibility 2020 Shari Trewin Marc Johlic IBM Accessibility / DPO / © 2020 IBM Corporation
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 > 2000 designers: largest design company in the world Corporate mandate for accessibility 5
Agile development Waterfall Discover → Plan → Design → Develop → Test IBM Accessibility / DPO / © 2020 IBM Corporation Agile Discover → Plan → Design → Develop → Test → 6
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 Corporation 10
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 / © 2020 IBM Corporation Release Issues found Address issues Revisit design Not fully accessible 12
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 manual work Why? tools miss issues IBM Accessibility / DPO / © 2020 IBM Corporation 16
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 / © 2020 IBM Corporation 20
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 Corporation 28
IBM Equal Access Design Research IBM Accessibility / DPO / © 2020 IBM Corporation 29
IBM Equal Access Bulleted Topics IBM Accessibility / DPO / © 2020 IBM Corporation 30
IBM Equal Access Expand for details and resources IBM Accessibility / DPO / © 2020 IBM Corporation 31
IBM Equal Access Robust search IBM Accessibility / DPO / © 2020 IBM Corporation 32
IBM Equal Accessibility Checker IBM Accessibility / DPO / © 2020 IBM Corporation 33
IBM Equal Access IBM Accessibility Checker Tool IBM Accessibility / DPO / © 2020 IBM Corporation 34
IBM Equal Accessibility Checker Auditor view IBM Accessibility / DPO / © 2020 IBM Corporation 35
IBM Equal Accessibility Checker Violation information IBM Accessibility / DPO / © 2020 IBM Corporation 36
IBM Equal Accessibility Checker Report IBM Accessibility / DPO / © 2020 IBM Corporation 37
IBM Equal Accessibility Checker Report details IBM Accessibility / DPO / © 2020 IBM Corporation 38
IBM Equal Accessibility Checker Developer view IBM Accessibility / DPO / © 2020 IBM Corporation 39
IBM Equal Access Automation Tools IBM Accessibility / DPO / © 2020 IBM Corporation 40
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 / © 2020 IBM Corporation
What is a design system? IBM Accessibility / DPO / © 2020 IBM Corporation 45
A set of living guidelines and components that outline visual styles, UX patterns and code for a product. IBM Accessibility / DPO / © 2020 IBM Corporation
IBM Accessibility / DPO / © 2020 IBM Corporation
→ 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 IBM Corporation 54
Accessibility Starts with an Inclusive Culture. IBM Accessibility / DPO / © 2020 IBM Corporation IBM Design Patterns Program 55 55
Accessible Color Palette IBM Design System Colors are “ 60 points” apart comply with WCAG guidelines. IBM Accessibility / DPO / © 2020 IBM Corporation 56 56
Accessible Code IBM Accessibility / DPO / © 2020 IBM Corporation 57
Accessibility Guidelines Overall IBM Accessibility / DPO / © 2020 IBM Corporation Per component 58
What accessibility rules do you test against? IBM Accessibility / DPO / © 2020 IBM Corporation WCAG 2. 1 AA JAWS NVDA Voice. Over Keyboard Zoom/Reflow 59
Carbon is Open Source IBM Accessibility / DPO / © 2020 IBM Corporation
3, 113 44, 526 Git. Hub Stars IBM Accessibility / DPO / © 2020 IBM Corporation Carbon react components npm installs in the last week 61
IBM Equal Access Toolkit is Open Source IBM Accessibility / DPO / © 2020 IBM Corporation 62
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
- Slides: 64