Fostering Global Accessibility Through Design

BCUX Feb 9, 2021

Transcript

1. Fostering Global Accessibility through Design Ash Dzick
2. Ash Dzick
3. 1.7% People named “Ash Dzick” in WI
4. 0.00000017% People named “Ash Dzick” in WI
5. 328 million+ People in the U.S.
6. 7.67 billion+ People on Earth (and ISS)
7. About 15% of the world has some sort of disability.
8. About 15% of the world has some sort of disability. Many of these disabilities are not visible.
9. Common Disabilities Include… Tapping: Missing Limb Remembering: Alzheimers, Dementia Reading and Seeing: Blindness, Vision Loss Hearing: Deaf
10. … but anyone can have a disability at any time Holding Phone and Tapping: Broken or injured limb Remembering: Concussions and temporary memory loss Reading and Seeing: Eye surgeries, Cataracts, temporary vision loss Hearing: Ear infections, tinnitus (ear ringing)
11. … or even just a temporary situation. Holding Phone and Tapping: Holding an object, like a bag or laptop Remembering: Distracted by other people, really focused on their goal Reading and Seeing: Sunny day, glare Hearing: Wearing headphones, loud environment
12. Now, add in… Internationalization
13. Internationalization = Translation
14. Consider… Translations & Languages (length, LTF/RTL) Colors, Symbols, Visuals Date, Time, Measurement formats Compliance Reqs (GDPR)
15. Now, add in… Emerging Markets
16. 11% 0% 81% Developed 41% Developing Internet adoption is rising signi f icantly faster in developing countries.
17. Mobile Only Phones for under $300 Generally about 4 years behind phones in the US Above 80% are prepaid Unreliable battery
18. Unreliable Internet 3G is in ~30% of markets More than 10% of users are still on 2G Data can be up to 20% of monthly income
19. 1.25 Billion people who have come online for the f irst time ever
20. 187.5 Million of those people will have a disability
21. 1.15 billion 
 Total global audience with a disability
22. So how do you make an inclusive design for 1.15 billion people?
23. The best time to plant a tree was 20 years ago. The second best time is now. “ ”
24. Inclusion is a process.
25. Inclusive Design Process Empathize Create Iterate Test Research your user base Educate others Incorporate best practices over time Identify a high priority target Measure your compliance progress
26. Inclusive Design Process
27. Inclusive Design Process Research & Synthesis Concept & Prototype Design & Develop
28. Making a plan Add in extra time at the beginning (to learn!) 40% -> 10% Plan 2 to 3 sprints ahead Start small, grow over time The quick hits Learning Curve
29. The quick hits
30. 1. Convey meaning with more than just color.
33. Color Blindness is one issue.. 8% of men, up to 1% of women Usually Inherited Physical or chemical damage to the eye More likely to be caucasian Can also develop with age
34. They’re all the same inner box color. … amongst many.
35. They’re all the same inner box color. Our brain looks for contrasts
36. This graph works even solely in black because it’s also using direction to encode
37. Trello Uses Patterns!
38. Two Dots Uses Patterns!
39. Color is not universal. The “feeling” of a color varies (what color for a funeral?) The names of colors vary Even the grouping of colors varies
41. 2. Plain language is your new best friend.
42. Most refractory coatings to date exhibit a lack of reliability when subject to the impingement of entrained particulate matter in the propellant stream under extended f iring durations. “ ”
43. Most refractory coatings to date exhibit a lack of reliability when subject to the impingement of entrained particulate matter in the propellant stream under extended f iring durations. “ ” 🤨
44. The exhaust gas eventually damages the coating of most existing ceramics. “ ”
45. (airplane) Where is the airplane? Another beer, please? The boy lives in the house.
46. Plain language will bene f it: Anyone with a cognitive impairment Attention-de fi cient disorders Learning disabilities Children Non-native speakers College kids on their second forth cup of co ff ee Anyone who is busy putting all of their cognitive load into understanding whatever is happening around us even though its been like a year and we should probably be used to it but personally I am not and I really really would like to be able to leave the house and go somewhere sometime plz make it stop can it at least be better by summer???
47. Plain language is dif f icult to master.
48. Real Example that I wrote! This course will introduce students to concepts of psychology and their application to digital design. Students will learn the basics of cognitive psychology, including concepts of perception, attention, memory, problem solving, expertise, reasoning, and decision-making. Students will also be introduced to concepts of social psychology that apply to design, including persuasion, attitudes, and behaviors. The course will culminate with a project that incorporates the psychological concepts in digital design.
49. Real Example that I wrote! This course will introduce students to concepts of psychology and their application to digital design. Students will learn the basics of cognitive psychology, including concepts of perception, attention, memory, problem solving, expertise, reasoning, and decision-making. Students will also be introduced to concepts of social psychology that apply to design, including persuasion, attitudes, and behaviors. The course will culminate with a project that incorporates the psychological concepts in digital design. This course introduces students to psychology's application to digital design. Students learn the basics of cognitive psychology, including: perception, attention, memory and expertise. Students are also introduced to social psychology concepts of persuasion, attitude and behavior. 
 
 This course culminates with a project analyzing designs for class concepts.
50. Real Example that I wrote! This course will introduce students to concepts of psychology and their application to digital design. Students will learn the basics of cognitive psychology, including concepts of perception, attention, memory, problem solving, expertise, reasoning, and decision-making. Students will also be introduced to concepts of social psychology that apply to design, including persuasion, attitudes, and behaviors. The course will culminate with a project that incorporates the psychological concepts in digital design. This course introduces students to psychology's application to digital design. Students learn the basics of cognitive psychology, including: perception, attention, memory and expertise. Students are also introduced to social psychology concepts of persuasion, attitude and behavior. 
 
 This course culminates with a project analyzing designs for class concepts. X Passive voice X Verbose X Jargon ✓ Active voice ✓ Succinct X Still some jargon :( Bonus whitespace
51. 3. Add some whitespace…
52. 4. Add some whitespace… And then add more.
53. Languages very in length… Sprog varierer i længde. Языки различаются по длине ⾔語の⾧さはさまざまです。 Kielet vaihtelevat pituudeltaan. Sprachen variieren in der Länge. Các ngôn ngữ có độ dài khác nhau. Os idiomas variam em comprimento.
54. … and in direction. ןכרואב תונוש תופשה גנעל ןיא ןטַייב ןכַארפש لوطلا يف تاغللا فلتخت. تسا توافتم اهنابز لوط Ziman bi dirêjahiya xwe diguherin Sprog varierer i længde. Языки различаются по длине ⾔語の⾧さはさまざまです。 Sprachen variieren in der Länge. Các ngôn ngữ có độ dài khác nhau. Os idiomas variam em comprimento. Хэлний урт нь харилцан адилгүй байдаг.
55. Whitespace helps text readability. Apollo 14 was the eighth crewed mission in the United States Apollo program, the third to land on the Moon, and the fi rst to land in the lunar highlands. It was the last of the "H missions," landings at speci fi c sites of scienti fi c interest on the Moon for two-day stays with two lunar extravehicular activities (EVAs or moonwalks). The mission was originally scheduled for 1970, but was postponed because of the investigation following the failure of Apollo 13 to reach the Moon's surface, and the need for modi fi cations to the spacecraft as a result. Commander Alan Shepard, Command Module Pilot Stuart Roosa, and Lunar Module Pilot Edgar Mitchell launched on their nine-day mission on Sunday, January 31, 1971, at 4:03:02 p.m. EST, following a weather delay of forty minutes and two seconds. En route to the lunar landing, the crew overcame a series of malfunctions that might have resulted in a second consecutive aborted mission, and possibly, the premature end of the Apollo program. Shepard and Mitchell made their lunar landing on February 5 in the Fra Mauro formation – originally the target of Apollo 13. During the two walks on the surface, 94.35 pounds (42.80 kg) of Moon rocks were collected, and several scienti fi c experiments were deployed. To the dismay of some geologists, Shepard and Mitchell did not reach the rim of Cone crater as had been planned, though they came close. In Apollo 14's most famous incident, Shepard hit two golf balls he had brought with him with a makeshift club. While Shepard and Mitchell were on the surface, Roosa remained in lunar orbit aboard the Command and Service Module, performing scienti fi c experiments and photographing the Moon, including the landing site of the future Apollo 16 mission. He took several hundred seeds on the mission, many of which were germinated on return, resulting in the so-called Moon trees, that were widely distributed in the following years. After lifto ff from the surface and a successful docking, the spacecraft was fl own back to Earth where the three astronauts splashed down safely in the Paci fi c Ocean on February 9.
56. Whitespace helps text readability. Apollo 14 was the eighth crewed mission in the United States Apollo program, the third to land on the Moon, and the fi rst to land in the lunar highlands. It was the last of the "H missions," landings at speci fi c sites of scienti fi c interest on the Moon for two-day stays with two lunar extravehicular activities (EVAs or moonwalks). The mission was originally scheduled for 1970, but was postponed because of the investigation following the failure of Apollo 13 to reach the Moon's surface, and the need for modi fi cations to the spacecraft as a result. Commander Alan Shepard, Command Module Pilot Stuart Roosa, and Lunar Module Pilot Edgar Mitchell launched on their nine-day mission on Sunday, January 31, 1971, at 4:03:02 p.m. EST, following a weather delay of forty minutes and two seconds. En route to the lunar landing, the crew overcame a series of malfunctions that might have resulted in a second consecutive aborted mission, and possibly, the premature end of the Apollo program. Shepard and Mitchell made their lunar landing on February 5 in the Fra Mauro formation – originally the target of Apollo 13. During the two walks on the surface, 94.35 pounds (42.80 kg) of Moon rocks were collected, and several scienti fi c experiments were deployed. To the dismay of some geologists, Shepard and Mitchell did not reach the rim of Cone crater as had been planned, though they came close. In Apollo 14's most famous incident, Shepard hit two golf balls he had brought with him with a makeshift club. While Shepard and Mitchell were on the surface, Roosa remained in lunar orbit aboard the Command and Service Module, performing scienti fi c experiments and photographing the Moon, including the landing site of the future Apollo 16 mission. He took several hundred seeds on the mission, many of which were germinated on return, resulting in the so-called Moon trees, that were widely distributed in the following years. After lifto ff from the surface and a successful docking, the spacecraft was fl own back to Earth where the three astronauts splashed down safely in the Paci fi c Ocean on February 9.
57. Cramped Text is hard to read for people with: Dyslexia ADD ADHD Cataracts Vision Problems Older displays Non-native speakers Me :)
58. 100% 
 People you help by adding more whitespace
59. 150% 
 Approximate line-height required for maximum readability
60. Whitespace can also help to: Give prominence to anything important Focus fovea Reduce cognitive load (helpful for people with mental impairments) Reduce attention load
61. 4. Understand and apply accessibility guidelines.
62. 23 Countries + EU have some sort of required accessibility compliance
63. that’s too many laws
64. whew. Total Laws to worry about 24 20 Based on WCAG 1.0 or 2.0 4 Finland, Japan, New Zealand, Sweden ~90% overlap with WCAG 2.0
65. We design to embrace the things that make us human. It’s what drives us to create a world that makes lives better. The result is tech that’s inclusive. “ ” Microsoft on accessibility
66. Questions? 1. Slides: speakerdeck.com/ashleydzick 2. Brew city slack! bit.ly/2YZjl9y 3. Another meetup! March 11, brewcityux.com
67. Appendix A Citations
68. Data Sources People on earth: https://en.wikipedia.org/wiki/World_population Number of people with a disability: https://www.who.int/news-room/fact-sheets/detail/ disability-and-health Internet use in emerging markets: https://www.pewresearch.org/global/2019/02/05/digital- connectivity-growing-rapidly-in-emerging-economies/ WCAG guidelines https://www.w3.org/WAI/standards-guidelines/wcag/ Readability lengths: https://www.justinmind.com/blog/best-ux-practices-for-line-spacing/ Language lengths: https://www.andiamo.co.uk/resources/expansion-and-contraction- factors/ Color Terms: https://press.uchicago.edu/ucp/books/book/distributed/B/bo3643648.html
69. Images Alto: https://www.thoughtco.com/why-does-alto-mean-stop-3971914 Tope: https://www.tripsavvy.com/what-is-a-tope-1589140 Design Squiggle: https://thedesignsquiggle.com/ Red and Green graph: https://www.tableau.com/about/blog/2016/4/examining- data-viz-rules-dont-use-red-green-together-53463 National Gas Prices: https://www.businessinsider.com/gas-prices-county-2014-8
70. Design The human illustrations are OpenPeeps, other illustrations by myself This font is Candela (highly recommend!) Contrasts checked through SimDaltonism & Colour Contrast Analyzer
71. Appendix B Accessibility Resources
72. Who makes the rules? Web Accessibility Initiative (WAI) of World Wide Web Consortium (W3C) Guidelines for inclusive design In fl uence accessibility and disability law Both website and mobile apps Perceivable, Operable, Understandable, Robust (POUR)
73. Resources: Perceivable Color Oracle - colorblindness simulator 
 https://colororacle.org/ 
 
 Colour Contrast Analyzer 
 https://developer.paciellogroup.com/resources/contrastanalyser/ 
 
 Creating a Perceivable Site 
 https://webaim.org/articles/pour/perceivable
74. Resources: Operable Epilepsy Analysis Tool 
 https://trace.umd.edu/peat 
 
 Creating an Operable Site 
 https://webaim.org/articles/pour/operable
75. Resources: Understandable Plain Language Guidelines 
 https://plainlanguage.gov/guidelines/ 
 
 Creating an Understandable Site 
 https://webaim.org/articles/pour/understandable
76. Resources: Robust I Used the Web for a Day Using a Screen Reader 
 https://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/ 
 
 VoiceOver (Mac) screen reader 
 https://www.apple.com/accessibility/mac/vision/ 
 
 NVDA screen reader 
 https://www.nvaccess.org/ 
 
 JAWS screen reader 
 https://www.freedomscienti fi c.com/products/software/jaws/
77. Articles Introduction to Web Accessibility 
 https://www.w3.org/WAI/fundamentals/accessibility-intro/ 
 
 What is Title III? 
 https://adata.org/what-title-iii
78. Books A Web For Everyone - Designing Accessible User Experiences 
 Sarah Horton & Whitney Quesenbery, Rosenfeld Media, 2013 
 https://rosenfeldmedia.com/books/a-web-for-everyone/ Accessibility For Everyone 
 Laura Kalbag 
 https://abookapart.com/products/accessibility-for-everyone 
 
 Accessibility Handbook - Making 508 Compliant Websites 
 Katie Cunningham 
 http://shop.oreilly.com/product/0636920024514.do
79. Appendix C Internationalization
80. Articles Internationalization versus localization: https://uxknowledgebase.com/ internationalization-localization-d84795b7962c Design for internationalization: https://medium.com/dropbox-design/design-for- internationalization-24c12ea6b38f Shopify on internationalization: https://ux.shopify.com/tagged/internationalization Dates & Times: ibm.com/support/knowledgecenter/SSLVMB_26.0.0/ statistics_reference_project_ddita/spss/base/ syn_date_and_time_date_time_formats.html