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
ACCESSIBLE CUSTOM
INTERFACES
Léonie Watson
WITH HTM...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
CODE LIKE YOU GIVE A DAMN!
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ACCESSIBILITY MECHANICS
@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
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
JAVASCRIPT
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ARIA
@LEONIEWATSON HTTP://LJWATSON.CO.UK
HTML DISCLOSURE WIDGET
@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 SCREEN READER
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD BUTTON 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 ARIA-EXPANDED
<span id="button" role="button"
tabindex="0" aria-expanded="false”>
...
@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 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 FUNCTIONALITY
function toggleDisclosure(event)
{
var button = document.getElementB...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD FOCUS VISUALS
[role="button"]:hover, [role="button"]:focus {
background-color: #33...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD STATE VISUALS
[role="button"][aria-expanded="false"] .icon:after {
content: ' ›';
...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD FUNCTIONALITY VISUALS
div[aria-hidden="true”] {
display: none;
}
div[aria-hidden="...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
USING A SCREEN READER
@LEONIEWATSON HTTP://LJWATSON.CO.UK
SVG BUTTON
@LEONIEWATSON HTTP://LJWATSON.CO.UK
BASIC SVG
<svg version="1.1" width="300" height="200">
<title id="title">Green rectang...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ARIA-LABELLEDBY
<svg version="1.1" width="300" height="200"
aria-labelledby="title...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD ARIA-DESCRIBEDBY
<svg version="1.1" width="300" height="200"
aria-labelledby="titl...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD IMG ROLE
<svg version="1.1" width="300" height="200"
aria-labelledby="title" aria-...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD BUTTON ROLE
<svg version="1.1" width="300" height="200" aria-
labelledby="title" a...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
CUSTOM DISCLOSURE ELEMENT
@LEONIEWATSON HTTP://LJWATSON.CO.UK
REGISTERING A CUSTOM TAG
var elem = document.registerElement
('tequila-button');
docum...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
INSTANTIATING A CUSTOM TAG
<tequila-button>Drink me</tequila-button>
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD A ROLE
proto.createdCallback = function() {
this.setAttribute('role', 'button');
}
@LEONIEWATSON HTTP://LJWATSON.CO.UK
ADD EVENT LISTENERS
proto.createdCallback = function() {
this.setAttribute('role', 'bu...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
SOUNDING FAMILIAR?
@LEONIEWATSON HTTP://LJWATSON.CO.UK
REGISTERING A TYPE
EXTENSION
var elem = document.registerElement
('tequila-button', {
...
@LEONIEWATSON HTTP://LJWATSON.CO.UK
INSTANTIATING A TYPE EXTENSION
<button is="tequila-button">Drink me</button>
@LEONIEWATSON HTTP://LJWATSON.CO.UK
CODE LIKE YOU GIVE A DAMN!
Name
Role
State
Properties
Focus
@LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK
Léonie Watson @leoniewatson
Upcoming SlideShare
Loading in …5
×

Accessible custom interfaces with ARIA, HTML5 & JavaScript (Fluent 2015)

1,353 views

Published on

An introduction to accessibility mechanics, and practical steps to making HTML, SVG and even Web Components more accessible with ARIA.

Published in: Technology
  • Be the first to comment

Accessible custom interfaces with ARIA, HTML5 & JavaScript (Fluent 2015)

  1. 1. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBLE CUSTOM INTERFACES Léonie Watson WITH HTML5, JAVASCRIPT & ARIA
  2. 2. @LEONIEWATSON HTTP://LJWATSON.CO.UK CODE LIKE YOU GIVE A DAMN!
  3. 3. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY MECHANICS
  4. 4. @LEONIEWATSON HTTP://LJWATSON.CO.UK DOM TREE
  5. 5. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY TREE
  6. 6. @LEONIEWATSON HTTP://LJWATSON.CO.UK ROLE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  7. 7. @LEONIEWATSON HTTP://LJWATSON.CO.UK STATE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  8. 8. @LEONIEWATSON HTTP://LJWATSON.CO.UK PROPERTIES <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  9. 9. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY APIS MSAA/UIAutmoation Windows IAccessible2 Windows Linux AT-SPI Linux NSAccessibility OSX UIAccessibility iOS Accessibility Framework Android
  10. 10. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY STACK ASSISTIVE TECHNOLOGY BROWSER OPERATING SYSTEM ACCESSIBILITY API
  11. 11. @LEONIEWATSON HTTP://LJWATSON.CO.UK JAVASCRIPT
  12. 12. @LEONIEWATSON HTTP://LJWATSON.CO.UK ARIA
  13. 13. @LEONIEWATSON HTTP://LJWATSON.CO.UK HTML DISCLOSURE WIDGET
  14. 14. @LEONIEWATSON HTTP://LJWATSON.CO.UK SKELETON HTML <span id="button">Tequila <span id="icon"></span></span> <div id="content">Makes me happy...</div>
  15. 15. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A MOUSE
  16. 16. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A SCREEN READER
  17. 17. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD BUTTON ROLE <span id="button" role="button”> Tequila <span id="icon"></span></span>
  18. 18. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD TABINDEX <span id="button" role="button" tabindex="0”> Tequila <span id="icon"></span></span>
  19. 19. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ARIA-EXPANDED <span id="button" role="button" tabindex="0" aria-expanded="false”> Tequila <span id="icon"></span></span>
  20. 20. @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>
  21. 21. @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>
  22. 22. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD EVENT LISTENERS document.getElementById("button").addEventListe ner("click", toggleDisclosure); document.getElementById("button").addEventListe ner("keydown", toggleDisclosure);
  23. 23. @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(); }
  24. 24. @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"); } }
  25. 25. @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; }
  26. 26. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD STATE VISUALS [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; }
  27. 27. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD FUNCTIONALITY 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 USING A SCREEN READER
  29. 29. @LEONIEWATSON HTTP://LJWATSON.CO.UK SVG BUTTON
  30. 30. @LEONIEWATSON HTTP://LJWATSON.CO.UK BASIC SVG <svg version="1.1" width="300" height="200"> <title id="title">Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22” /> </svg>
  31. 31. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ARIA-LABELLEDBY <svg version="1.1" width="300" height="200" aria-labelledby="title"> <title id="title">Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22” /> </svg>
  32. 32. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ARIA-DESCRIBEDBY <svg version="1.1" width="300" height="200" aria-labelledby="title" aria-describedby="desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22” /> </svg>
  33. 33. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD IMG ROLE <svg version="1.1" width="300" height="200" aria-labelledby="title" aria-describedby="desc" role="img"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22” /> </svg>
  34. 34. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD BUTTON ROLE <svg version="1.1" width="300" height="200" aria- labelledby="title" aria-describedby="desc“ role=“button" > <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <a xlink:href="http://tink.uk/" tabindex="0" role="link> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22” /> <text x="35" y="30" font-size="1em" text- anchor="middle" fill="#000000">Tink's website</text> </a>
  35. 35. @LEONIEWATSON HTTP://LJWATSON.CO.UK CUSTOM DISCLOSURE ELEMENT
  36. 36. @LEONIEWATSON HTTP://LJWATSON.CO.UK REGISTERING A CUSTOM TAG var elem = document.registerElement ('tequila-button'); document.body.appendChild(new elem());
  37. 37. @LEONIEWATSON HTTP://LJWATSON.CO.UK INSTANTIATING A CUSTOM TAG <tequila-button>Drink me</tequila-button>
  38. 38. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD A ROLE proto.createdCallback = function() { this.setAttribute('role', 'button'); }
  39. 39. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD EVENT LISTENERS proto.createdCallback = function() { this.setAttribute('role', 'button'); this.addEventListener("click", toggleDisclosure); this.addEventListener("keydown", toggleDisclosure); }
  40. 40. @LEONIEWATSON HTTP://LJWATSON.CO.UK SOUNDING FAMILIAR?
  41. 41. @LEONIEWATSON HTTP://LJWATSON.CO.UK REGISTERING A TYPE EXTENSION var elem = document.registerElement ('tequila-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' });
  42. 42. @LEONIEWATSON HTTP://LJWATSON.CO.UK INSTANTIATING A TYPE EXTENSION <button is="tequila-button">Drink me</button>
  43. 43. @LEONIEWATSON HTTP://LJWATSON.CO.UK CODE LIKE YOU GIVE A DAMN! Name Role State Properties Focus
  44. 44. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK Léonie Watson @leoniewatson

×