Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to ARIA (Bay Area Accessibility meetup 2015)

255 views

Published on

An introduction to Accessible Rich Internet Applications (ARIA) 1.0

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to ARIA (Bay Area Accessibility meetup 2015)

  1. 1. Introduction to ARIA Bay Area Accessibility LJWatson.co.uk @LeonieWatson 1
  2. 2. Accessibility mechanics LJWatson.co.uk @LeonieWatson 2
  3. 3. Platform accessibility APIs • Expose semantic information to assistive technologies LJWatson.co.uk @LeonieWatson 3
  4. 4. Cross-platform MSAA/UIAutomation Windows IAccessible2 Windows Linux AT-SPI Linux NSAccessibility OSX UIAccessibility iOS Accessibility Framework Android LJWatson.co.uk @LeonieWatson
  5. 5. HTML to platform mapping • Most HTML elements and attributes map to their platform counterparts LJWatson.co.uk @LeonieWatson 5
  6. 6. Dom tree
  7. 7. Accessibility tree
  8. 8. Role • <input type="checkbox" id="drink" checked> • <label for="drink">Tequila</label> LJWatson.co.uk @LeonieWatson
  9. 9. State • <input type="checkbox" id="drink" checked> • <label for="drink">Tequila</label> LJWatson.co.uk @LeonieWatson
  10. 10. Properties • <input type="checkbox" id="drink" checked> • <label for="drink">Tequila</label> LJWatson.co.uk @LeonieWatson
  11. 11. Accessibility APIs & JavaScript • Accessibility APIs can’t be queried using JavaScript LJWatson.co.uk @LeonieWatson 11
  12. 12. Accessibility APIs & ARIA • ARIA 1.0 – W3C Recommendation • ARIA 1.1 – W3C Working draft LJWatson.co.uk @LeonieWatson 12
  13. 13. ARIA roles • 30+ roles including: – checkbox – dialog – menubar – toolbar – tab – tree LJWatson.co.uk @LeonieWatson 13
  14. 14. ARIA states • 9 states including: – aria-checked – aria-pressed – aria-hidden – aria-invalid LJWatson.co.uk @LeonieWatson 14
  15. 15. ARIA properties • 20+ properties including: – aria-controls – aria-describedby – aria-label – aria-required LJWatson.co.uk @LeonieWatson 15
  16. 16. Building a custom disclosure widget LJWatson.co.uk @LeonieWatson 16
  17. 17. Skeleton HTML <span id="button"> Tequila <span id="icon"></span> </span> <div id="content">Makes me happy...</div> LJWatson.co.uk @LeonieWatson
  18. 18. Using a mouse LJWatson.co.uk @LeonieWatson
  19. 19. Using a Keyboard LJWatson.co.uk @LeonieWatson
  20. 20. Add role <span id="button" role="button”> Tequila <span id="icon"></span> </span> LJWatson.co.uk @LeonieWatson
  21. 21. Add tabindex <span id="button" role="button" tabindex="0”> Tequila <span id="icon"></span> </span> LJWatson.co.uk @LeonieWatson
  22. 22. Add focus visuals [role="button"]:hover, [role="button"]:focus { background-color: #333; color: #fff; text-shadow: 0 -1px 0 #444; box-shadow: 0 1px 0 #666; } LJWatson.co.uk @LeonieWatson
  23. 23. Add event listeners document.getElementById("button") .addEventListener("click", toggleDisclosure); document.getElementById("button") .addEventListener("keydown", toggleDisclosure); LJWatson.co.uk @LeonieWatson
  24. 24. Add Keyboard interaction function toggleDisclosure(event) { var type = event.type; if (type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)) { return true } event.preventDefault(); } LJWatson.co.uk @LeonieWatson
  25. 25. Add aria-expanded <span id="button" role="button" tabindex="0" aria-expanded="false”> Tequila <span id="icon"></span> </span> LJWatson.co.uk @LeonieWatson
  26. 26. Add state visuals [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; } LJWatson.co.uk @LeonieWatson
  27. 27. Add aria-controls <span id="button" role="button" tabindex="0" aria-expanded="false" aria-controls="content"> Tequila <span id="icon"></span> </span> <div id="content"> Makes me happy... </div> LJWatson.co.uk @LeonieWatson
  28. 28. Add aria-hidden <span id="button" role="button" tabindex="0" aria-expanded="false" aria-controls="content"> Tequila <span id="icon" aria-hidden="true"></span> </span> <div id="content" aria-hidden="true"> Makes me happy </div> LJWatson.co.uk @LeonieWatson
  29. 29. Add more state visuals div[aria-hidden="true”] { display: none; } div[aria-hidden="false”] { display: block; border: 1px #000 solid; padding: 1em; background: #555; color: #FFF; } LJWatson.co.uk @LeonieWatson
  30. 30. Add functionality function toggleDisclosure(event) { var button = document.getElementById("button"); var content = document.getElementById("content"); if(content.getAttribute("aria-hidden") == "true") { content.setAttribute("aria-hidden", "false"); button.setAttribute("aria-expanded", "true"); } else { content.setAttribute("aria-hidden", "true"); button.setAttribute("aria-expanded", "false"); } } LJWatson.co.uk @LeonieWatson
  31. 31. Using a screen reader LJWatson.co.uk @LeonieWatson
  32. 32. Thank you LJWatson.co.uk @LeonieWatson 32

×