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
   

   View Slide

2. Are you are developer or
   a designer?
   ?
   

   View Slide

3. View Slide

4. =
   =
   

   View Slide

5. designing for accessibility
   isn’t just for “designers”
   

   View Slide

6. T
   

   View Slide

7. Accessible websites are the
   responsibility of the whole team
   

   View Slide

8. What is accessibility?
   

   View Slide

9. Accessibility is the degree to which a
   website is available to as many people as
   possible.
   

   View Slide

10. Empathy is integral to
    designing websites
    

    View Slide

11. It’s easier to create products for
    people who have the same needs as us
    

    View Slide

12. Successful products are created when
    someone is “scratching their own itch”
    

    View Slide

13. The problem with creating products
    to suit our own needs is that the
    tech industry is not diverse
    

    View Slide

14. diversity is the characteristics that
    make us up as individuals
    

    View Slide

15. and all of these characteristics give us
    unique needs, and unique outlooks
    

    View Slide

16. View Slide

17. View Slide

18. View Slide

19. the more diverse a team, the
    more likely their product is to
    solve and serve the problems
    of a diverse audience
    

    View Slide

20. If we want accessible websites, we
    must have diverse teams
    

    View Slide

21. we need to implement an ethical
    holistic approach to design
    

    View Slide

22. design without ethics is
    manipulation
    

    View Slide

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
    

    View Slide

24. superficial design
    

    View Slide

25. decoration
    

    View Slide

26. decoration perpetuates the
    status quo; design alters it
    

    View Slide

27. private, secure,
    accessible and sustainable
    respects human rights
    The 3 Rs of Ethical Design
    

    View Slide

28. functional,
    convenient and reliable
    private, secure,
    accessible and sustainable
    respects human effort
    respects human rights
    The 3 Rs of Ethical Design
    

    View Slide

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
    

    View Slide

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
    

    View Slide

31. accessibility isn’t just about screen readers
    

    View Slide

32. View Slide

33. Shiny Shiny
    

    View Slide

34. Is it because we don’t understand who
    we’re trying to help?
    

    View Slide

35. Is it because we just don’t know
    what to do?
    

    View Slide

36. Is it because it’s too hard, and there’s
    too much to think about?
    

    View Slide

37. I’ve not got the answers
    

    View Slide

38. It’s not fair if the web isn’t accessible
    

    View Slide

39. Browsers make sites accessible
    by default, but we break the
    accessibility with confusing
    content and poor markup
    

    View Slide

40. View Slide

41. Design decisions made in the name of
    accessibility will largely benefit everyone.
    

    View Slide

42. The business case
    £€$
    

    View Slide

43. Improvements in accessibility doubled
    Legal and General’s life insurance sales
    online
    wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    

    View Slide

44. Improvements in accessibility increased
    Tesco’s grocery home delivery sales by
    £13M in 2005
    wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    

    View Slide

45. Improvements in accessibility increased
    Virgin.net sales by 68%
    wsi-ic.com/PConnolly/FileContent/improve_website.pdf
    

    View Slide

46. $€£$€£$€£$€£$€£$€£$€
    £$€£$€£$€£$€£$€£$€£$
    €£$€£$€£$€£$€£$€£$€£
    

    View Slide

47. The four (main) types of disability that
    affect use of the web
    

    View Slide

48. Visual
    

    View Slide

49. Hearing
    

    View Slide

50. Motor
    

    View Slide

51. Cognitive
    

    View Slide

52. None of these disabilities are
    completely
    black and white
    

    View Slide

53. mild
    moderate
    moderately severe
    severe
    profound
    hearing
    

    View Slide

54. astigmatism
    sensitivity
    colour blindness
    akinetopsia
    blindness
    eyesight
    

    View Slide

55. Visual make it easy to read
    

    View Slide

56. Hearing make it easy to hear
    

    View Slide

57. Motor make it easy to interact
    

    View Slide

58. Cognitive
    make it easy to
    understand and focus
    

    View Slide

59. Good accessibility is good usability
    

    View Slide

60. Examples
    Disclaimer
    

    View Slide

61. Text
    

    View Slide

62. apple.com/uk
    

    View Slide

63. chicagomanualofstyle.org
    

    View Slide

64. apple.com/uk/mac
    

    View Slide

65. Squinting does not make an enjoyable
    reading experience
    

    View Slide

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.
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. What’s that supposed to mean?
    

    View Slide

71. Good copy is a part of good
    accessibility. Keep your text
    simple and your meaning clear.
    

    View Slide

72. Colour
    

    View Slide

73. graphicalweb.org/2012
    

    View Slide

74. bayerischerhof.de/en/hotel
    

    View Slide

75. Your screen isn’t the same as
    everybody else’s screens
    

    View Slide

76. 1. Use colour contrast tools to
    ensure your text is high-
    contrast enough.
    2. Beware of mega-high
    contrast too.
    

    View Slide

77. Content hierarchy
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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

    View Slide

81. 1. Make the content structure
    clear and consistent.
    2. Use meaningful headings,
    labels, lists and other relevant
    elements for your HTML.
    

    View Slide

82. Links
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

85. Finding interactive elements
    should not be a game.
    

    View Slide

86. 1. Make buttons and interactive
    elements easily distinguishable
    from non-interactive
    elements.
    2. Make links easy to recognise.
    

    View Slide

87. View Slide

88. View Slide

89. Why should I click there?
    

    View Slide

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.
    

    View Slide

91. Alt text
    

    View Slide

92. w3schools.com/HTML/html5_form_input_types.asp
    Internet Explorer
    

    View Slide

93. alt="funny auto-
    correct texts - Classic
    DYAC: Tax Refund"
    damnyouautocorrect.com/7953/tax-refunds/
    

    View Slide

94. Provide text alternatives for images
    that helps a user understand the
    context of the image.
    

    View Slide

95. Media
    

    View Slide

96. No, I don’t want to listen to your podcast or
    watch your video tutorial. Give me text!
    

    View Slide

97. 1. Provide text transcripts for
    audio.
    2. Provide subtitles for video.
    

    View Slide

98. JavaScript
    

    View Slide

99. View Slide

100. View Slide

101. View Slide

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.
     

     View Slide

103. Navigation and way-finding
     

     View Slide

104. gomacro.com
     

     View Slide

105. View Slide

106. The days of flash are over, stop punishing
     me with your artsy navigation.
     

     View Slide

107. Provide consistent ways to help
     users navigate, find content, and
     determine where they are.
     

     View Slide

108. Forms
     

     View Slide

109. First name
     Last name
     Email address
     Laura
     Kalbag
     email@laurakalbag.com
     

     View Slide

110. View Slide

111. Don’t make me guess the nature and
     location of the error
     

     View Slide

112. Animations
     

     View Slide

113. http://happycog.com/way
     

     View Slide

114. Wait for me!
     

     View Slide

115. 1. Give users enough time to read
     and use content
     2. Try not to distract users from
     their goals with unstoppable
     animations
     

     View Slide

116.  
          
            Hall  
          
          
            Kitchen  
          
        …  
     
      
        Hall  
        
      
        Kitchen  
      
     Meaningful vs not-so meaningful HTML
     

     View Slide

117. Screen readers
     

     View Slide

118.  
          
            Hall  
          
          
            Kitchen  
          
        …  
     
     list 2 items
     •
     •
     internal, link, Hall
     internal, link, Kitchen
     end of list
     How VoiceOver reads it
     

     View Slide

119.  
        Hall  
        
      
        Kitchen  
     
     internal, link, Hall
     internal, link, Kitchen
     How VoiceOver reads it
     

     View Slide

120. Web Accessibility Initiative –
     Accessible Rich Internet Applications
     (or ARIA for short)
     Born March 2013
     What is WAI-ARIA?
     

     View Slide

121. Dynamic content /
     “complex web apps”
     (Sites that update without
     refreshing the page)
     

     View Slide

122. ARIA is particularly useful for
     keyboard navigation and screen
     readers
     

     View Slide

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
     

     View Slide

124. visited, link, Images
     link, Fonts
     link, Ways To Pay
     link, Offers
     link, Ideas
     link, Subscriptions
     How VoiceOver reads the Veer navigation
     

     View Slide

125. Web browsers need a few more cues
     to assist the human
     

     View Slide

126. ARIA is a layer on top of markup
     content
     structure (HTML)
     additional structure (ARIA)
     

     View Slide

127. WAI-ARIA gives developers a way to
     describe roles, states, and properties
     for custom widgets
     

     View Slide

128. Images
     ARIA Roles
     

     View Slide

129. tab, Images
     tab, Fonts
     tab, Ways To Pay
     tab, Offers
     tab, Ideas
     tab, Subscriptions
     ARIA Roles
     Images
     

     View Slide

130. ARIA Roles vs Implied Roles
     Images Images, button
     Images tab, Images
     

     View Slide

131. Incorrect  password,  please  
     try  again  
     Successfully  saved
     Other roles
     Full list at w3.org/TR/wai-aria/roles#abstract_roles_header
     

     View Slide

132.    aria-­‐selected="true">Images
     ARIA States
     w3.org/TR/wai-aria/states_and_properties#aria-selected
     

     View Slide

133. tab, Images, selected
     tab, Fonts
     tab, Ways To Pay
     tab, Offers
     tab, Ideas
     tab, Subscriptions
     

     View Slide

134. Expanding/collapsing menu
        aria-­‐expanded="false">
        aria-­‐expanded="true">
     Menu, collapsed, button Menu, expanded, button
     How ARIA could be used on an expanding/collapsing navigation menu
     

     View Slide

135.  
        role="navigation">  
     
     ARIA Landmarks
     

     View Slide

136. When we shouldn’t use WAI-ARIA
     

     View Slide

137. HTML5 vs Landmarks
     role="navigation">
      
          
     
     w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics
     

     View Slide

138. ARIA vs HTML
      
      
      
     
      
      
      
     
     paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/
     

     View Slide

139. However, there’s a lot ARIA can do,
     that HTML can’t…
     ARIA should be your last resort
     

     View Slide

140. Live Regions
     

     View Slide

141. New tweets available. Press period to review them.
      
        New  Tweets  available.  Press  period  to  
     review  them.  
     
     How Twitter uses aria-live
     

     View Slide

142. Without ARIA, people can miss out
     

     View Slide

143. caniuse.com/#search=WAI-ARIA
     

     View Slide

144. html5accessibility.com by The Paciello Group
     

     View Slide

145. ARIA can’t fix an unusable site
     

     View Slide

146. Resources
     

     View Slide

147. a11yproject.com
     

     View Slide

148. webaxe.org
     

     View Slide

149. webaim.org/articles
     

     View Slide

150. wave.webaim.org
     

     View Slide

151. parkwoodtheatres.co.uk/theatre/
     

     View Slide

152. wave.webaim.org/report#/http://www.parkwoodtheatres.co.uk/theatre/
     

     View Slide

153. leaverou.github.io/contrast-ratio
     

     View Slide

154. colororacle.org
     

     View Slide

155. ind.ie
     

     View Slide

156. ind.ie with Deuteranopia
     

     View Slide

157. ind.ie with Protanopia
     

     View Slide

158. ind.ie with Tritanopia
     

     View Slide

159. I need proof that accessible sites aren’t
     just ugly
     

     View Slide

160. oldenglishinns.co.uk/our-locations/the-heathy-farm-crawley
     

     View Slide

161. wave.webaim.org/report#/https://www.oldenglishinns.co.uk/our-locations/the-heathy-farm-crawley
     

     View Slide

162. crawleytownfc.com
     

     View Slide

163. wave.webaim.org/report#/http://www.crawleytownfc.com
     

     View Slide

164. lafitness.co.uk/gym/gatwick/
     

     View Slide

165. wave.webaim.org/report#/http://www.lafitness.co.uk/gym/gatwick/
     

     View Slide

166. cineworld.co.uk
     

     View Slide

167. wave.webaim.org/report#/http://cineworld.co.uk
     

     View Slide

168. wave.webaim.org/report#/https://ind.ie
     

     View Slide

169. View Slide

170. View Slide

171. View Slide

172. View Slide

173. View Slide

174. $0, $100,000
     

     View Slide

175. View Slide

176. We started with $0, and we’re aiming to raise $100,00.
     

     View Slide

177. Consider accessibility at every point of
     planning. It is functionality, content
     hierarchy, copy, visual design and code.
     Accessibility as default
     

     View Slide

178. Accessibility is easy to consider once you
     start caring about it.
     

     View Slide

179. View Slide

180. Laura Kalbag
     @laurakalbag @indie https://ind.ie
     

     View Slide