Designing for accessibility

From a talk at Front-end London in August 2013

Transcript

1. Designing for accessibility Laura Kalbag @laurakalbag laurakalbag.com
2. Are you are developer or a designer?
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
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
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
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.
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
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.
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
57. Unhelpful alt text has its place on XKCD
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
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