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 accessibility mechanics (Accessibility Camp Toronto 2015)

244 views

Published on

An introduction to accessibility mechanics, the accessibility tree, and accessibility APIs

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to accessibility mechanics (Accessibility Camp Toronto 2015)

  1. 1. Introduction to accessibility mechanics Accessibility Camp, Toronto @LeonieWatson tink.uk 1
  2. 2. HTML MECHANICS @LeonieWatson tink.uk 2
  3. 3. Roles • Most HTML elements have default implicit roles @LeonieWatson tink.uk 3
  4. 4. <img> element • Has an implicit role of "graphic" or "image" <img src="bottle.png" alt="Chamuco's tequila"> @LeonieWatson tink.uk 4
  5. 5. <main> element • Has an implicit landmark role of "main" <main>…</main> @LeonieWatson tink.uk 5
  6. 6. <span> & <div> elements • Have weak roles, so are "semantically neutral" <div>This is text</div> <span>So is this</span> @LeonieWatson tink.uk 6
  7. 7. Name • Many HTML elements can have an accessible name @LeonieWatson tink.uk 7
  8. 8. <a> element • Has accessible name of “tink.uk" <a href=http://tink.uk>tink.uk</a> @LeonieWatson tink.uk 8
  9. 9. <img> element • Has accessible name of "Chamuco's tequila" <img src="bottle.png" alt="Chamuco's tequila"> @LeonieWatson tink.uk 9
  10. 10. <label> element • Has accessible name of "Yes" <label> <input type="radio" name="choice">Yes </label> @LeonieWatson tink.uk 10
  11. 11. States • Some elements have different states @LeonieWatson tink.uk 11
  12. 12. Checked state • Has a state of "checked" <label> <input type="checkbox" checked>Agree </label> @LeonieWatson tink.uk 12
  13. 13. Required state • Has a state of "required" <label>Colour* <select required>…</select> </label> @LeonieWatson tink.uk 13
  14. 14. Focus • All interactive HTML elements have focus and keyboard support built-in @LeonieWatson tink.uk 14
  15. 15. <a> element • Can be focused on, and activated with the enter key <a href=http://tink.uk>tink.uk</a> @LeonieWatson tink.uk 15
  16. 16. <button> element • Can take keyboard focus, and be activated with the enter or space keys @LeonieWatson tink.uk 16
  17. 17. ACCESSIBILITY APIS @LeonieWatson tink.uk 17
  18. 18. Platform accessibility APIs • Windows: MSAA UIAutomation IAccessible2 • Mac OS: NSAccessibility Protocol • Linux: IAccessible2 ATK/AT-ASPI • iOS: UIAccessibility • Android: Accessibility Framework @LeonieWatson tink.uk 18
  19. 19. Platform control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" @LeonieWatson tink.uk 19
  20. 20. Web control • Role is "checkbox" • Name is "Bold" • State is "Focused Checked Focusable" <label> <input type="checkbox" checked>Bold </label> @LeonieWatson tink.uk 20
  21. 21. HTML accessibility API mappings • Mappings between HTML elements and attributes and the platform accessibility APIs • http://www.w3.org/TR/html-aam-1.0/ @LeonieWatson tink.uk 21
  22. 22. BROWSER MECHANICS @LeonieWatson tink.uk 22
  23. 23. Dom tree @LeonieWatson tink.uk 23
  24. 24. Accessibility tree @LeonieWatson tink.uk 24
  25. 25. ACCESSIBILITY API ACCESS @LeonieWatson tink.uk 25
  26. 26. Using JavaScript • Accessibility APIs can't be accessed directly with JavaScript yet • W3C Web Platforms WG will work on JavaScript access to accessibility APIs @LeonieWatson tink.uk 26
  27. 27. Using ARIA • ARIA 1.0 (W3C Recommendation) • ARIA 1.1 (W3C Working draft) @LeonieWatson tink.uk 27
  28. 28. Roles • 30+ roles including: – dialog – slider – toolbar – tree – tablist @LeonieWatson tink.uk 28
  29. 29. alert role • Important time-sensitive notifications <section> <div role="alert">Email deleted</div> </section> @LeonieWatson tink.uk 29
  30. 30. note role Note relevant to the main content <div role="note"> Loves cooking, dancing, and drinking tequila (although not necessarily in that order). </div> @LeonieWatson tink.uk 30
  31. 31. States • 9 states including: – aria-checked – aria-pressed – aria-hidden – aria-invalid @LeonieWatson tink.uk 31
  32. 32. Aria-pressed attribute • Indicates whether a button is pressed <button aria-pressed="true">Mute</button> @LeonieWatson tink.uk 32
  33. 33. Aria-invalid attribute • Indicates when a form field is invalid <label>Email <input type="email" aria-invalid="true"> </label> @LeonieWatson tink.uk 33
  34. 34. Properties • 20+ properties including: – aria-controls – aria-describedby – aria-label – Aria-level @LeonieWatson tink.uk 34
  35. 35. Aria-label attribute • Provides an accessible name <nav aria-label="Website">…</nav> @LeonieWatson tink.uk 35
  36. 36. Aria-describedby attribute • Provides an accessible description <label> Date of birth <input type="text" aria-describedby="format"> </label> <p id="format">Date must be DD/MM/YYYY</p> @LeonieWatson tink.uk 36
  37. 37. Aria-haspopup attribute • Indicates that a popup menu is available <button aria-haspopup="true"> Account </button> @LeonieWatson tink.uk 37
  38. 38. ARIA constraints • Doesn't change the DOM, only the accessibility tree • Is only available to assistive technologies • Doesn't provide functionality or behaviour @LeonieWatson tink.uk 38
  39. 39. Visual ARIA • Bookmarklet tool for visualising ARIA in action • http://whatsock.com/training/matrices/visual-aria.htm @LeonieWatson tink.uk 39
  40. 40. DISCLOSURE DESIGN PATTERN @LeonieWatson tink.uk 40
  41. 41. Basic HTML <span id="button"> Tequila <span id="icon"></span> </span> <div id="content">Makes me happy…</div> @LeonieWatson tink.uk 41
  42. 42. Using a mouse
  43. 43. Using a Keyboard
  44. 44. Add button role <span id="button" role="button"> Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 44
  45. 45. Add tabindex attribute <span id="button" role="button" tabindex="0"> Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 45
  46. 46. Add focus styles [role="button"]:hover, [role="button"]:focus { background-color: #333; color: #fff; text-shadow: 0 -1px 0 #444; box-shadow: 0 1px 0 #666; } @LeonieWatson tink.uk 46
  47. 47. Add keyboard event listener var button = document.getElementById("button"); button.addEventListener("click", toggleDisclosure); button.addEventListener("keydown", toggleDisclosure); @LeonieWatson tink.uk 47
  48. 48. Add keyboard interaction function toggleDisclosure(event) { var type = event.type; if (type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)) { return true; } event.preventDefault(); } @LeonieWatson tink.uk 48
  49. 49. Add aria-expanded attribute <span id="button" role="button" tabindex="0“ aria-expanded="false"> Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 49
  50. 50. Associate styles with state [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; } @LeonieWatson tink.uk 50
  51. 51. Add aria-controls attribute <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> @LeonieWatson tink.uk 51
  52. 52. Add aria-hidden attribute <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> @LeonieWatson tink.uk 52
  53. 53. Associate styles with state div[aria-hidden="true”] { display: none; } div[aria-hidden="false”] { display: block; border: 1px #000 solid; padding: 1em; background: #555; color: #FFF; } @LeonieWatson tink.uk 53
  54. 54. 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"); } } @LeonieWatson tink.uk 54
  55. 55. Using a screen reader
  56. 56. THANK YOU. QUESTIONS? @LeonieWatson tink.uk 56

×