Designing for Accessibility

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
November 11, 2014

Designing for Accessibility

From a talk given at dsgndayl in November, 2014

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

November 11, 2014
Tweet

Transcript

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

    design
  2. None
  3. = =

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

  5. T

  6. Accessible websites are the responsibility of the whole team

  7. What is accessibility?

  8. Accessibility is the degree to which a website is available

    to as many people as possible.
  9. Empathy is integral to designing websites

  10. It’s easier to create products for people who have the

    same needs as us
  11. Successful products are created when someone is “scratching their own

    itch”
  12. The problem with creating products to suit our own needs

    is that the tech industry is not diverse
  13. diversity is the characteristics that make us up as individuals

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

    unique outlooks
  15. None
  16. None
  17. None
  18. the more diverse a team, the more likely their product

    is to solve and serve the problems of a diverse audience
  19. If we want accessible websites, we must have diverse teams

  20. accessibility isn’t just about screen readers

  21. None
  22. None
  23. Shiny Shiny

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

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

  26. Is it because it’s too hard, and there’s too much

    to think about?
  27. I’ve not got the answers

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

  29. BROWSERS MAKE SITES ACCESSIBLE BY DEFAULT, WE JUST BREAK THEM

    WITH BAD MARKUP AND CONTENT
  30. None
  31. Design decisions made in the name of accessibility will largely

    benefit everyone.
  32. The business case £€$

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

    sales online
  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
  35. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Virgin.net sales by 68%

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

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

    the web
  38. Visual

  39. Hearing

  40. Motor

  41. Cognitive

  42. None of these disabilities are completely black and white

  43. mild moderate moderately severe severe profound hearing

  44. astigmatism sensitivity colour blindness akinetopsia blindness eyesight

  45. Visual make it easy to read

  46. make it easy to hear Hearing

  47. Motor make it easy to interact

  48. Cognitive make it easy to understand and focus

  49. Good accessibility is good usability

  50. Examples

  51. Disclaimer

  52. Text

  53. None
  54. None
  55. None
  56. Squinting does not make an enjoyable reading experience

  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.
  58. None
  59. None
  60. None
  61. What’s that supposed to mean?

  62. 1. Good copy is a part of good accessibility. Keep

    your text simple and your meaning clear.
  63. Colour

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

  67. 1. Use colour contrast tools to ensure your text is

    high-contrast enough. 2. Beware of super-high contrast too.
  68. Content hierarchy

  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.
  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
  71. Randomly enlarging and colouring text does not make a hierarchy.

  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.
  73. Links

  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.
  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.
  76. Finding interactive elements should not be a game.

  77. 1. Make buttons and interactive elements easyily distinguishable from non-interactive

    elements. 2. Make links easy to recognise by using an underline.
  78. None
  79. None
  80. Why should I click there?

  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.
  82. Alt text

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

  85. Unhelpful alt text has its place on XKCD

  86. None
  87. 1. Provide text alternatives for images that helps a user

    understand the context of the image.
  88. Media

  89. No, I don’t want to listen to your podcast or

    watch your video tutorial. Give me text!
  90. 1. Provide text transcripts for audio. 2. Provide subtitles for

    video.
  91. JavaScript

  92. None
  93. None
  94. None
  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.
  96. Navigation and way-finding

  97. None
  98. None
  99. The days of flash are over, stop punishing me with

    your artsy navigation.
  100. 1. Provide consistent ways to help users navigate, find content,

    and determine where they are.
  101. Forms

  102. Laura Kalbag email@laurakalbag.com First name Last name Email address

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

  105. Animations

  106. None
  107. Wait for me!

  108. 1. Give users enough time to read and use content

    2. Try not to distract users from their goals with unstoppable animations
  109. Resources

  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. None
  121. I need proof that accessible sites aren’t just ugly

  122. None
  123. None
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. None
  133. None
  134. None
  135. None
  136. None
  137. None
  138. Consider accessibility at every point of planning. It is functionality,

    content hierarchy, copy, visual design and code.
  139. Accessibility as default

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

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