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.
@LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK
ARIA, ACCESSIBILITY APIS &
CODING LIKE YOU GIVE A
D...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
FROM THE TOP
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ACCESSIBILITY APIS
MSAA/UIAutmoation Windows
IAccessible2 Windows Linux
AT-SPI Linux
N...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ACCESSIBILITY STACK
ASSISTIVE TECHNOLOGY
BROWSER
OPERATING SYSTEM
ACCESSIBILITY API
@LEONIEWATSON HTTP://LJWATSON.CO.UK
DOM TREE
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ACCESSIBILITY TREE
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ROLE
<input type="checkbox" id="drink" checked>
<label for="drink">Tequila</label>
@LEONIEWATSON HTTP://LJWATSON.CO.UK
STATE
<input type="checkbox" id="drink" checked>
<label for="drink">Tequila</label>
@LEONIEWATSON HTTP://LJWATSON.CO.UK
PROPERTIES
<input type="checkbox" id="drink" checked>
<label for="drink">Tequila</labe...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
SEMANTIC NAVIGATION
@LEONIEWATSON HTTP://LJWATSON.CO.UK
LANDMARK NAVIGATION
@LEONIEWATSON HTTP://LJWATSON.CO.UK
JAVASCRIPT
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ARIA
@LEONIEWATSON HTTP://LJWATSON.CO.UK
USING ARIA WITH HTML, CSS &
JAVASCRIPT
@LEONIEWATSON HTTP://LJWATSON.CO.UK
SKELETON HTML
<span id="button">Tequila <span
id="icon"></span></span>
<div id="conten...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
USING A MOUSE
@LEONIEWATSON HTTP://LJWATSON.CO.UK
USING A KEYBOARD
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ROLE
<span id="button" role="button”>
Tequila <span id="icon"></span></span>
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD TABINDEX
<span id="button" role="button" tabindex="0”>
Tequila <span id="icon"></s...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD FOCUS VISUALS
[role="button"]:hover, [role="button"]:focus {
background-color: #33...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD EVENT LISTENERS
document.getElementById("button").addEventListe
ner("click", toggl...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD KEYBOARD INTERACTION
function toggleDisclosure(event)
{
var type = event.type;
if ...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ARIA-EXPANDED
<span id="button" role="button"
tabindex="0" aria-expanded="false”>
...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD STATE VISUALS
[role="button"][aria-expanded="false"] .icon:after {
content: ' ›';
...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ARIA-CONTROLS
<span id="button" role="button" tabindex="0"
aria-expanded="false" a...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ARIA-HIDDEN
<span id="button" role="button" tabindex="0"
aria-expanded="false" ari...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD MORE STATE VISUALS
div[aria-hidden="true”] {
display: none;
}
div[aria-hidden="fal...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD FUNCTIONALITY
function toggleDisclosure(event)
{
var button = document.getElementB...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
USING A SCREEN READER
@LEONIEWATSON HTTP://LJWATSON.CO.UK
PERFECT IS THE ENEMY OF GOOD
@LEONIEWATSON HTTP://LJWATSON.CO.UK
CODE LIKE YOU GIVE A DAMN!
@LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK
Léonie Watson
@leoniewatson
Upcoming SlideShare
Loading in …5
×

ARIA, accessibility APIs & coding like you give a damn! (FrontTrends 2015)

2,237 views

Published on

An introduction to ARIA, accessibility APIs and the mechanics of making custom HTML interfaces more accessible to screen reader users.

Published in: Technology

ARIA, accessibility APIs & coding like you give a damn! (FrontTrends 2015)

  1. 1. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK ARIA, ACCESSIBILITY APIS & CODING LIKE YOU GIVE A DAMN! Léonie Watson
  2. 2. @LEONIEWATSON HTTP://LJWATSON.CO.UK FROM THE TOP
  3. 3. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY APIS MSAA/UIAutmoation Windows IAccessible2 Windows Linux AT-SPI Linux NSAccessibility OSX UIAccessibility iOS Accessibility Framework Android
  4. 4. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY STACK ASSISTIVE TECHNOLOGY BROWSER OPERATING SYSTEM ACCESSIBILITY API
  5. 5. @LEONIEWATSON HTTP://LJWATSON.CO.UK DOM TREE
  6. 6. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY TREE
  7. 7. @LEONIEWATSON HTTP://LJWATSON.CO.UK ROLE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  8. 8. @LEONIEWATSON HTTP://LJWATSON.CO.UK STATE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  9. 9. @LEONIEWATSON HTTP://LJWATSON.CO.UK PROPERTIES <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  10. 10. @LEONIEWATSON HTTP://LJWATSON.CO.UK SEMANTIC NAVIGATION
  11. 11. @LEONIEWATSON HTTP://LJWATSON.CO.UK LANDMARK NAVIGATION
  12. 12. @LEONIEWATSON HTTP://LJWATSON.CO.UK JAVASCRIPT
  13. 13. @LEONIEWATSON HTTP://LJWATSON.CO.UK ARIA
  14. 14. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING ARIA WITH HTML, CSS & JAVASCRIPT
  15. 15. @LEONIEWATSON HTTP://LJWATSON.CO.UK SKELETON HTML <span id="button">Tequila <span id="icon"></span></span> <div id="content">Makes me happy...</div>
  16. 16. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A MOUSE
  17. 17. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A KEYBOARD
  18. 18. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ROLE <span id="button" role="button”> Tequila <span id="icon"></span></span>
  19. 19. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD TABINDEX <span id="button" role="button" tabindex="0”> Tequila <span id="icon"></span></span>
  20. 20. @LEONIEWATSON HTTP://LJWATSON.CO.UK 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; }
  21. 21. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD EVENT LISTENERS document.getElementById("button").addEventListe ner("click", toggleDisclosure); document.getElementById("button").addEventListe ner("keydown", toggleDisclosure);
  22. 22. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD KEYBOARD INTERACTION function toggleDisclosure(event) { var type = event.type; if (type === "keydown" && (event.keyCode !== 13 && event.keyCode !== 32)) { return true } event.preventDefault(); }
  23. 23. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ARIA-EXPANDED <span id="button" role="button" tabindex="0" aria-expanded="false”> Tequila <span id="icon"></span></span>
  24. 24. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD STATE VISUALS [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; }
  25. 25. @LEONIEWATSON HTTP://LJWATSON.CO.UK 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>
  26. 26. @LEONIEWATSON HTTP://LJWATSON.CO.UK 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>
  27. 27. @LEONIEWATSON HTTP://LJWATSON.CO.UK 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; }
  28. 28. @LEONIEWATSON HTTP://LJWATSON.CO.UK 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"); } }
  29. 29. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A SCREEN READER
  30. 30. @LEONIEWATSON HTTP://LJWATSON.CO.UK PERFECT IS THE ENEMY OF GOOD
  31. 31. @LEONIEWATSON HTTP://LJWATSON.CO.UK CODE LIKE YOU GIVE A DAMN!
  32. 32. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK Léonie Watson @leoniewatson

×