Your SlideShare is downloading. ×
0
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript and Accessibility: Creating Interface Magic for Everyone

3,006

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.

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,006
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

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)

×