Accessibility By Design

From a talk given at Inclusive Design 24 for Global Accessibility Awareness Day #GAAD

Transcript

1. Accessibility By Design 1 Laura Kalbag @laurakalbag Ind.ie @indie
4. 4 ★ we don’t understand who we’re trying to help ★ we’re not sure what to do ★ it’s hard, and there’s too much to think about
6. 6 EASY HARD my work
7. 7 EASY HARD our project
8. 8 EASY HARD our project
9. 9 EASY HARD our project everything else
10. 10 EASY HARD Developer A Developer B
11. 11 EASY HARD Content Strategist A Content Strategist B
12. 12 EASY HARD Designer A Designer B
13. 13 EASY HARD
14. 14 EASY HARD
15. Give a copy writer an alt attribute and they’ll have a more accessible image. Teach a copy writer how write alt attributes, and they’ll have accessible images for a lifetime. 15
18. Aesthetics are often even the enemy of accessibility, how can we change that? 18
19. Differences between design, decoration and aesthetics 19
20. Designer 20
21. “Visual Designer” 21
22. Aesthetics 22
23. Aesthetics isn’t just decoration 23
24. Adding pretty bits to a site won't make it a better experience. It’ll just make it an awful experience with bells on. 24
25. Person who designs ≠ Designer 25
26. Design is a problem-solving practice 26
27. Every decision we make that has an impact on the final product is design. 27
28. What makes the difference between pretty effective and just pretty? 28
29. Visual communication: ★ draws people in ★ assists understanding ★ encourages response 29
30. Aesthetics 30 typography colour layout form
31. Aesthetics 31 typography colour layout form
32. Superficial design 32
33. Anti-accessibility aesthetic trends 33
34. 34 Four Years of Trends in Web Design
35. 2012 35
36. 2012 Year of the Grid System 36
37. 37 2012: grid frameworks
38. 2012 Year of the Sliders 38
39. 39 2012: “sliders”
40. 2013 40
41. 2013 Year of Parallax 41
42. 42 2013: parallax sites
43. 2013 Year of Flat Design 43
44. 44 2013: flat design
45. 2014 45
46. 2014 Year of the Video Background 46
47. 47 2014: video backgrounds
48. 2015 ?? 48
49. Constraints 49
50. “Design depends largely on constraints” 50 — Charles Eames Photograph by Rama, Wikimedia Commons, Cc-by-sa-2.0-fr
51. 51 Eames House by IK's World Trip on Flickr
52. Project Constraints 52
53. Medium/Technology Constraints 53
54. Audience Constraints 54
55. Audience Constraints/ constraints through convention 55
56. Time Constraints 56
57. Budget Constraints 57
58. “We don’t have enough time/money to make our site accessible” 58
59. Accessibility as a core constraint 59
60. Accessibility vs web performance 60
61. 61 Core constraints: ★ Project constraints ★ Medium/technology constraints ★ Audience constraints ★ Time constraints ★ Budget constraints ★ Accessibility constraints
62. Designers understand constraints 62
63. Aesthetic design and the accessibility constraints 63
64. Typography 64
65. The technical 65
66. 66 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outfit called In The Pink. Following an altercation between the rival groups over communal dressing rooms, the four decided to form a new band together. Typeface: Museo Sans
67. 67 Typeface: Museo Sans
68. The practical 68
69. Remember that typography exists to represent content 69
70. 70 Extreme was formed in Malden, Massachusetts, in 1985. V ocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Typeface top: Blackoak Std. Typeface bottom: Heinemann
71. 71 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Typeface: Brandon Text at 10px, 12px, 18px and 24px Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful. Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream ("Extreme" is a derivation of Cherone and Geary's former band "The Dream", meaning "Ex-Dream"). Guitarist Nuno Bettencourt was in a band called Sinful.
72. 72 Extreme was formed in Malden, Massachusetts, in 1985. Vocalist Gary Cherone and drummer Paul Geary were in a band called The Dream (“Extreme” is a derivation of Cherone and Geary's former band “The Dream”, meaning “Ex-Dream”). Guitarist Nuno Bettencourt was in a band called Sinful, and bassist Pat Badger was playing with a Berklee-based outfit called In The Pink. Typeface: Trade Gothic
73. 73 Post-breakup (1997–2003) Gary Cherone: Van Halen and other projects On the recommendation of former Extreme manager Ray Danniels, in 1996, Gary Cherone joined one of the world's most successful rock acts, Van Halen. During 1996, Van Halen's fan-base weathered the acrimonious departures of two of rock's most successful lead singers: first Sammy Hagar, who had fronted Van Halen since 1985, and then David Lee Roth, the band's original frontman, (1974-1985). Into this fractious, and very public situation entered Cherone, whom guitarist Eddie Van Halen later called a “musical soulmate.” In 1998, the Cherone-fronted Van Halen released Van Halen III. Typeface: Trade Gothic
74. 74 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. In July 2007 Bettencourt quit Satellite Party for the definite Extreme reunion with Gary Cherone and Pat Badger. On November 26, 2007, the band announced plans for a world tour in the summer of 2008 with King's X as well as a release date for their new album, Saudades de Rock, produced by Bettencourt. Kevin Figueiredo, who played with Bettencourt in DramaGods and Satellite Party, took over drum duties for the band. Original drummer Paul Geary would still remain involved with the band, albeit in a management position. Typeface: Brandon Text
75. Mon Plaisir Restaurant 75 Coco The Clown
76. Readability 76
77. 77 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Uniform texture Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Irregular texture Typeface top: Foundation Sans. Typeface bottom: Big Caslon
78. 78 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Not too light Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Not too heavy Typeface top: Freight Sans Light. Typeface bottom: Freight Sans Black
79. Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. 79 Too much contrast Typeface: Freight Display Black
80. 80 Extreme reformed for a short tour in 2004 playing in the Azores (August), in their hometown of Boston at the WAAF anniversary (Sept.19) as well as a few concerts in Japan (January 2005). After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Too many complex details Typeface: Giddyup Std
81. 81 After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon Fairly closed counters Open counters After a hiatus during 2005, the band returned in 2006 with the “classic” Pornograffitti line-up to do a small, three-show reunion tour through New England. Rococco Cocoon Typeface top: Embrionic. Typeface bottom: Museo Sans
82. Typefaces for cognition 82
83. 83 myfonts.com/fonts/fw-heinemann/heinemann/
84. Comic Sans 84 abcdefghijklmnopqrstuvwxyz myfonts.com/fonts/ascender/comic-sans/
85. 85 readregular.com/english/regular.html
86. 86 dyslexiefont.com/en/dyslexia-font/ gumroad.com/l/OpenDyslexic
87. Colour 87
88. 88 colour wheel hue brightness saturation colour spectrum
89. Mixing colour 89
90. Primary colours 90
91. Secondary colours 91
92. Tertiary colours 92
93. Looking at the colour wheel 93
94. Mapping colours to the colour wheel 94
95. 95 Mapping colours to the colour wheel
97. Picking colour palettes 97
98. analogous 98 complementary
99. Analogous 99
100. Complementary 100
101. Analogous + Complementary 101
102. Accessible Colours 102
103. The key to accessible colours is CONTRAST 103
104. 104 brightness saturation
105. 105 brightness Low contrast Low contrast High contrast High contrast 1.29:1 ✖ 1.29:1 ✖ 6.65:1 ✔ 8.53:1 ✔
106. 106 Low contrast Low contrast High contrast High contrast 1.27:1 ✖ 1.35:1 ✖ 6.41:1 ✔ 8.66:1 ✔ saturation
107. 107 Low contrast Low contrast 1.17:1 ✖ 1.51:1 ✖ saturation brightness High contrast High contrast 5.90:1 ✔ 12.53:1 ✔
108. 108 Extreme high contrast 15.24:1 ✔ Extreme high contrast 19.74:1 ✔
109. 109 High contrast 13.11:1 ✔ High contrast 13.97:1 ✔ brightness saturation
110. Accessibility and Branding 110
115. The earlier designers learn to consider accessibility, the less likely their work will be discarded in the future 115
116. Strategies for involving accessibility from the beginning of the design process 116
117. Understanding accessibility 117
118. Constraints 118
119. Sitting in on testing and focus groups 119
120. Being involved in human research 120
121. we need to encourage an ethical holistic approach to design 121
122. design without ethics is manipulation 122
123. 123 physiological safety love/belonging esteem self- actualization functional reliable usable pleasurable Tuesday, December 13, 11 blog.teamtreehouse.com/emotional-interface-design-the-gateway-to-passionate-users Aaron Walter’s remapping of Mazlow’s hierarchy of needs
124. decoration perpetuates the status quo; design alters it 124
125. private, secure, accessible and sustainable 125 respects human rights The 3 Rs of Ethical Design
126. functional, convenient and reliable private, secure, accessible and sustainable 126 respects human effort respects human rights The 3 Rs of Ethical Design
127. functional, convenient and reliable private, secure, accessible and sustainable 127 delightful respects human rights respects human effort respects human experience The 3 Rs of Ethical Design
128. NOT private, secure, accessible and sustainable 128 functional, convenient and reliable delightful respects human effort respects human experience does not respect human rights The 3 Rs of Ethical Design
129. Make accessibility more accessible 129
130. Accessibility as a constraint 130
131. Neither user experience nor accessibility can be ticked off using a checklist 131
132. 132 Laura Kalbag laurakalbag.com @laurakalbag ind.ie @indie