Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accessibility By Design

Accessibility By Design

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

Laura Kalbag

May 21, 2015
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

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

    View Slide

  2. 2

    View Slide

  3. 3

    View Slide

  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

    View Slide

  5. 5

    View Slide

  6. 6
    EASY HARD
    my work

    View Slide

  7. 7
    EASY HARD
    our project

    View Slide

  8. 8
    EASY HARD
    our project

    View Slide

  9. 9
    EASY HARD
    our project
    everything else

    View Slide

  10. 10
    EASY HARD
    Developer A
    Developer B

    View Slide

  11. 11
    EASY HARD
    Content Strategist A
    Content Strategist B

    View Slide

  12. 12
    EASY HARD
    Designer A
    Designer B

    View Slide

  13. 13
    EASY HARD

    View Slide

  14. 14
    EASY HARD

    View Slide

  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

    View Slide

  16. 16

    View Slide

  17. 17

    View Slide

  18. Aesthetics are often even the enemy of
    accessibility, how can we change that?
    18

    View Slide

  19. Differences between design,
    decoration and aesthetics
    19

    View Slide

  20. Designer
    20

    View Slide

  21. “Visual Designer”
    21

    View Slide

  22. Aesthetics
    22

    View Slide

  23. Aesthetics isn’t just decoration
    23

    View Slide

  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

    View Slide

  25. Person who designs

    Designer
    25

    View Slide

  26. Design is a
    problem-solving
    practice
    26

    View Slide

  27. Every decision we make that has an impact
    on the final product is design.
    27

    View Slide

  28. What makes the difference
    between pretty effective
    and just pretty?
    28

    View Slide

  29. Visual communication:
    ★ draws people in
    ★ assists understanding
    ★ encourages response
    29

    View Slide

  30. Aesthetics
    30
    typography colour
    layout form

    View Slide

  31. Aesthetics
    31
    typography colour
    layout form

    View Slide

  32. Superficial design
    32

    View Slide

  33. Anti-accessibility
    aesthetic trends
    33

    View Slide

  34. 34
    Four Years of Trends in
    Web Design

    View Slide

  35. 2012
    35

    View Slide

  36. 2012
    Year of the Grid System
    36

    View Slide

  37. 37 2012: grid frameworks

    View Slide

  38. 2012
    Year of the Sliders
    38

    View Slide

  39. 39 2012: “sliders”

    View Slide

  40. 2013
    40

    View Slide

  41. 2013
    Year of Parallax
    41

    View Slide

  42. 42 2013: parallax sites

    View Slide

  43. 2013
    Year of Flat Design
    43

    View Slide

  44. 44 2013: flat design

    View Slide

  45. 2014
    45

    View Slide

  46. 2014
    Year of the Video Background
    46

    View Slide

  47. 47 2014: video backgrounds

    View Slide

  48. 2015
    ??
    48

    View Slide

  49. Constraints
    49

    View Slide

  50. “Design depends largely on
    constraints”
    50
    — Charles Eames
    Photograph by Rama, Wikimedia Commons, Cc-by-sa-2.0-fr

    View Slide

  51. 51 Eames House by IK's World Trip on Flickr

    View Slide

  52. Project Constraints
    52

    View Slide

  53. Medium/Technology
    Constraints
    53

    View Slide

  54. Audience Constraints
    54

    View Slide

  55. Audience Constraints/
    constraints through convention
    55

    View Slide

  56. Time Constraints
    56

    View Slide

  57. Budget Constraints
    57

    View Slide

  58. “We don’t have enough time/money
    to make our site accessible”
    58

    View Slide

  59. Accessibility as a
    core constraint
    59

    View Slide

  60. Accessibility
    vs
    web performance
    60

    View Slide

  61. 61
    Core constraints:
    ★ Project constraints
    ★ Medium/technology constraints
    ★ Audience constraints
    ★ Time constraints
    ★ Budget constraints
    ★ Accessibility constraints

    View Slide

  62. Designers understand
    constraints
    62

    View Slide

  63. Aesthetic design and the
    accessibility constraints
    63

    View Slide

  64. Typography
    64

    View Slide

  65. The technical
    65

    View Slide

  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

    View Slide

  67. 67 Typeface: Museo Sans

    View Slide

  68. The practical
    68

    View Slide

  69. Remember that typography
    exists to represent content
    69

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  75. Mon Plaisir Restaurant
    75
    Coco The Clown

    View Slide

  76. Readability
    76

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  82. Typefaces for cognition
    82

    View Slide

  83. 83 myfonts.com/fonts/fw-heinemann/heinemann/

    View Slide

  84. Comic Sans
    84
    abcdefghijklmnopqrstuvwxyz
    myfonts.com/fonts/ascender/comic-sans/

    View Slide

  85. 85 readregular.com/english/regular.html

    View Slide

  86. 86 dyslexiefont.com/en/dyslexia-font/ gumroad.com/l/OpenDyslexic

    View Slide

  87. Colour
    87

    View Slide

  88. 88
    colour wheel hue
    brightness
    saturation
    colour
    spectrum

    View Slide

  89. Mixing colour
    89

    View Slide

  90. Primary colours
    90

    View Slide

  91. Secondary colours
    91

    View Slide

  92. Tertiary colours
    92

    View Slide

  93. Looking at the colour wheel
    93

    View Slide

  94. Mapping colours to the colour wheel
    94

    View Slide

  95. 95
    Mapping colours to the colour wheel

    View Slide

  96. 96

    View Slide

  97. Picking colour palettes
    97

    View Slide

  98. analogous
    98
    complementary

    View Slide

  99. Analogous
    99

    View Slide

  100. Complementary
    100

    View Slide

  101. Analogous + Complementary
    101

    View Slide

  102. Accessible Colours
    102

    View Slide

  103. The key to accessible colours is
    CONTRAST
    103

    View Slide

  104. 104
    brightness
    saturation

    View Slide

  105. 105
    brightness
    Low contrast
    Low contrast
    High contrast
    High contrast
    1.29:1

    1.29:1

    6.65:1

    8.53:1

    View Slide

  106. 106
    Low contrast
    Low contrast
    High contrast
    High contrast
    1.27:1

    1.35:1

    6.41:1

    8.66:1

    saturation

    View Slide

  107. 107
    Low contrast
    Low contrast
    1.17:1

    1.51:1

    saturation
    brightness
    High contrast
    High contrast
    5.90:1

    12.53:1

    View Slide

  108. 108
    Extreme high contrast
    15.24:1

    Extreme high contrast
    19.74:1

    View Slide

  109. 109
    High contrast
    13.11:1

    High contrast
    13.97:1

    brightness
    saturation

    View Slide

  110. Accessibility and Branding
    110

    View Slide

  111. 111

    View Slide

  112. 112

    View Slide

  113. 113

    View Slide

  114. 114

    View Slide

  115. The earlier designers learn to consider
    accessibility, the less likely their work will
    be discarded in the future
    115

    View Slide

  116. Strategies for involving
    accessibility from the
    beginning of the
    design process
    116

    View Slide

  117. Understanding accessibility
    117

    View Slide

  118. Constraints
    118

    View Slide

  119. Sitting in on testing
    and focus groups
    119

    View Slide

  120. Being involved in
    human research
    120

    View Slide

  121. we need to encourage an ethical
    holistic approach to design
    121

    View Slide

  122. design without ethics is
    manipulation
    122

    View Slide

  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

    View Slide

  124. decoration perpetuates the status quo;
    design alters it
    124

    View Slide

  125. private, secure,
    accessible and sustainable
    125
    respects human rights
    The 3 Rs of Ethical Design

    View Slide

  126. functional,
    convenient and reliable
    private, secure,
    accessible and sustainable
    126
    respects human effort
    respects human rights
    The 3 Rs of Ethical Design

    View Slide

  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

    View Slide

  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

    View Slide

  129. Make accessibility
    more accessible
    129

    View Slide

  130. Accessibility as a constraint
    130

    View Slide

  131. Neither user experience nor accessibility
    can be ticked off using a checklist
    131

    View Slide

  132. 132
    Laura Kalbag
    laurakalbag.com @laurakalbag ind.ie @indie

    View Slide