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.

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
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/
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
54. DON’T do outline:none;
55. DON’T do outline:none; … but if you must, provide an obvious focus state
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
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
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/