Designing for Accessibility

From a talk given at dsgndayl in November, 2014

Transcript

1. Designing for accessibility @laurakalbag laurakalbag.com AKA universal design AKA inclusive design
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
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
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
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
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.
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
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.
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
84. alt=“funny auto-correct texts - Baby Crazy“
85. Unhelpful alt text has its place on XKCD
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
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
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
     
104. Don’t make me guess what and where the error is.
105. Animations
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
121. I need proof that accessible sites aren’t just ugly
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