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
   

   View Slide

2. View Slide

3. =
   =
   

   View Slide

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

   View Slide

5. T
   

   View Slide

6. Accessible websites are the
   responsibility of the whole team
   

   View Slide

7. What is accessibility?
   

   View Slide

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

   View Slide

9. Empathy is integral to
   designing websites
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. View Slide

16. View Slide

17. View Slide

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

    View Slide

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

    View Slide

20. accessibility isn’t just about screen readers
    

    View Slide

21. View Slide

22. View Slide

23. Shiny Shiny
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

27. I’ve not got the answers
    

    View Slide

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

    View Slide

29. BROWSERS MAKE SITES ACCESSIBLE
    BY DEFAULT, WE JUST BREAK THEM
    WITH BAD MARKUP AND CONTENT
    

    View Slide

30. View Slide

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

    View Slide

32. The business case
    £€$
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

36. €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€
    €€€€€€€€€€€€€€€€€€€€
    

    View Slide

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

    View Slide

38. Visual
    

    View Slide

39. Hearing
    

    View Slide

40. Motor
    

    View Slide

41. Cognitive
    

    View Slide

42. None of these disabilities are completely
    black and white
    

    View Slide

43. mild
    moderate
    moderately severe
    severe
    profound
    hearing
    

    View Slide

44. astigmatism
    sensitivity
    colour blindness
    akinetopsia
    blindness
    eyesight
    

    View Slide

45. Visual make it easy to read
    

    View Slide

46. make it easy to hear
    Hearing
    

    View Slide

47. Motor make it easy to interact
    

    View Slide

48. Cognitive make it easy to
    understand and focus
    

    View Slide

49. Good accessibility is good usability
    

    View Slide

50. Examples
    

    View Slide

51. Disclaimer
    

    View Slide

52. Text
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. Squinting does not make an enjoyable reading
    experience
    

    View Slide

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.
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. What’s that supposed to mean?
    

    View Slide

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

    View Slide

63. Colour
    

    View Slide

64. View Slide

65. View Slide

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

    View Slide

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

    View Slide

68. Content hierarchy
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

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

    View Slide

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.
    

    View Slide

73. Links
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

76. Finding interactive elements should not be a
    game.
    

    View Slide

77. 1. Make buttons and interactive
    elements easyily distinguishable
    from non-interactive elements.
    2. Make links easy to recognise by
    using an underline.
    

    View Slide

78. View Slide

79. View Slide

80. Why should I click there?
    

    View Slide

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.
    

    View Slide

82. Alt text
    

    View Slide

83. View Slide

84. alt=“funny auto-correct texts - Baby Crazy“
    

    View Slide

85. Unhelpful alt text has its place on XKCD
    

    View Slide

86. View Slide

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

    View Slide

88. Media
    

    View Slide

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

    View Slide

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

    View Slide

91. JavaScript
    

    View Slide

92. View Slide

93. View Slide

94. View Slide

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.
    

    View Slide

96. Navigation and way-finding
    

    View Slide

97. View Slide

98. View Slide

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

    View Slide

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

     View Slide

101. Forms
     

     View Slide

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

     View Slide

103. View Slide

104. Don’t make me guess what and where the
     error is.
     

     View Slide

105. Animations
     

     View Slide

106. View Slide

107. Wait for me!
     

     View Slide

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

     View Slide

109. Resources
     

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

117. View Slide

118. View Slide

119. View Slide

120. View Slide

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

     View Slide

122. View Slide

123. View Slide

124. View Slide

125. View Slide

126. View Slide

127. View Slide

128. View Slide

129. View Slide

130. View Slide

131. View Slide

132. View Slide

133. View Slide

134. View Slide

135. View Slide

136. View Slide

137. View Slide

138. Consider accessibility at every point of planning. It is
     functionality, content hierarchy, copy, visual design and
     code.
     

     View Slide

139. Accessibility as default
     

     View Slide

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

     View Slide

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

     View Slide