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 full-size slide

  2. 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 full-size slide

  3. 6
    EASY HARD
    my work

    View full-size slide

  4. 7
    EASY HARD
    our project

    View full-size slide

  5. 8
    EASY HARD
    our project

    View full-size slide

  6. 9
    EASY HARD
    our project
    everything else

    View full-size slide

  7. 10
    EASY HARD
    Developer A
    Developer B

    View full-size slide

  8. 11
    EASY HARD
    Content Strategist A
    Content Strategist B

    View full-size slide

  9. 12
    EASY HARD
    Designer A
    Designer B

    View full-size slide

  10. 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 full-size slide

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

    View full-size slide

  12. Differences between design,
    decoration and aesthetics
    19

    View full-size slide

  13. “Visual Designer”
    21

    View full-size slide

  14. Aesthetics
    22

    View full-size slide

  15. Aesthetics isn’t just decoration
    23

    View full-size slide

  16. 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 full-size slide

  17. Person who designs

    Designer
    25

    View full-size slide

  18. Design is a
    problem-solving
    practice
    26

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. Aesthetics
    30
    typography colour
    layout form

    View full-size slide

  23. Aesthetics
    31
    typography colour
    layout form

    View full-size slide

  24. Superficial design
    32

    View full-size slide

  25. Anti-accessibility
    aesthetic trends
    33

    View full-size slide

  26. 34
    Four Years of Trends in
    Web Design

    View full-size slide

  27. 2012
    Year of the Grid System
    36

    View full-size slide

  28. 37 2012: grid frameworks

    View full-size slide

  29. 2012
    Year of the Sliders
    38

    View full-size slide

  30. 39 2012: “sliders”

    View full-size slide

  31. 2013
    Year of Parallax
    41

    View full-size slide

  32. 42 2013: parallax sites

    View full-size slide

  33. 2013
    Year of Flat Design
    43

    View full-size slide

  34. 44 2013: flat design

    View full-size slide

  35. 2014
    Year of the Video Background
    46

    View full-size slide

  36. 47 2014: video backgrounds

    View full-size slide

  37. Constraints
    49

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Project Constraints
    52

    View full-size slide

  41. Medium/Technology
    Constraints
    53

    View full-size slide

  42. Audience Constraints
    54

    View full-size slide

  43. Audience Constraints/
    constraints through convention
    55

    View full-size slide

  44. Time Constraints
    56

    View full-size slide

  45. Budget Constraints
    57

    View full-size slide

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

    View full-size slide

  47. Accessibility as a
    core constraint
    59

    View full-size slide

  48. Accessibility
    vs
    web performance
    60

    View full-size slide

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

    View full-size slide

  50. Designers understand
    constraints
    62

    View full-size slide

  51. Aesthetic design and the
    accessibility constraints
    63

    View full-size slide

  52. Typography
    64

    View full-size slide

  53. The technical
    65

    View full-size slide

  54. 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 full-size slide

  55. 67 Typeface: Museo Sans

    View full-size slide

  56. The practical
    68

    View full-size slide

  57. Remember that typography
    exists to represent content
    69

    View full-size slide

  58. 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 full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

  61. 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 full-size slide

  62. 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 full-size slide

  63. Mon Plaisir Restaurant
    75
    Coco The Clown

    View full-size slide

  64. Readability
    76

    View full-size slide

  65. 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 full-size slide

  66. 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 full-size slide

  67. 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 full-size slide

  68. 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 full-size slide

  69. 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 full-size slide

  70. Typefaces for cognition
    82

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  75. 88
    colour wheel hue
    brightness
    saturation
    colour
    spectrum

    View full-size slide

  76. Mixing colour
    89

    View full-size slide

  77. Primary colours
    90

    View full-size slide

  78. Secondary colours
    91

    View full-size slide

  79. Tertiary colours
    92

    View full-size slide

  80. Looking at the colour wheel
    93

    View full-size slide

  81. Mapping colours to the colour wheel
    94

    View full-size slide

  82. 95
    Mapping colours to the colour wheel

    View full-size slide

  83. Picking colour palettes
    97

    View full-size slide

  84. analogous
    98
    complementary

    View full-size slide

  85. Complementary
    100

    View full-size slide

  86. Analogous + Complementary
    101

    View full-size slide

  87. Accessible Colours
    102

    View full-size slide

  88. The key to accessible colours is
    CONTRAST
    103

    View full-size slide

  89. 104
    brightness
    saturation

    View full-size slide

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

    1.29:1

    6.65:1

    8.53:1

    View full-size slide

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

    1.35:1

    6.41:1

    8.66:1

    saturation

    View full-size slide

  92. 107
    Low contrast
    Low contrast
    1.17:1

    1.51:1

    saturation
    brightness
    High contrast
    High contrast
    5.90:1

    12.53:1

    View full-size slide

  93. 108
    Extreme high contrast
    15.24:1

    Extreme high contrast
    19.74:1

    View full-size slide

  94. 109
    High contrast
    13.11:1

    High contrast
    13.97:1

    brightness
    saturation

    View full-size slide

  95. Accessibility and Branding
    110

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  98. Understanding accessibility
    117

    View full-size slide

  99. Constraints
    118

    View full-size slide

  100. Sitting in on testing
    and focus groups
    119

    View full-size slide

  101. Being involved in
    human research
    120

    View full-size slide

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

    View full-size slide

  103. design without ethics is
    manipulation
    122

    View full-size slide

  104. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  108. 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 full-size slide

  109. 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 full-size slide

  110. Make accessibility
    more accessible
    129

    View full-size slide

  111. Accessibility as a constraint
    130

    View full-size slide

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

    View full-size slide

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

    View full-size slide