JavaScript and Accessibility: Creating Interface Magic for Everyone

3,437 views

Published on

In this talk I look at a few ways in which JavaScript actually helps make web sites more accessible despite the bad name it might have in some accessibility circles.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JavaScript and Accessibility: Creating Interface Magic for Everyone

  1. 1. JavaScript and Accessibility:Creating interface Magic for Everyone
  2. 2. JavaScript and Accessibility:Creating interface Magic for Everyone
  3. 3. Derek Featherstonefeather@simplyaccessible.com @feather
  4. 4. Myths and Misconceptions
  5. 5. Myths and Misconceptions• “people with disabilities turn JavaScript off”
  6. 6. Myths and Misconceptions• “people with disabilities turn JavaScript off”• “I can’t use JavaScript if I want it to be accessible”
  7. 7. Myths and Misconceptions• “people with disabilities turn JavaScript off”• “I can’t use JavaScript if I want it to be accessible”• “Screen readers don’t support JS”
  8. 8. Myths and Misconceptions• “people with disabilities turn JavaScript off”• “I can’t use JavaScript if I want it to be accessible”• “Screen readers don’t support JS”• “Just use <noscript>...</noscript>”
  9. 9. Myths and Misconceptions• “people with disabilities turn JavaScript off”• “I can’t use JavaScript if I want it to be accessible”• “Screen readers don’t support JS”• “Just use <noscript>...</noscript>”• “when you use onclick, use onkeypress”
  10. 10. Myths and Misconceptions • “people with disabilities turn JavaScript off” • “I can’t use JavaScript if I want it to be accessible” s e l • “Screen readers don’t support JS”fa • “Just use <noscript>...</noscript>” • “when you use onclick, use onkeypress”
  11. 11. To do this well...
  12. 12. To do this well... • View accessibility as User Experience • Understand that accessibility is just as much a design problem as it is a technical problem • Open our minds to account for other assistive technology and disabilities, not just blind people using screen readers
  13. 13. Starting Points
  14. 14. POUR
  15. 15. P erceivableO perableU nderstandableR obust
  16. 16. Trap #1: Choosing the wrong controls
  17. 17. <button>Pan Up</button>
  18. 18. Focusable Controls • certain elements take focus by default <a href> <button> <input> • can use tabindex=0 to make any element appear in the tab order (but if you’re doing this, ask yourself why? and maybe choose another element) • often see onclick on random elements <img> <tr> <td> <div>
  19. 19. Trap #2: Managing Focus/ Linear Flow
  20. 20. store.simplyaccessible.com
  21. 21. store.simplyaccessible.com
  22. 22. http://examples.simplyaccessible.com/context-help/
  23. 23. http://examples.simplyaccessible.com/context-help/
  24. 24. <a href=”#unamehelp”> ? </a> http://examples.simplyaccessible.com/context-help/
  25. 25. http://examples.simplyaccessible.com/context-help/
  26. 26. <a href=”#unamehelp”> ? </a>http://examples.simplyaccessible.com/context-help/
  27. 27. http://examples.simplyaccessible.com/context-help/
  28. 28. foc us? et he sehttp://examples.simplyaccessible.com/context-help/
  29. 29. us? s? foc u ethe foc ee se t heshttp://examples.simplyaccessible.com/context-help/
  30. 30. Manage the focus.
  31. 31. Manage the focus.
  32. 32. Manage the focus.
  33. 33. Manage the focus.
  34. 34. <a href=”#”>Share trips</a>Manage the focus.
  35. 35. Manage the focus.
  36. 36. rig ht? th is, do ne ver ’llYou Manage the focus.
  37. 37. Trap #3: Getting Trapped with the Keyboard
  38. 38. Anticipation
  39. 39. More anticipation...
  40. 40. So much anticipation!
  41. 41. Repetition: Don’t go on forever.
  42. 42. rig ht? th is, er do ’ll nev YouRepetition: Don’t go on forever.
  43. 43. function keyDown(event) { // Prevent default keyboard action // (like navigating inside the page) return (fn(code, options.closeKeys) >= 0) ? close()  : (fn(code, options.nextKeys) >= 0) ? next()  : (fn(code, options.previousKeys) >= 0) ? previous()  : false;}
  44. 44. Keyboard Interactivity • usability issues • MUST test for: success case error case the “correction” case not “killing” other keyboard functionality
  45. 45. Bonus Round:How to Avoid the Turducken of Bad Design
  46. 46. Derek Featherstonefeather@simplyaccessible.com @feather
  47. 47. simplyaccessible.comAccessibility consulting, strategy and assessmentsAccessible development and remediation servicesTraining courses, workshops and conferences Derek Featherstone feather@simplyaccessible.com (613) 599-9784 @feather (on twitter)

×