Accessibility By Design

Accessibility By Design

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

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

May 21, 2015
Tweet

Transcript

  1. Accessibility By Design 1 Laura Kalbag @laurakalbag Ind.ie @indie

  2. 2

  3. 3

  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
  5. 5

  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
  16. 16

  17. 17

  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

  96. 96

  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

  111. 111

  112. 112

  113. 113

  114. 114

  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