$30 off During Our Annual Pro Sale. View Details »

Designing For Accessibility

Designing For Accessibility

From a talk given to Specialist Holidays Group

Laura Kalbag

May 13, 2015

More Decks by Laura Kalbag

Other Decks in Design


  1. Designing for accessibility @laurakalbag laurakalbag.com @indie ind.ie AKA universal design

    AKA inclusive design
  2. Are you are developer or a designer? ?

  3. None
  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

  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
  16. None
  17. None
  18. None
  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

  32. None
  33. Shiny Shiny

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

  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
  40. None
  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.
  67. None
  68. None
  69. None
  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.
  87. None
  88. None
  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

  98. JavaScript

  99. None
  100. None
  101. None
  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

  105. None
  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

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

  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

  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

  169. None
  170. None
  171. None
  172. None
  173. None
  174. $0, $100,000

  175. None
  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

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