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.

Creating accessible interfaces everyone wants to use (FoWD 2015)

945 views

Published on

Published in: Technology

Creating accessible interfaces everyone wants to use (FoWD 2015)

  1. 1. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK CREATING ACCESSIBLE INTERFACES EVERYONE WANTS TO USE Léonie Watson
  2. 2. @LEONIEWATSON HTTP://LJWATSON.CO.UK DESIGN LIKE BANKSY Read the rule book, then rip it up and create something that challenges the accepted wisdom
  3. 3. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY STIFLES INNOVATION
  4. 4. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY KILLS CREATIVITY
  5. 5. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY IS DIFFICULT
  6. 6. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY IS IRRELEVANT
  7. 7. @LEONIEWATSON HTTP://LJWATSON.CO.UK DESIGN LIKE DA VINCI Be curious about everything, and never stop questioning how you can make things better
  8. 8. @LEONIEWATSON HTTP://LJWATSON.CO.UK PERFECT IS THE ENEMY OF GOOD
  9. 9. @LEONIEWATSON HTTP://LJWATSON.CO.UK DON’T CHUCK IT OVER THE WALL
  10. 10. @LEONIEWATSON HTTP://LJWATSON.CO.UK INTERACTION
  11. 11. @LEONIEWATSON HTTP://LJWATSON.CO.UK DESIGN
  12. 12. @LEONIEWATSON HTTP://LJWATSON.CO.UK CHOICE
  13. 13. @LEONIEWATSON HTTP://LJWATSON.CO.UK COMMUNICATE
  14. 14. @LEONIEWATSON HTTP://LJWATSON.CO.UK DESIGN LIKE CHANEL Strive for beauty and elegance, but understand that those things will not be the same for everybody.
  15. 15. @LEONIEWATSON HTTP://LJWATSON.CO.UK ONCE MORE FROM THE TOP
  16. 16. @LEONIEWATSON HTTP://LJWATSON.CO.UK JUMPING AROUND
  17. 17. @LEONIEWATSON HTTP://LJWATSON.CO.UK LANDMARKS AHOY
  18. 18. @LEONIEWATSON HTTP://LJWATSON.CO.UK MODUS OPERANDI something
  19. 19. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY MECHANICS
  20. 20. @LEONIEWATSON HTTP://LJWATSON.CO.UK DOM TREE
  21. 21. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY TREE
  22. 22. @LEONIEWATSON HTTP://LJWATSON.CO.UK ROLE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  23. 23. @LEONIEWATSON HTTP://LJWATSON.CO.UK STATE <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  24. 24. @LEONIEWATSON HTTP://LJWATSON.CO.UK PROPERTIES <input type="checkbox" id="drink" checked> <label for="drink">Tequila</label>
  25. 25. @LEONIEWATSON HTTP://LJWATSON.CO.UK ACCESSIBILITY APIS MSAA/UIAutmoation Windows IAccessible2 Windows Linux AT-SPI Linux NSAccessibility OSX UIAccessibility iOS Accessibility Framework Android
  26. 26. @LEONIEWATSON HTTP://LJWATSON.CO.UK DESIGN LIKE BRUNEL Know that planning is important, but that imagination makes the extraordinary possible
  27. 27. @LEONIEWATSON HTTP://LJWATSON.CO.UK SKELETON HTML <span id="button">Tequila <span id="icon"></span></span> <div id="content">Makes me happy...</div>
  28. 28. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A MOUSE
  29. 29. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A KEYBOARD
  30. 30. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ROLE <span id="button" role="button”> Tequila <span id="icon"></span></span>
  31. 31. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD TABINDEX <span id="button" role="button" tabindex="0”> Tequila <span id="icon"></span></span>
  32. 32. @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; }
  33. 33. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD EVENT LISTENERS document.getElementById("button").addEventListe ner("click", toggleDisclosure); document.getElementById("button").addEventListe ner("keydown", toggleDisclosure);
  34. 34. @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(); }
  35. 35. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD ARIA-EXPANDED <span id="button" role="button" tabindex="0" aria-expanded="false”> Tequila <span id="icon"></span></span>
  36. 36. @LEONIEWATSON HTTP://LJWATSON.CO.UK ADD STATE VISUALS [role="button"][aria-expanded="false"] .icon:after { content: ' ›'; } [role="button"][aria-expanded="true"] .icon:after { content: ' ×'; }
  37. 37. @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>
  38. 38. @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>
  39. 39. @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; }
  40. 40. @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"); } }
  41. 41. @LEONIEWATSON HTTP://LJWATSON.CO.UK USING A SCREEN READER
  42. 42. @LEONIEWATSON HTTP://LJWATSON.CO.UK@LEONIEWATSON HTTP://LJWATSON.CO.UK Léonie Watson @leoniewatson

×