Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing For Accessibility

Designing For Accessibility

From a talk given to Specialist Holidays Group

Laura Kalbag

May 13, 2015
Tweet

More Decks by Laura Kalbag

Other Decks in Design

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 protected]

    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