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

Accessibility - busting a few misconceptions

7d86093feb64d21538561ea2c071a89e?s=47 Fiona Chan
September 06, 2014

Accessibility - busting a few misconceptions

There are a few common misconceptions that people seem to have when they think of accessibility. This talk explains what these misconceptions are, why we should care about accessibility and techniques we can use to improve it.

This talk was first presented at Learnosity.

7d86093feb64d21538561ea2c071a89e?s=128

Fiona Chan

September 06, 2014
Tweet

Transcript

  1. Accessibility Busting a few misconceptions

  2. I don’t have users with disabilities 1

  3. Accessibility:

  4. 
 Making sure your content is available to the widest

    possible audience Accessibility:
  5. Main types of impairment

  6. Visual Low vision, colour blindness, akinetopsia, blindness…

  7. Hearing Mild, moderate, severe, profound

  8. Motor Traumatic injuries, cerebral palsey, MS, Essential Tremor…

  9. Cognitive Memory, linguistic comprehension, visual comprehension…

  10. U.S. and Australia 1 in 5 people have a disability

    http://www.and.org.au/pages/disability-statistics.html https://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html
  11. U.S. 8.1 million people have visual impairment http://www.interactiveaccessibility.com/accessibility-statistics

  12. U.S. 7.6 million people have difficulty hearing http://www.interactiveaccessibility.com/accessibility-statistics

  13. U.S. 19.9 million people have difficulty lifting and grasping http://www.interactiveaccessibility.com/accessibility-statistics

  14. Australia 357,000 are blind or have low vision http://www.and.org.au/pages/disability-statistics.html

  15. Australia 357,000 are blind or have low vision 8% of

    people, mostly males, suffer from some form of colour-blindness. http://www.and.org.au/pages/disability-statistics.html
  16. Australia 1 in 6 people affected by hearing impairment http://www.and.org.au/pages/disability-statistics.html

  17. Short-term impairment

  18. None
  19. http://goo.gl/g4c3rR

  20. Accessibility is optional 2

  21. Section 508 Federal government must provide electronic and information technology

    goods and services that are fully accessible to those with disabilities.
  22. American with Disabilities Act Ensure people with disabilities can have

    an equal opportunity to participate in programs, services, and activities.
  23. Maguire V SOCOG

  24. Accessibility has little benefit for my business 3

  25. Better accessibility = Better usability

  26. Consistent design

  27. Clear, readable text

  28. http://goo.gl/gd3FFr

  29. So… what can we do?

  30. Alt text 1

  31. Add meaningful text to important images

  32. alt=“”

  33. Semantic HTML 2

  34. List of related information <ul>

  35. http://www.bbc.com/

  36. None
  37. None
  38. Directs user to another page <a>

  39. Triggering an action
 e.g. toggling something, submitting something <button type=“button”>

    <button type=“submit”>
  40. <span class="button" role="button">! Click me! <span>

  41. <span class="button" role="button">! Click me! <span>

  42. <a href="#" class="button">! Click me! </a>

  43. <a href="#" class="button">! Click me! </a>

  44. <a href="#" class=“button" role="button">! If you *really* can’t use a

    button! </a>
  45. Grouping related form fields together <fieldset> <legend>

  46. <form id="payment">! <fieldset>! <legend>Your details</legend>! ...! </fieldset>! </form> ! http://24ways.org/2009/have-a-field-day-with-html5-forms/

  47. <header>
 
 <nav>
 
 <aside>! <footer> HTML5 https://www.youtube.com/watch?v=IhWMou12_Vk

  48. Form fields should have associated label 3

  49. <label for="input-1">Name</label>! <input type="text" id="input-1">

  50. Keyboard accessible 4

  51. Video https://www.youtube.com/watch? v=MO2gpA91fR8&list=UU8NsdC6bvekxz5GgG9Ns_tA

  52. Allow logical tab order

  53. None
  54. DON’T do outline:none;

  55. DON’T do outline:none; … but if you must, provide an

    obvious focus state
  56. None
  57. If you add :hover, add :focus too

  58. Colour contrast 5

  59. Decent font size and colour contrast

  60. some tiny grey text

  61. http://leaverou.github.io/contrast-ratio/

  62. Don’t use colour alone to convey important things

  63. None
  64. None
  65. None
  66. None
  67. None
  68. ARIA 6

  69. <header role="banner">...</header>! ! <main role="main">...</main>! ! <footer role="contentinfo">...</footer>!

  70. role=“tooltip”! role=“modal”! role=“tab” http://www.w3.org/TR/wai-aria/roles

  71. http://www.w3.org/TR/wai-aria/states_and_properties aria-haspopup! aria-hidden! aria-live! aria-grabbed

  72. None
  73. Think about users who aren’t like us

  74. Do the best that we can

  75. Tools • Firefox Accessibility Extension - general accessibility testing
 http://firefox.cita.illinois.edu/

    • Spectrum - test webpage with different types of colour vision deficiency.
 http://goo.gl/bCLPxz • Contrast Ratio
 http://leaverou.github.io/contrast-ratio/