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 full-size slide

  2. Are you are developer or
    a designer?
    ?

    View full-size slide

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

    View full-size slide

  4. Accessible websites are the
    responsibility of the whole team

    View full-size slide

  5. What is accessibility?

    View full-size slide

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

    View full-size slide

  7. Empathy is integral to
    designing websites

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. design without ethics is
    manipulation

    View full-size slide

  17. 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 full-size slide

  18. superficial design

    View full-size slide

  19. decoration perpetuates the
    status quo; design alters it

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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 full-size slide

  23. 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 full-size slide

  24. accessibility isn’t just about screen readers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. I’ve not got the answers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. The business case
    £€$

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. $€£$€£$€£$€£$€£$€£$€
    £$€£$€£$€£$€£$€£$€£$
    €£$€£$€£$€£$€£$€£$€£

    View full-size slide

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

    View full-size slide

  38. None of these disabilities are
    completely
    black and white

    View full-size slide

  39. mild
    moderate
    moderately severe
    severe
    profound
    hearing

    View full-size slide

  40. astigmatism
    sensitivity
    colour blindness
    akinetopsia
    blindness
    eyesight

    View full-size slide

  41. Visual make it easy to read

    View full-size slide

  42. Hearing make it easy to hear

    View full-size slide

  43. Motor make it easy to interact

    View full-size slide

  44. Cognitive
    make it easy to
    understand and focus

    View full-size slide

  45. Good accessibility is good usability

    View full-size slide

  46. Examples
    Disclaimer

    View full-size slide

  47. apple.com/uk

    View full-size slide

  48. chicagomanualofstyle.org

    View full-size slide

  49. apple.com/uk/mac

    View full-size slide

  50. Squinting does not make an enjoyable
    reading experience

    View full-size slide

  51. 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 full-size slide

  52. What’s that supposed to mean?

    View full-size slide

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

    View full-size slide

  54. graphicalweb.org/2012

    View full-size slide

  55. bayerischerhof.de/en/hotel

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  58. Content hierarchy

    View full-size slide

  59. 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 full-size slide

  60. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  63. 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 full-size slide

  64. 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 full-size slide

  65. Finding interactive elements
    should not be a game.

    View full-size slide

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

    View full-size slide

  67. Why should I click there?

    View full-size slide

  68. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  74. 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 full-size slide

  75. Navigation and way-finding

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  78. First name
    Last name
    Email address
    Laura
    Kalbag
    [email protected]

    View full-size slide

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

    View full-size slide

  80. http://happycog.com/way

    View full-size slide

  81. Wait for me!

    View full-size slide

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

    View full-size slide

  83.  
         
           Hall  
         
         
           Kitchen  
         
       …  

     
       Hall  
       
     
       Kitchen  
     
    Meaningful vs not-so meaningful HTML

    View full-size slide

  84. Screen readers

    View full-size slide

  85.  
         
           Hall  
         
         
           Kitchen  
         
       …  

    list 2 items


    internal, link, Hall
    internal, link, Kitchen
    end of list
    How VoiceOver reads it

    View full-size slide

  86.  
       Hall  
       
     
       Kitchen  

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  95. Images
    ARIA Roles

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  101. 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 full-size slide

  102.  
       role="navigation">  

    ARIA Landmarks

    View full-size slide

  103. When we shouldn’t use WAI-ARIA

    View full-size slide

  104. HTML5 vs Landmarks
    role="navigation">
     
         

    w3.org/html/wg/drafts/html/master/infrastructure.html#default-implicit-aria-semantics

    View full-size slide

  105. ARIA vs HTML
     
     
     

     
     
     

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

    View full-size slide

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

    View full-size slide

  107. Live Regions

    View full-size slide

  108. New tweets available. Press period to review them.
     
       New  Tweets  available.  Press  period  to  
    review  them.  

    How Twitter uses aria-live

    View full-size slide

  109. Without ARIA, people can miss out

    View full-size slide

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

    View full-size slide

  111. html5accessibility.com by The Paciello Group

    View full-size slide

  112. ARIA can’t fix an unusable site

    View full-size slide

  113. a11yproject.com

    View full-size slide

  114. webaim.org/articles

    View full-size slide

  115. wave.webaim.org

    View full-size slide

  116. parkwoodtheatres.co.uk/theatre/

    View full-size slide

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

    View full-size slide

  118. leaverou.github.io/contrast-ratio

    View full-size slide

  119. colororacle.org

    View full-size slide

  120. ind.ie with Deuteranopia

    View full-size slide

  121. ind.ie with Protanopia

    View full-size slide

  122. ind.ie with Tritanopia

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  126. crawleytownfc.com

    View full-size slide

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

    View full-size slide

  128. lafitness.co.uk/gym/gatwick/

    View full-size slide

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

    View full-size slide

  130. cineworld.co.uk

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  133. $0, $100,000

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide