Designing for Accessibility

I facilitated a workshop on designing for accessibility for exploreUX and Triangle UXPA's Global Accessibility Awareness Day event on 5/15/18. We did quite a few hands-on activities to get a sense of what impairments were like, assistive tech available to them, and good and bad examples. I'm hoping attendees left inspired to incorporate accessibility into their design process!

Transcript

1. Designing for Accessibility Pre-Global Accessibility Awareness Day exploreUX + Triangle UXPA May 15, 2018 @exploreUX | @TriUXPA #UXtnt #GAAD Michelle Chin Principal Product Designer, Citrix @soysaucechin
2. Housekeeping Intro • Make sure you’re on the #design4access Slack channel • No computer? Pair up with someone • We have A LOT to cover! • Slides are posted on SpeakerDeck (http:// bit.ly/design4access) • Some of these exercises are intentionally tricky - it’s ok if you’re not successful! • Hold questions to the end A few things to note
3. About Michelle Intro • Originally from the DC area - designer and quality assurance tester • A lot of years doing web projects for Federal Agencies • Department of Homeland Security • Federal Aviation Administration • Export-Import Bank of the US • Department of Labor • Some I can’t mention !
4. About this workshop Intro • Obtain a high-level overview of accessibility from a UX perspective • Get a sense of: • Impairments • Assistive tech (AT) • Good and bad UX examples • See what tools and resources are available to help you • Learn where you can add accessibility into your / your team’s process • Be inspired to learn more about the details of accessibility Objectives
5. Why design for accessibility? Navigation / Vision Impairments 1,000,000,000+ people have some form of disability Many, many people can benefit from accessible products, site, tech ": Ekansh Saxena (Unsplash)
6. Accessibility Basics Intro • # Permanent - an impairment that remains indefinitely • # Temporary - an impairment that is short lived, e.g., broken arm • # Situational - an impairment that’s caused based on the situation you’re in, e.g., noisy bar and you can’t hear the TV, trying to use your phone in bright sunlight Types of Impairments
7. Why design for accessibility? Navigation / Vision Impairments UN Convention on the Rights of Persons with Disabilities Preamble: Recognizes… “that disability is an evolving concept and that disability results from the interaction between persons with impairments and attitudinal and environmental barriers that hinders their full and effective participation in society on an equal basis with others” • Disability is that interaction of human and computer • For UX, it’s our job to remove those barriers $ ➡ &
8. How do we design for accessibility? Navigation / Vision Impairments • The section of the Workforce Rehabilitation Act that specifies the requirements for accessible Information and Communication Technology (ICT). It’s a regulation that each federal agency needs to follow. • Section 508 Refresh (enforced in January) maps back to WCAG 2.0.
 • Easy to understand information: https:// webaim.org/standards/508/checklist Standards: Section 508
9. How do we design for accessibility? Navigation / Vision Impairments • Web Content Accessibility Guidelines (WCAG) 2.0 – the standards for web accessibility by the World Wide Web Consortium (W3C). Published in Dec. 2008 and became an ISO standard in Oct. 2012. • WCAG 2.0 has 3 levels: • A – baseline (think a “C” passing grade in school) • AA – better (think “B”) • AAA – best (', A+) • WCAG 2.1 is in the works • Easy-ish to understand: https://www.w3.org/ WAI/WCAG20/quickref/ Standards: WCAG 2.0
10. How do we design for accessibility? Navigation / Vision Impairments Process Design Code Test • Proactively design with accessibility in mind • Navigation + Comprehension
11. Navigation
12. Navigation Navigation • Ability to move through the site/ product • Orienting yourself with the screen • Navigation can be affected by: • Motor skill impairments • Vision impairments Basics
13. Navigation + Motor Skill Impairments
14. Motor Skill Impairments Navigation / Motor Skill Impairments • Difficulty using a mouse, including: • Moving it to a specific location • Clicking on mouse buttons • Difficulty using a keyboard Examples • Cerebral Palsy • Arthritis • Carpal tunnel How it affects people
15. Try It: Motor skill impairment simulation 1. Visit: http:// www.alphabroder.com 2. Tie a rubber band around your hand. 3. Try navigating the site. 4. Task: Filter all items by the brand Jerzees. Navigation / Motor Skill Impairments
16. Available Assistive Tech (AT) Navigation / Motor Skill Impairments • Special mouse • Special keyboard or keyboard- only • e.g., Using Tab key to navigate • Website has AT-friendly features • Mobile devices have AT-friendly features Try It Later • iOS: Settings > General > Accessibility > AssistiveTouch • Android: Settings > Accessibility > Interaction Controls • Assistive Touch App (Google Play)
17. Try It: Bad experience navigating a site Navigation / Motor Skill Impairments 1. Visit: http:// www.glitschkastudios.com/ • Task: Using your keyboard only, navigate to Craft Beer Labels 2. Visit: http:// www.newbelgium.com/ • Task: Using your keyboard only, navigate to the Tour de Fat (Hint: annual event) Can you see where you are in the site?
18. Try It: Good experience navigating a site Navigation / Motor Skill Impairments 1. Visit: http://www.rei.com 2. Task: Using your keyboard only, navigate to the Carabiners section (Hint: Climbing equipment) Can you see where you are in the site?
19. Accessibility-Friendly Techniques Make the site/ product keyboard friendly and provide a tab order Navigation / Motor Skill Impairments • Design how someone should navigate through the site • Do they go across then down? Or down, then across? • In what order do they access content? • Keep it logical! • Additional benefit: pro users can keep their hands on the keyboard at all times! Cancel Share CX Annual Goals.docx DOC Q3_CX-Goals.pdf + Add more Clear All 2 items Edit Message Options Message: Subject:* Recipients:* * Required Email with ShareFIle 1. Start 8. End 2 3 4 5 6 7 Sample Cancel Share CX Annual Goals.docx DOC Q3_CX-Goals.pdf + Add more Clear All 2 items Edit Message Options Message: Subject:* Recipients:* * Required Email with ShareFIle 1. Start 5. End 2 3 4 Sample Illogical/confusing ordering Logical ordering
20. Accessibility-Friendly Techniques Highlight the item that’s in focus Navigation / Motor Skill Impairments • Can be as simple as the browser’s default • Can be custom • Hover states can serve as highlights, too • Note: Tabbing is for navigation, shouldn’t execute anything
21. Accessibility-Friendly Techniques Provide skip navigation links to navigate quickly Navigation / Motor Skill Impairments • # Skip navigation links are links that when selected jump the user to the corresponding content. • Users avoid having to tab through long menus • Think about the most important sections of your product/site • Keep it simple
22. Accessibility-Friendly Techniques Elements that display on hover should also be keyboard friendly Navigation / Motor Skill Impairments Access tooltip with a mouse Access tooltip with a keyboard
23. Try It: Accessing a tooltip with a mouse or a keyboard Navigation / Motor Skill Impairments 1. Visit: https:// slack.com/pricing 2. Try mousing over a tooltip, then try tabbing to it
24. Accessibility-Friendly Techniques Keyboard shortcuts are useful for more complex products Navigation / Motor Skill Impairments • # Keyboard shortcuts are designated keys or key combinations that provide quick access to a function in an app • Shortcuts should make sense • Make them unique, so they don’t interfere with existing and screen reader keyboard shortcuts Google Inbox’s keyboard shortcuts (Shift + ?)
25. Tools Navigation order design document Navigation / Motor Skill Impairments • Document how someone should navigate through the design • ( Collaborate (design, dev, accessibility) to ensure the document works for all parties Cancel Share CX Annual Goals.docx DOC Q3_CX-Goals.pdf + Add more Clear All 2 items Edit Message Options Message: Subject:* Recipients:* * Required Email with ShareFIle 1. Start 5. End 2 3 4 Sample
26. Tools Prototype designs Navigation / Motor Skill Impairments • For complicated, intricate interactions (i.e., forms, etc.), see if developers can code a quick prototype.
27. Tools Usability testing Accessibility testing Navigation / Motor Skill Impairments • See how well the design works - does the flow make sense? • If using keyboard shortcuts, can users comprehend them? • Do they interfere with screen reader keyboard controls? • For things that test well, consider documenting them in your component/ pattern library
28. Navigation Tools / Techniques Navigation / Motor Skill Impairments • These tools and techniques also help with vision impairments Motor-Skill Friendly Tools / Techniques
29. Navigation + Vision Impairments
30. Vision Impairments Navigation / Vision Impairments • Difficulty navigating and orienting on a site/ product Examples • Partial vision loss - glaucoma, macular degeneration • No vision - complete blindness How it affects people
31. Example: Glaucoma Navigation / Vision Impairments / Partial Vision Loss Normal Vision Vision affected by glaucoma
32. Try It: Partial vision simulation 1. Visit any website 2. Take a straw and look at the website through it Navigation / Vision Impairments / Partial Vision Loss
33. Example: Macular Degeneration Navigation / Vision Impairments / Partial Vision Loss Normal Vision Vision affected by macular degeneration
34. Try It: Partial vision simulation 1. Put on the safety glasses 2. Look at any website Navigation / Vision Impairments / Partial Vision Loss
35. Available Assistive Tech Navigation / Vision Impairments / Partial Vision Loss Special Keyboards • Larger letters • Color contrast to help with low vision
36. Available Assistive Tech Navigation / Vision Impairments / Partial Vision Loss Screen magnifiers • # A screen magnifier is a tool that enlarges screen content, so people can see words and images better. Try It Later • Mac (Zoom): System Preferences > Accessibility > Zoom • Windows 10 (Magnifier): Press: Windows logo key + Plus (+) • iOS (Zoom): Settings > General > Accessibility > Zoom • Android (Magnification): Settings > Accessibility > Magnification
37. Example: No Vision Navigation / Vision Impairments / No Vision Normal Vision No Vision
38. Try It: No vision simulation 1. Call the NC DMV (listen to audio clip) 2. Task: You want to renew your vehicle registration Navigation / Vision Impairments / No Vision Think about: • Relevancy of the content • Orientation in the system • Your mental model vs. the system’s model
39. Available Assistive Tech Navigation / Vision Impairments Screen readers • Windows: • NVDA (free) • JAWS (free demo) • Narrator (included) • Mac OS and iOS: VoiceOver (included) • Android: TalkBack (included) • # A screen reader is a tool that converts text to speech, so visually impaired users can hear what’s being displayed. Try It Later • Mac: System Preferences > Accessibility > VoiceOver > Enable VoiceOver • Windows (Narrator): Press: Windows logo key + Ctrl + Enter • iOS (VoiceOver): Settings > General > Accessibility > VoiceOver • Android (TalkBack): Settings > Accessibility > TalkBack
40. Available Assistive Tech Navigation / Vision Impairments / No Vision Accessibility-Friendly Code: Semantic Elements • # Semantic elements in code are elements that have meaning associated with them. Examples: • <form> for Form • <table> for a Table • <h1> for Heading Level 1 • Screen readers pick up on these elements, which help the user understand where they are and what they’re listening to.
 • Examples of non-semantic elements: • <div>, <span>
41. Available Assistive Tech Navigation / Vision Impairments / No Vision Accessibility-Friendly Code: ARIA attributes • # ARIA (Accessible Rich Internet Applications) attributes in code are components that help make rich web experiences accessible. • Core components: • Roles (e.g., navigation, content, search, etc.) • Properties • States • Screen readers pick up on these attributes, which help the user understand where they are, what’s going on, and what they’re listening to.
42. Try It: ARIA landmark organization 1. Visit: http://bit.ly/ arialandmarks 2. Select the Show Landmarks button Navigation / Vision Impairments Note: This is a visual example only. ARIA is powerful (and technical). More info: • ARIA Basics: http://bit.ly/aria-basics • Using ARIA: https://www.w3.org/TR/wai-aria-1.1/#usage
43. Try It: Screen Reader in action - non- accessible code Navigation / Vision Impairments 1. Listen to this screen reader clip 2. Based on what you hear, draw a wireframe of the website
44. Try It: Screen Reader in action - accessible code Navigation / Vision Impairments 1. Listen to this screen reader clip 2. Based on what you hear, draw a wireframe of the website
45. Try It: Screen Reader in action - accessible code 1. What do your drawings look like compared to what’s show here? 2. What was the difference between the first and second sound clip? 3. How was using a screen reader? Navigation / Vision Impairments
46. Example: Accessible and Non-accessible Code Navigation / Vision Impairments / No Vision Non-accessible code Accessible code
47. Accessibility-Friendly Techniques Determine the navigation order Navigation / Vision Impairments • How should someone using a screen reader experience the site? What’s the recommended path? (Not just the tab order) • Note: When modals open, the focus should be placed on the modal
48. Accessibility-Friendly Techniques Use Semantic elements and ARIA attributes to provide a better screen reader experience Navigation / Vision Impairments • ( Collaborate with team to determine: • What roles, properties, states exist? • What provides the best user experience? • How this design deliverable might look? • Avoid over labeling - it’s taxing to a person’s cognitive load
49. Accessibility-Friendly Techniques Determine the information hierarchy Navigation / Vision Impairments • Identify the heading levels early in design process • Use H1 once on a page, for the main title • Document them in a style guide for easy reference
50. Accessibility-Friendly Techniques Provide a consistent experience Navigation / Vision Impairments • People form mental models when navigating your site/product. Changing things up is disruptive and confusing. • Don’t skip heading levels • e.g., go from H2 to H5 without H3 and H4 in between
51. Tools Navigation order design document Navigation / Vision Impairments • How should one navigate through a screen/ feature? • Consider where this information lives • Style guide for common patterns • Specific deliverables for special features
52. Tools Prototype designs Usability testing Accessibility testing Navigation / Vision Impairments • Figure out how things really work • Can people really navigate and accomplish tasks? • Does the flow meet user expectations? • Is there redundancy when listening with a screen reader?
53. Tools NoCoffee Vision Simulator Navigation / Vision Impairments Chrome extension that simulates different vision impairments
54. Tools WAVE Tool Navigation / Vision Impairments WAVE Tool is an accessibility checker for web developers. It’s a good way to see if you met accessibility criteria. Available as an online tool and Chrome/Firefox extension
55. Try It: Check a website for accessibility conformance 1. Visit: https:// wave.webaim.org/ 2. Type in a URL and view results Navigation / Vision Impairments
56. Comprehension
57. Comprehension Comprehension • Ability to understand something • Understanding different types of media: images, text, video, audio • Comprehension can be affected by: • Visual impairments • Cognitive impairments Basics
58. Comprehension of Images (Color blindness)
59. Color Blindness Comprehension of Images / Vision Impairments / Color Blindness • Difficulty identifying items by color • Difficulty distinguishing items from lack of contrasting colors What is it? • The lack of ability to see certain colors, which means your color spectrum is narrowed. How it affects people
60. Example: Contrast Comprehension of Images / Vision Impairments / Color Blindness Which toggle is “on”? Achromatopsia color blindness Normal Vision
61. Example: Color-only Differentiator Comprehension of Images / Vision Impairments / Color Blindness Normal Vision Achromatopsia color blindness Which toggle is “on”?
62. Accessibility-Friendly Techniques Provide enough color contrast Comprehension of Images / Vision Impairments / Color Blindness WCAG 2.0 • Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.* • Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. *Large text • 14+ point and bold • 18+ point
63. Accessibility-Friendly Techniques Use more than one visual treatment to distinguish elements Comprehension of Images / Vision Impairments / Color Blindness • Color • Shapes • Pattern • Words An update is available. This field is required. Your purchase was successful!
64. Example: Accessible Visual Element Comprehension of Images / Vision Impairments / Color Blindness Normal Vision Achromatopsia color blindness Which toggle is “on”? Bad Example Good Example
65. Tools Contrast Checker: Colour Contrast Analyser Comprehension of Images / Vision Impairments / Color Blindness • Checks contrast between two colors • Available for Mac, Windows (free)
66. Tools Accessible Color Palette Comprehension of Images / Vision Impairments / Color Blindness • Include one in your style guide
67. Tools Sketch Plugin: Stark Comprehension of Images / Vision Impairments / Color Blindness • Checks contrast between two layers • Simulates impairments • GetStark.co (free)
68. Tools Sketch Plugin: Color Contrast Analyser Comprehension of Images / Vision Impairments / Color Blindness • Checks contrast between two layers • Pro: Accounts for font size • Con: Results disappear • http://sketchapp.rocks/plugins/color- contrast-analyser/ (free)
69. Comprehension of Images (Partial to No Vision)
70. Vision Impairments Comprehension of Images / Vision Impairments / Partial to No Vision • Not sure what is displayed on the screen • Could be missing key information • Need to rely on a screen reader Examples • Presbyopia - vision impairment with old age • Partial vision loss • No vision How it affects people
71. Try It: No Vision Simulation 1. Close your eyes Comprehension of Images / Vision Impairments / Partial to No Vision
72. Available Assistive Tech Comprehension of Images / Vision Impairments / Partial to No Vision Alternative Text (“Alt text”) • # Alternative text (or “alt text) is a text description of non-text content. • Screen readers read alt text to the user so they can get a description of what is being displayed
73. Try It: Writing alt text 1. Write alt text for the animate gif Comprehension of Images / Vision Impairments / Partial to No Vision Beginner’s Yoga Class Have you tried yoga and failed? We’ll teach you how to do yoga properly! Classes begin June 1st at Awesome Yoga Studio.
74. Try It: Writing alt text 1. Write alt text for the animate gif Comprehension of Images / Vision Impairments / Partial to No Vision • Good: Animation of a sloth trying to do yoga but falling over • Bad: Sloth • Bad: Animated gif • Bad: There’s a sloth covered in algae on the street. He’s stretching, but he falls over. There’s a car behind him. There’s a label that says MakeAGIF.com. Beginner’s Yoga Class Have you tried yoga and failed? We’ll teach you how to do yoga properly! Classes begin June 1st at Awesome Yoga Studio.
75. Try It: Writing alt text 1. Write alt text for this chart Comprehension of Images / Vision Impairments / Partial to No Vision Bitcoin’s value has steadily increased since June 2017, but peaked in December at over $19K each. It sharply dropped in February 2018 to roughly half that value.
76. Accessibility-Friendly Techniques Alt text best practices Comprehension of Images / Vision Impairments / Partial to No Vision • 60-80 characters long • Omit “Image of” • Describe only what’s necessary • What is the intent of this image? • It’s intent isn’t always the literal meaning (e.g., “animated gif”, “sloth”) • For longer descriptions: • Use the “longdesc” attribute • Provide a full-text alternative
77. Accessibility-Friendly Techniques Leverage component libraries Comprehension of Images / Vision Impairments / Partial to No Vision • Document alt text in your component/pattern library • List cases when they’re not used • SVGs can have alt text • Emojis can be read by some screen readers
78. Comprehension of Text (Cognitive impairments)
79. Cognitive Impairments Comprehension of Text • Difficulty understanding • Cognitive overload (also goes for those using screen readers) Examples • Traumatic brain injury • Side effects from chemo treatments • Reading in a second language How it affects people
80. Try It: Comprehending text Read the text Comprehension of Text / Comprehension Impairments Before: Lead in Water Infants and children who drink water containing lead in excess of the action level could experience delays in their physical or mental development. Children could show slight deficits in attention span and learning abilities. Adults who drink this water over many years could develop kidney problems or high blood pressure. After: Lead in Water Lead in drinking water can make you sick. Here are some possible health effects of high lead levels in your drinking water: Children: • Delayed growth • Learning disabilities • Short attention span Adults: • Kidney problems • High blood pressure Credit: Sample from PlainLanguage.gov
81. Accessibility-Friendly Techniques Write in plain language Comprehension of Text / Comprehension Impairments • Reduces cognitive load - Easier for everyone! • Easier to localize • Grade level should be based on your user base
82. Accessibility-Friendly Techniques Use headings, numbered/bulleted lists, shorter sentences Comprehension of Text / Comprehension Impairments • Helps people organize information as they consume it • Makes content scannable • Use semantic elements
83. Tools PlainLanguage.gov Comprehension of Text / Comprehension Impairments Supports the Plain Writing Act of 2010, which requires federal agencies to use clear, understandable language for public communication
84. Tools Hemingway App Comprehension of Text / Comprehension Impairments • Web app (http://www.hemingwayapp.com/), free • Desktop app (Mac, Windows) for $20
85. Tools Grammarly Comprehension of Text / Comprehension Impairments • Web app: https://app.grammarly.com/ • Free and paid plans • Copying & pasting can mess with code • Chrome extension - a bit taxing to your computer
86. Tools Adobe Acrobat Pro Comprehension of Text / Comprehension Impairments • Tagging tool • Accessibility checker
87. Comprehension of Audio & Video
 (Hearing and Vision impairments)
88. Hearing and Vision Impairments Comprehension of Video / Hearing and Vision Impairments • Can’t see what’s going on • Can’t hear dialogue, music that sets the tone, sound cues Examples • Vision impairments • Blindness • Hearing impairments • No hearing • Watching foreign-language film • Being in a noisy environment How it affects people
89. Available Assistive Tech Comprehension of Video / Hearing and Vision Impairments Closed captioning (video) Transcript (audio) Video description - # includes a transcript of the dialog, but also describes what’s going on
90. Accessibility-Friendly Techniques Provide alternatives Comprehension of Video / Hearing and Vision Impairments • Transcript • Video description • Other written content that’s equivalent • e.g., a video tutorial might have a corresponding knowledge base article
91. Building Accessibility Into Your Process
92. Building it into your process Building Accessibility Into Your Process Start with low- hanging fruit • Alt text • Color palette • Gradually work in more accessibility
93. Building it into your process • ( Collaborate with cross-functional teammates • Create design deliverables that everyone wants to use • Leverage existing tools • Style guide, component library, UI kit Make it easy Building Accessibility Into Your Process
94. Building it into your process Make it a habit • Install and use some of the tools from today • Review concepts early on with your peers - getting feedback from all parties is helpful • Make accessibility part of your design deliverable • Share this presentation Building Accessibility Into Your Process
95. Building it into your process Test with real users • If possible, test with those who use assistive tech Building Accessibility Into Your Process
96. Summary Outro • Obtained a high-level overview of accessibility from a UX perspective • Got a sense of: • Impairments • Assistive tech (AT) • Good and bad UX examples • Saw what tools and resources are available to help you • Learned where you can add accessibility into your / your team’s process • Inspired to learn more about the details of accessibility We did it!
97. Questions • Slides: http://bit.ly/design4access • Resources: http://bit.ly/design4access-resources • Let’s chat in Slack!: #design4access Michelle Chin @soysaucechin