Designing for accessibility

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
October 02, 2013

Designing for accessibility

From a talk at LXJS in October 2013

Video at http://www.youtube.com/watch?v=UOM5eY5hG-Q&hd=1

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

October 02, 2013
Tweet

Transcript

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

    design
  2. Are you are developer or a designer?

  3. None
  4. = =

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

  6. What is accessibility?

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

    to as many people as possible.
  8. accessibility isn’t just about screen readers

  9. None
  10. None
  11. Shiny Shiny

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

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

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

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

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

  17. None
  18. Design decisions made in the name of accessibility will largely

    benefit everyone.
  19. The business case £€$

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

    sales online
  21. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Tesco’s grocery home delivery sales

    by £13M in 2005
  22. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Virgin.net sales by 68%

  23. €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€

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

    the web
  25. Visual

  26. Hearing

  27. Motor

  28. Cognitive

  29. None of these disabilities are completely black and white

  30. mild moderate moderately severe severe profound hearing

  31. astigmatism sensitivity colour blindness akinetopsia blindness eyesight

  32. Visual make it easy to read

  33. Hearing make it easy to hear

  34. Motor make it easy to interact

  35. make it easy to understand and focus Cognitive

  36. Good accessibility is good usability

  37. Examples

  38. Disclaimer

  39. Text

  40. None
  41. None
  42. None
  43. Squinting does not make an enjoyable reading experience

  44. 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.
  45. None
  46. None
  47. None
  48. What’s that supposed to mean?

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

    your text simple and your meaning clear.
  50. Colour

  51. None
  52. None
  53. Your screen isn’t the same as everybody else’s screens

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

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

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

  59. 1. Make the content structure clear and consistent. 2. Use

    semantic headings, labels, lists and other relevant elements for your HTML or native controls.
  60. Links

  61. Why should I click there?

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

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

    elements. 2. Make links easy to recognise by using an underline.
  66. None
  67. None
  68. Why should I click there?

  69. 1. Use link text that makes sense out of context.

    Don’t use “click here”. 2. Remember that not all your users are clicking.
  70. Alt text

  71. None
  72. None
  73. Unhelpful alt text has its place on XKCD

  74. None
  75. 1. Provide text alternatives for images that helps a user

    understand the context of the image.
  76. Media

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

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

    video.
  79. JavaScript

  80. None
  81. None
  82. None
  83. 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.
  84. Navigation and way-finding

  85. None
  86. None
  87. The days of flash are over, stop punishing me with

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

    and determine where they are.
  89. Forms

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

  91. None
  92. Don’t make me guess what and where the error is.

  93. Animations

  94. None
  95. Wait for me!

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

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

  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. I need proof that accessible sites aren’t just ugly

  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. Consider accessibility at every point of planning. It is functionality,

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

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

    it.
  121. None
  122. Laura Kalbag @laurakalbag laurakalbag.com