Your SlideShare is downloading. ×
0
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Accessible DOM Scripting with ARIA (2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accessible DOM Scripting with ARIA (2013)

2,377

Published on

Introduction to accessible DOM scripting with ARIA, including first principles, best practices and walkthrough examples.

Introduction to accessible DOM scripting with ARIA, including first principles, best practices and walkthrough examples.

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,377
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Accessible DOM scripting with ARIA Léonie Watson LJWatson.co.uk @LeonieWatson 1
  2. Overview • Anatomy of a rich internet application • First principles • Web accessibility stack • Best practices • Walkthrough examples LJWatson.co.uk @LeonieWatson 2
  3. Anatomy of a rich internet application LJWatson.co.uk @LeonieWatson 3
  4. Controls and widgets • Controls are single elements, like checkboxes, buttons or input fields • Widgets are composites of multiple elements, like sliders, accordions or modal dialogs LJWatson.co.uk @LeonieWatson 4
  5. Applications • Rich internet applications are web applications with desktop characteristics LJWatson.co.uk @LeonieWatson 5
  6. First principles LJWatson.co.uk @LeonieWatson 6
  7. Perceivable • Controls and widgets must provide information to assistive technologies • Dynamic changes in content must be communicated to assistive technologies LJWatson.co.uk @LeonieWatson 7
  8. Operable • Controls and widgets must be keyboard accessible LJWatson.co.uk @LeonieWatson 8
  9. Understandable • Controls and widgets must be properly labelled and described LJWatson.co.uk @LeonieWatson 9
  10. Robust • Controls and widgets must have reasonable backwards compatibility. • Controls and widgets should have good forwards compatibility LJWatson.co.uk @LeonieWatson 10
  11. Web accessibility stack LJWatson.co.uk @LeonieWatson 11
  12. Layers in the web accessibility stack • Assistive technology • Accessibility API • Accessible Rich Internet Applications (ARIA) • Document Object Model (DOM) LJWatson.co.uk @LeonieWatson 12
  13. Understanding the web accessibility stack: DOM layer <img src="button.gif" alt="Accept" onclick="doSomething()" onkeypress="doSomething()"> LJWatson.co.uk @LeonieWatson 13
  14. Understanding the web accessibility stack: ARIA layer <img src="button.gif" alt="Accept" onclick="doSomething()" onkeypress="doSomething()" tabindex="0" role="button"> LJWatson.co.uk @LeonieWatson 14
  15. Best practices LJWatson.co.uk @LeonieWatson 15
  16. Use native HTML elements • Do this: <p> <button>Button text</button> </p> LJWatson.co.uk @LeonieWatson 16
  17. Don’t override native semantics • Don’t do this: <p role="button">Button text</p> • Do this: <span role="button">Button text</span> LJWatson.co.uk @LeonieWatson 17
  18. Managing keyboard focus LJWatson.co.uk @LeonieWatson 18
  19. Make controls and widgets focusable • Elements with tabindex="0" are part of the natural tab sequence • Elements with tabindex="-1" are not, but are focusable with scripting • Elements with tabindex=">0" are never a good idea LJWatson.co.uk @LeonieWatson 19
  20. Make focus visible • Do this: a:focus, a:hover, a:active { text-decoration: underline; } • Don't do this: a { text-outline:none; } LJWatson.co.uk @LeonieWatson 20
  21. Providing keyboard accessibility LJWatson.co.uk @LeonieWatson 21
  22. Use appropriate event handlers • Do this: <span tabindex="0" role="button" onclick="doSomething()" onkeypress="doSomething()"> <img src="example.png" alt="Submit"> </span> • Don't do this: <span tabindex="0" role="button" onclick="doSomething()"> <img src="example.png" alt="Submit"> </span> LJWatson.co.uk @LeonieWatson 22
  23. Don’t cause keyboard traps • Don't do this: <input type="text" id="user" required onblur="if(this.value=='') {this.focus();}"> • Don’t do this either: onfocus = "this.blur()" LJWatson.co.uk @LeonieWatson 23
  24. Don’t change context on focus • Don't do this: <select onchange= "document.location=‘http://goog le.com';"> … </select> LJWatson.co.uk @LeonieWatson 24
  25. Handling widget focus LJWatson.co.uk @LeonieWatson 25
  26. Give widgets a single tab stop • A widget represents a single tab stop, and other keys are used to interact with the widget itself LJWatson.co.uk @LeonieWatson 26
  27. Using JavaScript to handle child focus • Set tabindex of current child to 0, and all other children to -1 • As the user moves to another child, update the tabindex for the previous and current children accordingly • Use element.focus() to move focus to the child with tabindex set to 0 LJWatson.co.uk @LeonieWatson 27
  28. Using ARIA to handle child focus • Set the tabindex of the parent element to 0, and set its aria-activedescendant property to the id of the currently active child • As the user moves to another child, update the aria-activedescendant property accordingly LJWatson.co.uk @LeonieWatson 28
  29. Put the key handler on the parent element • Captures the keystrokes, determines which element takes focus next, and updates the aria-activedesendant property LJWatson.co.uk @LeonieWatson 29
  30. Use the scrollIntoView() method • Or a purpose built function, to ensure the active descendant moves into view LJWatson.co.uk @LeonieWatson 30
  31. Providing keyboard shortcuts LJWatson.co.uk @LeonieWatson 31
  32. Don’t enable keyboard shortcuts by default • Many assistive technologies are controlled with native shortcuts • Custom shortcuts should be clearly documented LJWatson.co.uk @LeonieWatson 32
  33. Cancel (or swallow) keyboard events • Prevent the key from executing an action outside of the widget or web application, unless focus is on a form field LJWatson.co.uk @LeonieWatson 33
  34. Dynamically updating content LJWatson.co.uk @LeonieWatson 34
  35. Using CSS to show/hide content • Use CSS when the content makes sense as part of the page, not when it’s dependent on a certain action LJWatson.co.uk @LeonieWatson 35
  36. Injecting content into the DOM • Do this: <div id="errors"></div> <script> var errors = document.getElementById("errors"); var error = document.createElement("p"); error.appendChild(document.createText Node("You must provide a username.")); errors.appendChild(error); </script> LJWatson.co.uk @LeonieWatson 36
  37. Using innerHTML • Do this: <div id="errors"></div> <script> var html = ""; html = html + "<li>You must enter a username</li>"; html = html + "<li>Please use at least one number in your password</li>"; document.getElementById("errors").inn erHTML = "<ul>" + html + "</ul>"; </script> LJWatson.co.uk @LeonieWatson 37
  38. Walkthrough examples LJWatson.co.uk @LeonieWatson 38
  39. Expandable content (HTML/ARIA) <div id="collapsible"> <button id="tea" aria-controls="tea- content">Types of tea</button> <div style="display:none;" id="tea-content" aria-expanded="false"> <h2>Types of tea</h2> <ul> <li>Black tea</li> <li>Green tea</li> </ul> </div> </div> LJWatson.co.uk @LeonieWatson 39
  40. Expandable content (JavaScript) <script> document.getElementById("tea").onclick = function() { var tea = document.getElementById("tea- content"); var expanded; tea.style.display = (tea.style.display == "block") ? "none" : "block“; expanded = tea.getAttribute("aria-expanded") == "false" ? "true" : "false“; tea.setAttribute("aria-expanded", expanded); }; </script> LJWatson.co.uk @LeonieWatson 40
  41. Live region updates (HTML/ARIA) <h1>Tequila</h1> <p>Tequila makes me happy...</p> <div> <button onclick="updateItems()">Add to basket</button> </div> <h2>Basket summary</h2> <div aria-live="assertive" aria-atomic="true"> <p>Your basket contains <span id="quantity">0</span> items.</p> </div> LJWatson.co.uk @LeonieWatson 41
  42. Live region updates (JavaScript) <script> var items = 0; function updateItems () { items = items + 1; document.getElementById("quantity") .innerHTML=items; } </script> LJWatson.co.uk @LeonieWatson 42
  43. Modal dialogs (HTML/ARIA) <div> <button id="launchBtn">Open modal</button> </div> <div id="modal" style="display:none;" role="alertdialog" aria-labelledby="mdlTitle" aria-describedby="mdlMsg“> <h1 id="mdlTitle">Modal title</h1> <p id="mdlMsg">Modal message.</p> <div> <button id="ok">Ok</button> <button id="cancel">Cancel</button> </div> </div> LJWatson.co.uk @LeonieWatson 43
  44. Modal dialogs (JavaScript 1) (function(){ function openModal() { modal.style.display = 'block‘; setTimeout(function () {objFirst.focus();}, 100); } function closeModal() { modal.style.display = 'none‘; trigger.focus(); } … })(); LJWatson.co.uk @LeonieWatson 44
  45. Modal dialogs (JavaScript 2) (function(){ … function handleKeyboard(event) { switch (event.keyCode) { case 9: if (event.target === objLast && !event.shiftKey) { objFirst.focus(); event.preventDefault(); } else if (event.target === objFirst && event.shiftKey) { objLast.focus(); event.preventDefault(); } return false; break; case 27: closeModal(); return false; break; default: return true; } } … } LJWatson.co.uk @LeonieWatson 45
  46. Resources • WAI-ARIA 1.0 Authoring Practices: http://www.w3.org/TR/wai-aria-practices/ • Using WAI-ARIA in HTML: http://www.w3.org/TR/2013/WD-aria-in-html-20130214/ • HTML to Platform Accessibility APIs Implementation Guide: http://www.w3.org/TR/html-aapi/ • The Paciello Group Blog: http://blog.paciellogroup.com/ • Open AJAX Alliance Examples: http://www.oaa-accessibility.org/examples/ LJWatson.co.uk @LeonieWatson 46
  47. Thank you! LJWatson.co.uk @LeonieWatson 47

×