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.

Using ARIA to solve accessibility problems (Frontend FI 2015)

2,497 views

Published on

Understanding accessibility mechanics is an important part of good interface design. Find out about the relationship between your code, the browser, and assistive technologies, and how to create accessible interfaces with ARIA (Accessible Rich Internet Applications).

ARIA can be used to make common widget design patterns more accessible - like tabs, disclosures and auto-complete. It also has a role to play in JavaScript framework accessibility, where accessibility is not included by default.

Published in: Technology
  • Be the first to comment

Using ARIA to solve accessibility problems (Frontend FI 2015)

  1. 1. Using ARIA to solve accessibility problems FrontEnd.FI, Helsinki @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. States • 9 states including: – aria-checked – aria-pressed – aria-hidden – aria-invalid @LeonieWatson tink.uk 29
  30. 30. Properties • 20+ properties including: – aria-controls – aria-describedby – aria-label – Aria-level @LeonieWatson tink.uk 30
  31. 31. 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 31
  32. 32. Visual ARIA • Bookmarklet tool for visualising ARIA in action • http://whatsock.com/training/matrices/visual -aria.htm @LeonieWatson tink.uk 32
  33. 33. DISCLOSURE DESIGN PATTERN @LeonieWatson tink.uk 33
  34. 34. Basic HTML <span id="button">Tequila <span id="icon"></span> </span> <div id="content">Makes me happy…</div> @LeonieWatson tink.uk 34
  35. 35. Using a mouse
  36. 36. Using a Keyboard
  37. 37. Add button role <span id="button" role="button">Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 37
  38. 38. Add tabindex attribute <span id="button" role="button" tabindex="0"> Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 38
  39. 39. 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 39
  40. 40. Add keyboard event listener var button = document.getElementById("button"); button.addEventListener("click", toggleDisclosure); button.addEventListener("keydown", toggleDisclosure); @LeonieWatson tink.uk 40
  41. 41. 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 41
  42. 42. Add aria-expanded attribute <span id="button" role="button" tabindex="0" aria-expanded="false"> Tequila <span id="icon"></span> </span> @LeonieWatson tink.uk 42
  43. 43. Associate styles with state [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; } @LeonieWatson tink.uk 43
  44. 44. 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 44
  45. 45. 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 45
  46. 46. 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 46
  47. 47. 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 47
  48. 48. Using a screen reader
  49. 49. TABS DESIGN PATTERN @LeonieWatson tink.uk 49
  50. 50. Basic HTML <ul> <li><a href="#p1" id="t1">Blanco</a></li> <li><a href="#p2" id="t2">Reposado</a></li> </ul> <div id="p1">Blanco tequila is…</div> <div id="p2">Blanco tequila is…</div> @LeonieWatson tink.uk 50
  51. 51. Add tablist role <ul role="tablist"> <li><a href="#p1" id="t1">Blanco</a></li> <li><a href="#p2" id="t2">Reposado</a></li> </ul> @LeonieWatson tink.uk 51
  52. 52. Add tab roles <ul role="tablist"> <li><a href="#p1" id="t1" role="tab">Blanco</a></li> <li><a href="#p2" id="t2" role="tab">Reposado</a></li> </ul> @LeonieWatson tink.uk 52
  53. 53. Add tabpanel roles <div id="p1" role="tabpanel">Blanco tequila is…</div> <div id="p2" role="tabpanel">Reposado tequila is…</div> @LeonieWatson tink.uk 53
  54. 54. Add presentation roles <ul role="tablist"> <li role="presentation"><a href="#p1" id="t1" role="tab">Blanco</a></li> <li role="presentation"><a href="#p2" id="t2" role="tab">Reposado</a></li> </ul> @LeonieWatson tink.uk 54
  55. 55. Add aria-selected attribute <ul role="tablist"> <li role="presentation"> <a href="#p1" id="t1" role="tab" aria-selected="true">Blanco</a></li> <li role="presentation"> <a href="#p2" id="t2" role="tab" aria-selected="false"> Reposado</a></li> </ul> @LeonieWatson tink.uk 55
  56. 56. Add aria-controls attribute <ul role="tablist"> <li role="presentation"> <a href="#p1" id="t1" role="tab" aria-selected="true" aria-controls="p1"> Blanco</a></li> </ul> <div id="p1" role="tabpanel">Blanco tequila is…</div> @LeonieWatson tink.uk 56
  57. 57. Add aria-labelledby attribute <ul role="tablist"> <li role="presentation"> <a href="#p1" id="t1" role="tab" aria-selected="true" aria-controls="p1"> Blanco</a></li> </ul> <div id="p1" role="tabpanel" aria-labelledby="t1">Blanco tequila is…</div> @LeonieWatson tink.uk 57
  58. 58. Add aria-hidden attribute <ul role="tablist"> <li role="presentation"><a href="#p1" id="t1" role="tab" aria-selected="true">Blanco</a></li> </ul> <div id="p1" role="tabpanel" aria-labelledby="t1“ aria-hidden=false">Blanco tequila is…</div> <div id="p2" role="tabpanel" aria-labelledby="t2" aria-hidden="true">Reposado tequila is…</div> @LeonieWatson tink.uk 58
  59. 59. ARIA AND FRAMEWORKS @LeonieWatson tink.uk 59
  60. 60. Ember A11y Testing • Suite of accessibility tests for Ember • Tests for text descriptions, keyboard focus, form labels, colour contrast and more @LeonieWatson tink.uk 60
  61. 61. Run full test suite test('Home page passes a11y tests', function(assert) { visit('/'); andThen(function() { assert.ok(a11yTest()); }); }); @LeonieWatson tink.uk 61
  62. 62. Run individual tests test('Home page passes a11y tests', function(assert) { visit('/'); andThen(function() { assert.ok(a11yTest({ checkAriaRoles: false })); }); }); @LeonieWatson tink.uk 62
  63. 63. React A11y • Test suite with filters for desktop and mobile specific testing @LeonieWatson tink.uk 63
  64. 64. Running full test suite var a11y = require('react-a11y'); if (ENV === 'development') a11y(React); @LeonieWatson tink.uk 64
  65. 65. Running mobile test suite a11y(React, { device: ['mobile'] }); @LeonieWatson tink.uk 65
  66. 66. Tenon for Grunt • Test suites for use with Grunt and Gulp build tools using the Tenon API @LeonieWatson tink.uk 66
  67. 67. Enable Tenon in Gruntfile grunt.loadNpmTasks('grunt-tenon-client'); @LeonieWatson tink.uk 67
  68. 68. Example Gruntfile configuration tenon: { options: { key: 'your Tenon API key', filter: [31, 54], level: 'AA' }, } @LeonieWatson tink.uk 68
  69. 69. Angular ngAria • Directives for injecting ARIA into Angular @LeonieWatson tink.uk 69
  70. 70. Make ngAria a dependency angular.module('myApp', [require('angular-aria')]); @LeonieWatson tink.uk 70
  71. 71. ngAria directives • ngModel, ngDisabled, ngShow, ngHide, • ngClick, ngDblClick, and ngMessages @LeonieWatson tink.uk 71
  72. 72. Using ng-disabled <md-checkbox ng-disabled="disabled"> Becomes <md-checkbox ng-disabled="disabled" aria-disabled="true"> @LeonieWatson tink.uk 72
  73. 73. THANK YOU. QUESTIONS? @LeonieWatson tink.uk 73

×