JavaScript and Accessibility: Creating Interface Magic for Everyone
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

JavaScript and Accessibility: Creating Interface Magic for Everyone

  • 1,325 views
Uploaded 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.

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,325
On Slideshare
1,308
From Embeds
17
Number of Embeds
4

Actions

Shares
Downloads
7
Comments
0
Likes
0

Embeds 17

http://www.linkedin.com 10
https://twitter.com 4
https://www.linkedin.com 2
https://si0.twimg.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript and Accessibility:Creating interface Magic for Everyone
  • 2. JavaScript and Accessibility:Creating interface Magic for Everyone
  • 3. Derek Featherstonefeather@simplyaccessible.com @feather
  • 4. Myths and Misconceptions
  • 5. Myths and Misconceptions• “people with disabilities turn JavaScript off”
  • 6. Myths and Misconceptions• “people with disabilities turn JavaScript off”• “I can’t use JavaScript if I want it to be accessible”
  • 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. 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. 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. 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. To do this well...
  • 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. Starting Points
  • 14. POUR
  • 15. P erceivableO perableU nderstandableR obust
  • 16. Trap #1: Choosing the wrong controls
  • 17. <button>Pan Up</button>
  • 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. Trap #2: Managing Focus/ Linear Flow
  • 20. store.simplyaccessible.com
  • 21. store.simplyaccessible.com
  • 22. http://examples.simplyaccessible.com/context-help/
  • 23. http://examples.simplyaccessible.com/context-help/
  • 24. <a href=”#unamehelp”> ? </a> http://examples.simplyaccessible.com/context-help/
  • 25. http://examples.simplyaccessible.com/context-help/
  • 26. <a href=”#unamehelp”> ? </a>http://examples.simplyaccessible.com/context-help/
  • 27. http://examples.simplyaccessible.com/context-help/
  • 28. foc us? et he sehttp://examples.simplyaccessible.com/context-help/
  • 29. us? s? foc u ethe foc ee se t heshttp://examples.simplyaccessible.com/context-help/
  • 30. Manage the focus.
  • 31. Manage the focus.
  • 32. Manage the focus.
  • 33. Manage the focus.
  • 34. <a href=”#”>Share trips</a>Manage the focus.
  • 35. Manage the focus.
  • 36. rig ht? th is, do ne ver ’llYou Manage the focus.
  • 37. Trap #3: Getting Trapped with the Keyboard
  • 38. Anticipation
  • 39. More anticipation...
  • 40. So much anticipation!
  • 41. Repetition: Don’t go on forever.
  • 42. rig ht? th is, er do ’ll nev YouRepetition: Don’t go on forever.
  • 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. Keyboard Interactivity • usability issues • MUST test for: success case error case the “correction” case not “killing” other keyboard functionality
  • 45. Bonus Round:How to Avoid the Turducken of Bad Design
  • 46. Derek Featherstonefeather@simplyaccessible.com @feather
  • 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)