JavaScript and Accessibility: Creating Interface Magic for Everyone

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.

Transcript

1. JavaScript and Accessibility: Creating interface Magic for Everyone
9. JavaScript and Accessibility: Creating interface Magic for Everyone
10. Derek Featherstone feather@simplyaccessible.com @feather
11. Myths and Misconceptions
12. • “people with disabilities turn JavaScript off” Myths and Misconceptions
13. • “people with disabilities turn JavaScript off” • “I can’t use JavaScript if I want it to be accessible” Myths and Misconceptions
14. • “people with disabilities turn JavaScript off” • “I can’t use JavaScript if I want it to be accessible” • “Screen readers don’t support JS” Myths and Misconceptions
15. • “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>” Myths and Misconceptions
16. • “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” Myths and Misconceptions
17. • “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” Myths and Misconceptions false
18. To do this well...
19. • 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 To do this well...
20. Starting Points
21. P O U R
22. erceivable perable nderstandable obust P O U R
23. Trap #1: Choosing the wrong controls
36. <button>Pan Up</button>
39. • 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> Focusable Controls
40. Trap #2: Managing Focus/ Linear Flow
41. store.simplyaccessible.com
42. store.simplyaccessible.com
43. http://examples.simplyaccessible.com/context-help/
44. http://examples.simplyaccessible.com/context-help/
45. http://examples.simplyaccessible.com/context-help/ <a href=”#unamehelp”> ? </a>
46. http://examples.simplyaccessible.com/context-help/
47. http://examples.simplyaccessible.com/context-help/ <a href=”#unamehelp”> ? </a>
48. http://examples.simplyaccessible.com/context-help/
49. http://examples.simplyaccessible.com/context-help/ see the focus?
50. http://examples.simplyaccessible.com/context-help/ see the focus? see the focus?
51. Manage the focus.
52. Manage the focus.
53. Manage the focus.
54. Manage the focus.
55. Manage the focus. <a href=”#”>Share trips</a>
56. Manage the focus.
57. Manage the focus. You’ll never do this, right?
69. Trap #3: Getting Trapped with the Keyboard
70. Anticipation
71. More anticipation...
72. So much anticipation!
73. Repetition: Don’t go on forever.
74. Repetition: Don’t go on forever. You’ll never do this, right?
76. 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; }
77. • usability issues • MUST test for: success case error case the “correction” case not “killing” other keyboard functionality Keyboard Interactivity
84. Bonus Round: How to Avoid the Turducken of Bad Design
93. Derek Featherstone feather@simplyaccessible.com @feather
94. Accessibility consulting, strategy and assessments Accessible development and remediation services Training courses, workshops and conferences simplyaccessible.com feather@simplyaccessible.com (613) 599-9784 @feather (on twitter) Derek Featherstone