JavaScript and Accessibility:Creating interface Magic for Everyone
JavaScript and Accessibility:Creating interface Magic for Everyone
Derek Featherstonefeather@simplyaccessible.com                    @feather
Myths and Misconceptions
Myths and Misconceptions• “people with disabilities turn JavaScript  off”
Myths and Misconceptions• “people with disabilities turn JavaScript   off”• “I can’t use JavaScript if I want it to be   ac...
Myths and Misconceptions• “people with disabilities turn JavaScript   off”• “I can’t use JavaScript if I want it to be   ac...
Myths and Misconceptions• “people with disabilities turn JavaScript   off”• “I can’t use JavaScript if I want it to be   ac...
Myths and Misconceptions• “people with disabilities turn JavaScript   off”• “I can’t use JavaScript if I want it to be   ac...
Myths and Misconceptions       • “people with disabilities turn JavaScript          off”       • “I can’t use JavaScript if...
To do this well...
To do this well... • View accessibility as User Experience • Understand that accessibility is just as   much a design prob...
Starting Points
POUR
P erceivableO perableU nderstandableR obust
Trap #1: Choosing the   wrong controls
<button>Pan Up</button>
Focusable Controls • certain elements take focus by default      <a href> <button> <input> • can use tabindex=0 to make an...
Trap #2: Managing Focus/       Linear Flow
store.simplyaccessible.com
store.simplyaccessible.com
http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
<a href=”#unamehelp”> ? </a>  http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
<a href=”#unamehelp”> ? </a>http://examples.simplyaccessible.com/context-help/
http://examples.simplyaccessible.com/context-help/
foc us?     et he  sehttp://examples.simplyaccessible.com/context-help/
us? s?            foc u       ethe               foc ee    se    t       heshttp://examples.simplyaccessible.com/context-h...
Manage the focus.
Manage the focus.
Manage the focus.
Manage the focus.
<a href=”#”>Share trips</a>Manage the focus.
Manage the focus.
rig ht?                      th is,                 do          ne ver    ’llYou  Manage the focus.
Trap #3: Getting Trapped with        the Keyboard
Anticipation
More anticipation...
So much anticipation!
Repetition: Don’t go on forever.
rig ht?                                     th is,                             er do                      ’ll nev         ...
function keyDown(event) { // Prevent default keyboard action  // (like navigating inside the page) return (fn(code, option...
Keyboard Interactivity • usability issues • MUST test for:    success case    error case    the “correction” case    not “...
Bonus Round:How to Avoid the Turducken of Bad Design
Derek Featherstonefeather@simplyaccessible.com                    @feather
simplyaccessible.comAccessibility consulting, strategy and assessmentsAccessible development and remediation servicesTrain...
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
JavaScript and Accessibility: Creating Interface Magic for Everyone
Upcoming SlideShare
Loading in …5
×

JavaScript and Accessibility: Creating Interface Magic for Everyone

3,268 views
3,180 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,268
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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)

×