Inclusive Web: Getting started with Accessibility

My Accessibility talk form EmpireJS 2015

Transcript

1. The Inclusive Web An Introduction to Web Accessibility
2. What is accessibility? Making websites usable for:
3. What is accessibility? Making websites usable for: people that can’t see
4. What is accessibility? Making websites usable for: people that can’t use a mouse
5. What is accessibility? Making websites usable for: everyone
6. Everyone should have not only a usable experience, but a good experience.
7. So Many Ways To Browse The Web Mouth Sticks Screen Readers Magnification Keyboard shortcuts
8. Keyboard and Mouse
9. Keyboard Only
10. Head Wand
11. Mouthstick
12. Single Switch
13. Screenreader
14. Demo Screen Reader
17. 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
18. An estimated 7.9 million persons (age 6 and older) have difficulty seeing words and letters in ordinary newspaper print Lighthouse International Research Study
19. Supporting • Alternate Text • Semantic Markup • ARIA • Keyboard Shortcuts These Devices Requires:
20. <img alt=“ Alternate Text ” />
22. What your users hear
24. What your users hear
26. 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/
27. Semantic Markup
28. Not Semantic Markup <span class=“button”>Click Me</span>
29. Not Always So Easy <ol> <li id=“tab1”>Chapter One</li> <li id=“tab2”>Chapter Two</li> <li id=“tab3”>Chapter Three</li> </ol>
30. ARIA Accessible Rich Internet Applications
31. ARIA Example <span class=“button”>Click Me</span>
32. Add role <span role=“button” class=“button”>Click Me</span>
33. Add tabindex <span tabindex=“0” role=“button” class=“button”>Click Me</span>
34. Add Interaction <span tabindex=“0” role=“button” class=“button” onclick=“btnClicked()” onKeyUp=“btnClicked()”> Click Me </span>
35. 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.
36. Keyboard shortcuts
37. Twitter
38. Facebook
40. Why is this • Human Rights • Legal Issue • Reach a larger audience Important
41. Tools for evaluating your site
42. Chrome Extension
43. a11y
44. Tenon.io
45. Accessible Color Palette
46. 3 Things You Can Do Right Now 1. Audit your site 2. Check your color scheme 3. Join the community! @jkup