Designing For Accessibility

From a talk given to Specialist Holidays Group

Transcript

1. Designing for accessibility @laurakalbag laurakalbag.com @indie ind.ie AKA universal design AKA inclusive design
2. Are you are developer or a designer? ?
4. = =
5. designing for accessibility isn’t just for “designers”
6. T
7. Accessible websites are the responsibility of the whole team
8. What is accessibility?
9. Accessibility is the degree to which a website is available to as many people as possible.
10. Empathy is integral to designing websites
11. It’s easier to create products for people who have the same needs as us
12. Successful products are created when someone is “scratching their own itch”
13. The problem with creating products to suit our own needs is that the tech industry is not diverse
14. diversity is the characteristics that make us up as individuals
15. and all of these characteristics give us unique needs, and unique outlooks
19. the more diverse a team, the more likely their product is to solve and serve the problems of a diverse audience
20. If we want accessible websites, we must have diverse teams
21. we need to implement an ethical holistic approach to design
22. design without ethics is manipulation
23. physiological safety love/belonging esteem self- actualization functional reliable usable pleasurable Tuesday, December 13, 11 blog.teamtreehouse.com/emotional-interface-design-the-gateway-to-passionate-users Aaron Walter’s remapping of Mazlow’s hierarchy of needs
24. superficial design
25. decoration
26. decoration perpetuates the status quo; design alters it
27. private, secure, accessible and sustainable respects human rights The 3 Rs of Ethical Design
28. functional, convenient and reliable private, secure, accessible and sustainable respects human effort respects human rights The 3 Rs of Ethical Design
29. functional, convenient and reliable private, secure, accessible and sustainable delightful respects human rights respects human effort respects human experience The 3 Rs of Ethical Design
30. NOT private, secure, accessible and sustainable functional, convenient and reliable delightful respects human effort respects human experience does not respect human rights The 3 Rs of Ethical Design
31. accessibility isn’t just about screen readers
33. Shiny Shiny
34. Is it because we don’t understand who we’re trying to help?
35. Is it because we just don’t know what to do?
36. Is it because it’s too hard, and there’s too much to think about?
37. I’ve not got the answers
38. It’s not fair if the web isn’t accessible
39. Browsers make sites accessible by default, but we break the accessibility with confusing content and poor markup
41. Design decisions made in the name of accessibility will largely benefit everyone.
42. The business case £€$
43. Improvements in accessibility doubled Legal and General’s life insurance sales online wsi-ic.com/PConnolly/FileContent/improve_website.pdf
44. Improvements in accessibility increased Tesco’s grocery home delivery sales by £13M in 2005 wsi-ic.com/PConnolly/FileContent/improve_website.pdf
45. Improvements in accessibility increased Virgin.net sales by 68% wsi-ic.com/PConnolly/FileContent/improve_website.pdf
46. $€£$€£$€£$€£$€£$€£$€ £$€£$€£$€£$€£$€£$€£$ €£$€£$€£$€£$€£$€£$€£
47. The four (main) types of disability that affect use of the web
48. Visual
49. Hearing
50. Motor
51. Cognitive
52. None of these disabilities are completely
    black and white
53. mild
    moderate
    moderately severe
    severe
    profound hearing
54. astigmatism
    sensitivity
    colour blindness
    akinetopsia
    blindness eyesight
55. Visual make it easy to read
56. Hearing make it easy to hear
57. Motor make it easy to interact
58. Cognitive make it easy to understand and focus
59. Good accessibility is good usability
60. Examples Disclaimer
61. Text
62. apple.com/uk
63. chicagomanualofstyle.org
64. apple.com/uk/mac
65. Squinting does not make an enjoyable reading experience
66. 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.
70. What’s that supposed to mean?
71. Good copy is a part of good accessibility. Keep your text simple and your meaning clear.
72. Colour
73. graphicalweb.org/2012
74. bayerischerhof.de/en/hotel
75. Your screen isn’t the same as everybody else’s screens
76. 1. Use colour contrast tools to ensure your text is high- contrast enough. 2. Beware of mega-high contrast too.
77. Content hierarchy
78. 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.
79. 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
80. Randomly enlarging and colouring text does not make a hierarchy.
81. 1. Make the content structure clear and consistent. 2. Use meaningful headings, labels, lists and other relevant elements for your HTML.
82. Links
83. 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.
84. 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.
85. Finding interactive elements should not be a game.
86. 1. Make buttons and interactive elements easily distinguishable from non-interactive elements. 2. Make links easy to recognise.
89. Why should I click there?
90. 1. Use link text that makes sense out of context. Don’t use “click here”. 2. Remember that not all your users are clicking.
91. Alt text
92. w3schools.com/HTML/html5_form_input_types.asp Internet Explorer
93. alt="funny auto- correct texts - Classic DYAC: Tax Refund" damnyouautocorrect.com/7953/tax-refunds/
94. Provide text alternatives for images that helps a user understand the context of the image.
95. Media
96. No, I don’t want to listen to your podcast or watch your video tutorial. Give me text!
97. 1. Provide text transcripts for audio. 2. Provide subtitles for video.
98. JavaScript
102. 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.
103. Navigation and way-finding
104. gomacro.com
106. The days of flash are over, stop punishing me with your artsy navigation.
107. Provide consistent ways to help users navigate, find content, and determine where they are.
108. Forms
109. First name
     Last name
     Email address
     Laura Kalbag email@laurakalbag.com
111. Don’t make me guess the nature and location of the error
112. Animations
113. http://happycog.com/way
114. Wait for me!
115. 1. Give users enough time to read and use content 2. Try not to distract users from their goals with unstoppable animations
116. <ul  class="links-­‐list  rooms">      <li>          <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>      <a  href="#kitchen">Kitchen</a>   </div>   Meaningful vs not-so meaningful HTML
117. Screen readers
118. <ul  class="links-­‐list  rooms">      <li>          <a  href="#hall">Hall</a>      </li>      <li>          <a  href="#kitchen">Kitchen</a>      </li>      …   </ul> list 2 items • • internal, link, Hall internal, link, Kitchen end of list How VoiceOver reads it
119. <div  class="links-­‐list  rooms">      <a  href="#hall">Hall</a>      <br>      <a  href="#kitchen">Kitchen</a>   </div> internal, link, Hall internal, link, Kitchen How VoiceOver reads it
120. Web Accessibility Initiative – Accessible Rich Internet Applications (or ARIA for short) Born March 2013 What is WAI-ARIA?
121. Dynamic content / “complex web apps” (Sites that update without refreshing the page)
122. ARIA is particularly useful for keyboard navigation and screen readers
123. Tabs WAI-ARIA Overview, selected, tab, 1 of 3 Laura Kalbag, tab, 2 of 3 Ind.ie, tab, 3 of 3 How VoiceOver reads native tabs in OS X
124. visited, link, Images link, Fonts link, Ways To Pay link, Offers link, Ideas link, Subscriptions How VoiceOver reads the Veer navigation
125. Web browsers need a few more cues to assist the human
126. ARIA is a layer on top of markup content structure (HTML) additional structure (ARIA)
127. WAI-ARIA gives developers a way to describe roles, states, and properties for custom widgets
128. <a  role="tab">Images</a> ARIA Roles
129. tab, Images tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions ARIA Roles <a  role="tab">Images</a>
130. ARIA Roles vs Implied Roles <button>Images</button> Images, button <button  role="tab">Images</button> tab, Images
131. <div  role="alert">Incorrect  password,  please   try  again</div>   <div  role="dialog">Successfully  saved</div> Other roles Full list at w3.org/TR/wai-aria/roles#abstract_roles_header
132. <a  role="tab"        aria-­‐selected="true">Images</a> ARIA States w3.org/TR/wai-aria/states_and_properties#aria-selected
133. tab, Images, selected tab, Fonts tab, Ways To Pay tab, Offers tab, Ideas tab, Subscriptions
134. Expanding/collapsing menu <button  class="menu"        aria-­‐expanded="false"> <button  class="menu"        aria-­‐expanded="true"> Menu, collapsed, button Menu, expanded, button How ARIA could be used on an expanding/collapsing navigation menu
135. <div  class="site-­‐header"  role="header">      <ul  class="site-­‐navigation"   role="navigation"></ul>   </div> ARIA Landmarks
136. When we shouldn’t use WAI-ARIA
137. HTML5 vs Landmarks <ul  class="site-­‐navigation"   role="navigation"> <nav>      <ul  class="site-­‐navigation"></ul>   </nav> w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
138. ARIA vs HTML <span  role="link">   <div  role="list">   <span  role="button">   <span  role="checkbox"> <a>   <ul>   <button>   <input  type="checkbox"> paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
139. However, there’s a lot ARIA can do, that HTML can’t… ARIA should be your last resort
140. Live Regions
141. New tweets available. Press period to review them. <div  id="event-­‐log"  aria-­‐live="assertive">      <p>New  Tweets  available.  Press  period  to   review  them.</p>   </div> How Twitter uses aria-live
142. Without ARIA, people can miss out
143. caniuse.com/#search=WAI-ARIA
144. html5accessibility.com by The Paciello Group
145. ARIA can’t fix an unusable site
146. Resources
147. a11yproject.com
148. webaxe.org
149. webaim.org/articles
150. wave.webaim.org
151. parkwoodtheatres.co.uk/theatre/
152. wave.webaim.org/report#/http://www.parkwoodtheatres.co.uk/theatre/
153. leaverou.github.io/contrast-ratio
154. colororacle.org
155. ind.ie
156. ind.ie with Deuteranopia
157. ind.ie with Protanopia
158. ind.ie with Tritanopia
159. I need proof that accessible sites aren’t just ugly
160. oldenglishinns.co.uk/our-locations/the-heathy-farm-crawley
161. wave.webaim.org/report#/https://www.oldenglishinns.co.uk/our-locations/the-heathy-farm-crawley
162. crawleytownfc.com
163. wave.webaim.org/report#/http://www.crawleytownfc.com
164. lafitness.co.uk/gym/gatwick/
165. wave.webaim.org/report#/http://www.lafitness.co.uk/gym/gatwick/
166. cineworld.co.uk
167. wave.webaim.org/report#/http://cineworld.co.uk
168. wave.webaim.org/report#/https://ind.ie
174. $0, $100,000
176. We started with $0, and we’re aiming to raise $100,00.
177. Consider accessibility at every point of planning. It is functionality, content hierarchy, copy, visual design and code. Accessibility as default
178. Accessibility is easy to consider once you start caring about it.
180. Laura Kalbag @laurakalbag @indie https://ind.ie