Visualizations that speak to you: Our journey through inclusive design

Talk by Will Ryan - Lead UX Designer at IBM

Accessibility and Inclusive Design is rapidly becoming table stakes for products that are considered to have strong user experiences. For teams that prioritize its best practices early on, it doesn’t even need to be all that hard to incorporate. But, what of tools that are inherently visual such as data visualizations or even drag-and-drop scenarios? Surely, there must be some way to address the needs of users even in these situations. This was precisely the situation I and the team I support found ourselves in. I joined product team with a fully designed and built UI, and we now needed to “add in” accessibility compliance. To truly support an inclusive design though, a new strategy was needed.

In this talk, I will review how we started to address these concerns in our tool. I will review how screen readers work so that we can do more than just support a WCAG checkbox and go deeper into providing an experience that delights for low- or non-sighted users. I will also review concerns for mobility-impaired users that were impacted by the design. Lastly, I will also touch briefly on IBMs history of staying committed to accessibility at the heart of the products we build. I hope you can walk away with a better understanding of inclusive user experiences and the technology that supports them.

Transcript

1. Visualizations that speak to you: Our journey through inclusive design 17.Jun.2021 TriUXPA Event William Ryan IBM z Systems – Design / Research Lead
2. Introduction Z Systems / Restructuring a Visualization UI for Visually-Impaired Experiences / © 2021 IBM Corporation 2 When the Worlds of IT Service Management and Accessibility Collide 16.6% 29.5mil of working age adults Understanding Disability Statistics
3. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 3 Flickr What’s the story with mainframes anyways?
4. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 4 Pixabay …the person who developed it is retired on a beach
5. Let’s hear what you have to say (1 of 3) Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 5 Question 1 How would you rate your current knowledge level regarding accessibility? Follow the link: https://app.sli.do/event/zd n5zgag
6. IBM z Resource Discovery Service Z Systems / © 2021 IBM Corporation 6 Provides a topology of the components running within a z System mainframe. Three core use cases: • Change impact analysis • Provisioning new environment • Incident Remediation 1 2 3
7. Who are we designing for? Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 7 App Developer With Visual Impairment With Motor Impairment
8. Variations on disabilities Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 8 Valtech Design: Inclusive Design (built using Microsoft Inclusive Toolkit)
9. Accessibility addresses discriminatory aspects related to equivalent user experience for people with disabilities. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 9 W3.org: Accessibility, Usability, and Inclusion Inclusion is about diversity, and ensuring involvement of everyone to the greatest extent possible.
10. WCAG Evaluation 10 Biggest deficiencies: 1.1.1 Non-text Content 1.3.1 Info and Relationships 2.1.1 Keyboard 2.4.3 Focus Order 3.3.2 Labels or Instructions 4.1.3 Status Messages Z Systems / © 2021 IBM Corporation 10
11. WCAG Evaluation, cont. 11 Biggest deficiencies: 1.1.1 Non-text Content 1.3.1 Info and Relationships 2.1.1 Keyboard 2.4.3 Focus Order 3.3.2 Labels or Instructions 4.1.3 Status Messages 11 Z Systems / © 2021 IBM Corporation
12. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 12 Corporate Instruction CHS 162 Accessibility of information technology for people who have disabilities IBM is committed to making its information technology widely available and accessible, regardless of the physical ability of the user. ... Our competitiveness in the worldwide marketplace depends on satisfying our customers' demands for information technology that meets their varying requirements. For example, in the U.S., Section 508 of the Rehabilitation Act requires that information technology purchased by federal agencies comply with accessibility standards. …IBM is committed to making our information technology accessible to people with disabilities in all geographies where IBM provides products or services. To allow individuals who have disabilities to use IBM information technology, all of our information technology must follow standard, defined practices that make technology either compatible with assistive technology or directly accessible. All user interfaces should comply with these standards. Our information technology should also use and interoperate with existing platform accessibility tools, conventions and APIs where technologically possible. Accessibility and Inclusive Design @ IBM
13. Visual Impairment Experience 13 Inherently linear experience x- and y- on screen coordinates help readability, but otherwise don’t matter Graph flow is from center outwards Adding alt tags to connections alone isn’t sufficient Z Systems / © 2021 IBM Corporation 13
14. Visual Impairment Experience, cont. 14 Z Systems / © 2021 IBM Corporation 14 Total - Permanent: Could use a screen reader or braille-output device Partial - Permanent: May need higher contrast and magnification May need color separated from content (due to color blindness) Temporary or Situational: Might need a simpler screen design OR Might need more time to accomplish something using an interface
15. Screen Reading Technology Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 15 JAWS NVDA
16. JAWS Inspect Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 16
17. Group Name / DOC ID / Month XX, 2019 / © 2019 IBM Corporation 17 Screen reading using NVDA
18. Unsplash Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 18 The Keyboard
19. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 19 Permobil Tobii Dynavox Assistive Technology for Mobility
20. Mobility Impairment Experience 20 Z Systems / © 2021 IBM Corporation 20 Total - Permanent: Might not be able to use a pointing device Partial - Permanent: May have a limited range of motion and need a specific configuration of devices Temporary or Situational: Might need a simpler screen design Might need to adapt using other aspects of the body (leading to more errors)
21. Keyboard-only evaluation (focus order)
22. Let’s hear what you have to say (2 of 3) Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 22 Follow the link: https://app.sli.do/event/zd n5zgag Question 2 What hurdles are you facing in prioritizing inclusive design at your organization?
23. How might we… improve this experience 1. Make everything keyboard/screen reader accessible 2. Emphasis on natural focus and presentation order 3. Utilize native HTML table component Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 23
24. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 24 Table view
25. Table view with screen reader Group Name / DOC ID / Month XX, 2019 / © 2019 IBM Corporation 25
26. Group Name / DOC ID / Month XX, 2019 / © 2019 IBM Corporation 26 Enhanced graph view with screen reader
27. Better focus order
28. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 28 Accessing connections between artifacts
29. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 29 Expert Use case: leverage accessibility improvements
30. Let’s hear what you have to say (3 of 3) Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 30 Question 3 What aspects of accessibility are you looking to learn more about? Follow the link: https://app.sli.do/event/zd n5zgag
31. Revising our personas Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 31 App Developer With Visual Impairment With Motor Impairment
32. Tools of the Trade (1 / 4) Heuristic Tools 32 Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation Kahn Academy tota11y https://khan.github.io/tota11y/ Social Security ANDI Accessibility Test Tool https://www.ssa.gov/accessibility/andi/help/install.html Level Access Accessible Color Picker http://t.ly/B1II
33. Tools of the Trade (2 / 4) Static Analysis Tools 33 Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation WebAIM WAVE Eval. Tool https://t.ly/z9z6 IBM Equal Access Accessibility Checker http://t.ly/2TON Deque axe Web Accessibility Testing http://t.ly/ApGg
34. Tools of the Trade (3 / 4) CI/CD Tool 34 Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation AccessLint for GitHub https://accesslint.com/
35. Tools of the Trade (4 / 4) Design Tools 35 Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation Microsoft Focus Orderer (Figma) http://t.ly/MYzM Adee Comprehensive Accessibility Testing Tool (Sketch, Figma) http://adeeapp.com/ Stark (Figma, Sketch, XD) https://www.getstark.co/
36. Learn More 36 Curious about where you can dig in and learn more about accessibility and how to incorporate it into your own practices? Articles and websites 1. Design: A Quick Introduction to Web Accessibility by Nick Babich 2. Development: Accessibility by Mozilla 3. General: The A11y Project 4. General: Accessibility for Teams by Digital.Gov Videos 1. Rethink What Inclusive Design Means by Kat Holmes 2. How I use technology as a blind person! by Molly Burke 3. Smart Homes are a Game Changer for People with Disablities by NBC News Training and Toolkits 1. General: Web Accessibility @Udacity by Google (free) 2. Development: Introduction to Web Accessibility @ edX by W3C (free) 3. General: Equal Access Toolkit by IBM Z Systems / © 2021 IBM Corporation
37. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 37 Skilling up?
38. Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 38 Technology doesn’t make accessibility hard. People who don’t give a damn do. Good accessibility looks at the product, great accessibility looks at the entire user experience.
39. Thanks for listening! Connect, reach out, chat Z Systems / Visualizations that Speak to You / © 2021 IBM Corporation 39 http://www.twitter.com/wnryan https://www.linkedin.com/in/wnryan http://uxwill.design/
40. Nazare Discovery / Prototype Usability Evaluation / © 2020 IBM Corporation 40