SelfConf Accessibility Talk

Transcript

1. The Inclusive Web An Introduction to Web Accessibility
2. Jon Kuperman @jkup
3. What is accessibility? Making websites usable for:
4. What is accessibility? Making websites usable for: people that can’t see
5. What is accessibility? Making websites usable for: people that can’t use a mouse
6. What is accessibility? Making websites usable for: everyone
7. Everyone should have not only a usable experience, but a good experience.
8. Web accessibility means that people with disabilities can use the Web.
9. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
10. Types of Disabilities • Attention-Deficit/Hyperactivity Disorders • Blindness or Low Vision • Brain Injuries • Deaf/Hard-of-Hearing • Learning Disabilities • Physical Disabilities • Speech and Language Disabilities Johns Hopkins University
11. Don’t Assume
12. So Many Ways To Browse The Web Mouth Sticks Screen Readers Magnification Keyboard shortcuts
13. Keyboard and Mouse
14. Keyboard Only
15. Head Wand
16. Mouthstick
17. Single Switch
18. Screen Reader
19. Demo Screen Reader
23. The Web is Already Accessible even if your website is not
26. Let’s Talk Numbers
27. One in six Americans (17%), 45 years of age or older, representing 16.5 million middle-age and older adults, report some form of vision impairment even when wearing glasses or contact lenses Lighthouse International Research Study
28. An estimated 7.9 million persons (age 6 and older) have difficulty seeing words and letters in ordinary newspaper print Lighthouse International Research Study
29. About 15 percent of the world's population — some 785 million people — has a significant physical or mental disability
30. Supporting • Alternate Text • Semantic Markup • ARIA • Keyboard Shortcuts These Devices Requires:
31. <img alt=“ Alternate Text ” />
33. What your users hear
35. What your users hear
37. Writing Good Alt Text •Be accurate •Be succinct •Don’t be redundant •Don’t use "image of" or "graphic of" http://webaim.org/techniques/alttext/
38. Semantic Markup
39. Not Semantic Markup <span class=“button”>Click Me</span>
40. Not Always So Easy <ol> <li id=“tab1”>Chapter One</li> <li id=“tab2”>Chapter Two</li> <li id=“tab3”>Chapter Three</li> </ol>
41. ARIA Accessible Rich Internet Applications
42. Warning Signs .button { … } .checkbox { … }
43. ARIA Example <span class=“button”>Click Me</span>
44. Add role <span role=“button” class=“button”>Click Me</span>
45. Add tabindex <span tabindex=“0” role=“button” class=“button”>Click Me</span>
46. Tabindex continued... Three options: 1. Positive Number (low to high) 2. Zero 3. Negative Number
47. Add Interaction <span tabindex=“0” role=“button” class=“button” onclick=“btnClicked()” onKeyUp=“btnClicked()”> Click Me </span>
48. Practical Example
49. HTML <div style=“display: none”> <h3 id="dialog">I’m a dialog</h3> <button class="close-button" onclick="hide();"> Close Dialog </button> </div> <p> <a onclick="show()" href="#">Display a dialog</a> </p>
50. The Dialog Box <div role="dialog" aria-labelledby="dialog"> <h3 id="dialog">I’m a dialog</h3>
51. Roles and Labels Setting the Role to Dialog lets the screen reader know the elements are grouped, but you still need: 1. To label the dialog with aria-labelledby 2. To manage keyboard focus
52. The Link <a onclick="show()" href="#">Display a dialog</a>
53. The Link… That’s actually a button <a href="#" onclick="show()" role="button"> Display a dialog </a>
54. If you can use a native HTML element [HTML5] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
55. WAI and WCAG Web Accessibility Initiative Web Content Accessibility Guidelines
56. WAI publishes WCAG Web Accessibility Initiative Web Content Accessibility Guidelines
57. WAI Web Accessibility Initiative is an effort to improve the accessibility of the World Wide Web for people with disabilities.
58. WCAG Web Content Accessibility Guidelines covers a wide range of recommendations for making Web content more accessible.
59. WCAG At a Glance • Perceivable • Operable • Understandable • Robust
60. Perceivable • Provide text alternatives for non-text content. • Provide captions and other alternatives for multimedia. • Create content that can be presented in different ways, Including by assistive technologies, without losing meaning. • Make it easier for users to see and hear content.
61. Operable • Make all functionality available from a keyboard. • Give users enough time to read and use content. • Do not use content that causes seizures. • Help users navigate and find content.
62. Understandable • Make text readable and understandable. • Make content appear and operate in predictable ways. • Help users avoid and correct mistakes.
63. Robust • Maximize compatibility with current and future user tools.
64. Keyboard shortcuts
65. Twitter
66. Facebook
68. Why is this • Human Rights • Legal Issue • Reach a larger audience Important
69. Tools for evaluating your site
70. Chrome Extension
72. a11y
74. Tenon.io
76. Accessible Color Palette
80. Interviews Accessible
81. 3 Things You Can Do Right Now 1. Audit your site 2. Check your color scheme 3. Join the community! @jkup