Access all screens

From a talk at MobX in Berlin, September 2013

Transcript

1. Access all screens Laura Kalbag @laurakalbag laurakalbag.com
2. designing for accessibility isn’t just for “designers”
3. What is accessibility?
4. Accessibility is the degree to which an app or website is available to as many people as possible.
5. accessibility isn’t just about screen readers
7. Is it because we don’t understand who we’re trying to help?
8. Is it because we just don’t know what to do?
9. Is it because it’s too hard, and there’s too much to think about?
10. I’ve not got the answers
12. The business case £€$
13. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility doubled Legal and General’s life insurance sales online
14. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Tesco’s grocery home delivery sales by £13M in 2005
15. http://www.wsi-ic.com/PConnolly/FileContent/improve_website.pdf Improvements in accessibility increased Virgin.net sales by 68%
16. €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€ €€€€€€€€€€€€€€€€€€€€
17. The four (main) types of disability that affect use of the web and mobile devices
18. Visual
19. Hearing
20. Motor
21. Cognitive
22. None of these disabilities are completely black and white
23. mild moderate moderately severe severe profound astigmatism sensitivity colour blindness akinetopsia blindness hearing eyesight
24. Visual make it easy to read
25. Hearing make it easy to hear
26. Motor make it easy to interact
27. make it easy to understand and focus Cognitive
28. Good accessibility is good usability
29. Design decisions made in the name of accessibility will largely benefit everyone.
30. Examples
31. Disclaimer
32. Text
39. Squinting does not make an enjoyable reading experience
40. 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.
46. 1. Good copy is a part of good accessibility. Keep your text simple and your meaning clear.
47. Colour
51. The screens you test on aren’t always the same as everybody else’s screens
52. 1. Use colour contrast tools to ensure your text is high-contrast enough. 2. Beware of super-high contrast too.
53. Content hierarchy
54. 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.
55. 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
56. Randomly enlarging and colouring text does not make a hierarchy.
57. 1. Make the content structure clear and consistent. 2. Use semantic headings, labels, lists and other relevant elements for your HTML or native controls.
58. Buttons and links
60. 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.
61. 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.
62. Finding interactive elements should not be a game.
63. 1. Make buttons and interactive elements easyily distinguishable from non-interactive elements. 2. Make links easy to recognise by using an underline.
68. Why should I click there?
69. 1. Use button and link text that makes sense out of context. Don’t use “click here”. 2. Remember that not all your users are clicking. Inputs wary across different devices.
70. Media
71. No, I don’t want to listen to your podcast or watch your video tutorial. Give me text!
72. 1. Provide text alternatives for images that helps a user understand the context of the image.
73. 1. Provide text transcripts for audio. 2. Provide subtitles for video.
74. Animations
75. Wait for me!
76. 1. Give users enough time to read and use content
77. JavaScript
81. 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.
82. Navigation and way-finding
85. The days of flash are over, stop punishing me with your artsy navigation.
86. 1. Provide consistent ways to help users navigate, find content, and determine where they are.
87. Forms
88. First name Last name Email address Laura Kalbag email@laurakalbag.com
91. Don’t make me guess what and where the error is.
92. 1. Help users correct and avoid mistakes in their input.
93. Resources
105. Consider accessibility at every point of planning. It is functionality, content hierarchy, copy, visual design and code.
106. Accessibility as default
107. Accessibility is easy to consider once you start caring about it.
108. Laura Kalbag @laurakalbag laurakalbag.com