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

Designing for accessibility

95b99419138620c939f1582fc0cd8b9b?s=47 Laura Kalbag
August 29, 2013

Designing for accessibility

From a talk at Front-end London in August 2013

95b99419138620c939f1582fc0cd8b9b?s=128

Laura Kalbag

August 29, 2013
Tweet

More Decks by Laura Kalbag

Other Decks in Design

Transcript

  1. Designing for accessibility Laura Kalbag @laurakalbag laurakalbag.com

  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. None
  17. None
  18. Design decisions made in the name of accessibility will largely

    benefit everyone.
  19. The four (main) types of disability that affect use of

    the web
  20. Visual

  21. Hearing

  22. Motor

  23. Cognitive

  24. None of these disabilities are completely black and white

  25. mild moderate moderately severe severe profound astigmatism sensitivity colour blindness

    akinetopsia blindness hearing eyesight
  26. Visual make it easy to read Hearing make it easy

    to hear make it easy to understand and focus Cognitive Motor make it easy to interact
  27. Good accessibility is good usability

  28. Examples

  29. Disclaimer

  30. Text

  31. None
  32. None
  33. None
  34. Squinting does not make an enjoyable reading experience

  35. 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.
  36. None
  37. None
  38. What’s that supposed to mean?

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

    your text simple and your meaning clear.
  40. Colour

  41. None
  42. None
  43. Your screen isn’t the same as everybody else’s screens

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

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

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

  47. 1. Use semantic headings, lists and other relevant HTML elements.

    2. Make the content structure clear and consistent.
  48. Links

  49. Finding links should not be a game.

  50. 1. Make links easy to recognise by using an underline.

  51. None
  52. Why should I click there?

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

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

  55. None
  56. None
  57. Unhelpful alt text has its place on XKCD

  58. None
  59. 1. Provide text alternatives for images that helps a user

    understand the context of the image.
  60. Media

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

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

    video.
  63. JavaScript

  64. I don’t want to wait forever for your page to

    load because you want to show me how many Likes it has on Facebook
  65. 1. Use JavaScript with care and load it in a

    sensible place. 2. If your web app needs JavaScript, ensure you use WAI ARIA to guide assistive technologies.
  66. Navigation and way-finding

  67. The days of flash are over, stop punishing me with

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

    and determine where they are.
  69. Forms

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

  71. 1. Help users correct and avoid mistakes in their input.

  72. Animations

  73. Wait for me!

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

  75. Resources

  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. Consider accessibility at every point of planning. It is content

    hierarchy, copy, visual design and code.
  89. Accessibility as default

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

    it.
  91. Laura Kalbag @laurakalbag laurakalbag.com