Inclusive Web: Getting started with Accessibility

Inclusive Web: Getting started with Accessibility

My Accessibility talk form EmpireJS 2015

21b731c153b8444dc9d4d27948156a9a?s=128

Jon Kuperman

April 26, 2015
Tweet

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

  15. None
  16. None
  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 ” />

  21. None
  22. What your users hear

  23. None
  24. What your users hear

  25. None
  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

  39. None
  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