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

Designing for Accessibility

Laura Kalbag
November 11, 2014

Designing for Accessibility

From a talk given at dsgndayl in November, 2014

Laura Kalbag

November 11, 2014
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. Designing for accessibility
    @laurakalbag laurakalbag.com
    AKA universal design AKA inclusive design

    View Slide

  2. View Slide

  3. =
    =

    View Slide

  4. designing for accessibility isn’t
    just for “designers”

    View Slide

  5. T

    View Slide

  6. Accessible websites are the
    responsibility of the whole team

    View Slide

  7. What is accessibility?

    View Slide

  8. Accessibility is the degree to which a website is
    available to as many people as possible.

    View Slide

  9. Empathy is integral to
    designing websites

    View Slide

  10. It’s easier to create products for people
    who have the same needs as us

    View Slide

  11. Successful products are created when
    someone is “scratching their own itch”

    View Slide

  12. The problem with creating products to
    suit our own needs is that the tech
    industry is not diverse

    View Slide

  13. diversity is the characteristics that make
    us up as individuals

    View Slide

  14. and all of these characteristics give us
    unique needs, and unique outlooks

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. the more diverse a team, the more likely
    their product is to solve and serve the
    problems of a diverse audience

    View Slide

  19. If we want accessible websites, we must
    have diverse teams

    View Slide

  20. accessibility isn’t just about screen readers

    View Slide

  21. View Slide

  22. View Slide

  23. Shiny Shiny

    View Slide

  24. Is it because we don’t understand who we’re
    trying to help?

    View Slide

  25. Is it because we just don’t know what to do?

    View Slide

  26. Is it because it’s too hard, and there’s too much
    to think about?

    View Slide

  27. I’ve not got the answers

    View Slide

  28. It’s not fair if the web isn’t accessible

    View Slide

  29. BROWSERS MAKE SITES ACCESSIBLE
    BY DEFAULT, WE JUST BREAK THEM
    WITH BAD MARKUP AND CONTENT

    View Slide

  30. View Slide

  31. Design decisions made in the name of
    accessibility will largely benefit everyone.

    View Slide

  32. The business case
    £€$

    View Slide

  33. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    Improvements in accessibility doubled Legal and
    General’s life insurance sales online

    View Slide

  34. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    Improvements in accessibility increased Tesco’s
    grocery home delivery sales by £13M in 2005

    View Slide

  35. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    Improvements in accessibility increased
    Virgin.net sales by 68%

    View Slide

  36. €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€

    View Slide

  37. The four (main) types of disability that
    affect use of the web

    View Slide

  38. Visual

    View Slide

  39. Hearing

    View Slide

  40. Motor

    View Slide

  41. Cognitive

    View Slide

  42. None of these disabilities are completely
    black and white

    View Slide

  43. mild
    moderate
    moderately severe
    severe
    profound
    hearing

    View Slide

  44. astigmatism
    sensitivity
    colour blindness
    akinetopsia
    blindness
    eyesight

    View Slide

  45. Visual make it easy to read

    View Slide

  46. make it easy to hear
    Hearing

    View Slide

  47. Motor make it easy to interact

    View Slide

  48. Cognitive make it easy to
    understand and focus

    View Slide

  49. Good accessibility is good usability

    View Slide

  50. Examples

    View Slide

  51. Disclaimer

    View Slide

  52. Text

    View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. Squinting does not make an enjoyable reading
    experience

    View Slide

  57. 1. Make text content easy to read.
    2. Ensure sensible font sizes.
    3. Don’t prevent the user from resizing
    the fonts themselves in the browser.

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. What’s that supposed to mean?

    View Slide

  62. 1. Good copy is a part of good
    accessibility. Keep your text simple
    and your meaning clear.

    View Slide

  63. Colour

    View Slide

  64. View Slide

  65. View Slide

  66. Your screen isn’t the same as everybody else’s
    screens

    View Slide

  67. 1. Use colour contrast tools to ensure
    your text is high-contrast enough.
    2. Beware of super-high contrast too.

    View Slide

  68. Content hierarchy

    View Slide

  69. This is a top-level heading
    This is a paragraph. It has some text in it. It’s a few
    sentences long. A lot of paragraphs look like this.
    This is a second level heading.
    This is a paragraph which has some links to other
    content and a button that allows you to take action.

    View Slide

  70. This is a top-level heading
    This is a paragraph. It has some text in it. It’s a few sentences long.
    A lot of paragraphs look like this.
    This is a second level heading.
    This is a paragraph which has some links to other content and a
    button that allows you to take action

    View Slide

  71. Randomly enlarging and colouring text does not
    make a hierarchy.

    View Slide

  72. 1. Make the content structure clear
    and consistent.
    2. Use semantic headings, labels, lists
    and other relevant elements for
    your HTML or native controls.

    View Slide

  73. Links

    View Slide

  74. Sometimes the links are the same
    colour and style as the rest of the text
    and you only find out it’s a link when
    you hover over it.

    View Slide

  75. Sometimes the links are the same
    colour and style as the rest of the text
    and you only find out it’s a link when
    you hover over it.

    View Slide

  76. Finding interactive elements should not be a
    game.

    View Slide

  77. 1. Make buttons and interactive
    elements easyily distinguishable
    from non-interactive elements.
    2. Make links easy to recognise by
    using an underline.

    View Slide

  78. View Slide

  79. View Slide

  80. Why should I click there?

    View Slide

  81. 1. Use link text that makes sense out
    of context. Don’t use “click here”.
    2. Remember that not all your users
    are clicking.

    View Slide

  82. Alt text

    View Slide

  83. View Slide

  84. alt=“funny auto-correct texts - Baby Crazy“

    View Slide

  85. Unhelpful alt text has its place on XKCD

    View Slide

  86. View Slide

  87. 1. Provide text alternatives for images
    that helps a user understand the
    context of the image.

    View Slide

  88. Media

    View Slide

  89. No, I don’t want to listen to your podcast or
    watch your video tutorial. Give me text!

    View Slide

  90. 1. Provide text transcripts for audio.
    2. Provide subtitles for video.

    View Slide

  91. JavaScript

    View Slide

  92. View Slide

  93. View Slide

  94. View Slide

  95. 1. Use JavaScript with care and load it
    in a sensible place.
    2. If your web site or app needs
    JavaScript, ensure you use WAI
    ARIA to guide assistive
    technologies.

    View Slide

  96. Navigation and way-finding

    View Slide

  97. View Slide

  98. View Slide

  99. The days of flash are over, stop punishing me
    with your artsy navigation.

    View Slide

  100. 1. Provide consistent ways to help
    users navigate, find content, and
    determine where they are.

    View Slide

  101. Forms

    View Slide

  102. Laura
    Kalbag
    [email protected]
    First name
    Last name
    Email address

    View Slide

  103. View Slide

  104. Don’t make me guess what and where the
    error is.

    View Slide

  105. Animations

    View Slide

  106. View Slide

  107. Wait for me!

    View Slide

  108. 1. Give users enough time to read and
    use content
    2. Try not to distract users from their
    goals with unstoppable animations

    View Slide

  109. Resources

    View Slide

  110. View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. View Slide

  117. View Slide

  118. View Slide

  119. View Slide

  120. View Slide

  121. I need proof that accessible sites aren’t
    just ugly

    View Slide

  122. View Slide

  123. View Slide

  124. View Slide

  125. View Slide

  126. View Slide

  127. View Slide

  128. View Slide

  129. View Slide

  130. View Slide

  131. View Slide

  132. View Slide

  133. View Slide

  134. View Slide

  135. View Slide

  136. View Slide

  137. View Slide

  138. Consider accessibility at every point of planning. It is
    functionality, content hierarchy, copy, visual design and
    code.

    View Slide

  139. Accessibility as default

    View Slide

  140. Accessibility is easy to consider
    once you start caring about it.

    View Slide

  141. Laura Kalbag
    @laurakalbag @indie https://ind.ie

    View Slide