This document discusses common myths and misconceptions around using JavaScript for accessibility, and provides best practices for creating accessible interfaces with JavaScript. It addresses myths like people with disabilities turning off JavaScript or screen readers not supporting it. It also covers practical tips like using perceivable, operable, understandable and robust (POUR) principles; choosing the right interactive controls; managing focus and linear tab order; anticipating keyboard interactions; and avoiding repetition. The goal is to view accessibility as user experience and account for assistive technologies when using JavaScript.

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. Myths and Misconceptions
• “people with disabilities turn JavaScript
off”

13. Myths and Misconceptions
• “people with disabilities turn JavaScript
off”
• “I can’t use JavaScript if I want it to be
accessible”

14. 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”

15. 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>”

16. 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”

17. 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”

18. To do this well...

19. 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

20. Starting Points

21. P
O
U
R

22. P erceivable
O perable
U nderstandable
R obust

23. Trap #1: Choosing the
wrong controls

36. <button>Pan Up</button>

39. 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>

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. <a href=”#unamehelp”> ? </a>
http://examples.simplyaccessible.com/context-help/

46. http://examples.simplyaccessible.com/context-help/

47. <a href=”#unamehelp”> ? </a>
http://examples.simplyaccessible.com/context-help/

48. http://examples.simplyaccessible.com/context-help/

49. foc us?
et he
se
http://examples.simplyaccessible.com/context-help/

50. us? s?
foc u
ethe
foc
ee
se
t he
s
http://examples.simplyaccessible.com/context-help/

51. Manage the focus.

52. Manage the focus.

53. Manage the focus.

54. Manage the focus.

55. <a href=”#”>Share trips</a>
Manage the focus.

56. Manage the focus.

57. rig ht?
th is,
do
ne ver
’ll
You
Manage the focus.

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. rig ht?
th is,
er do
’ll nev
You
Repetition: Don’t go on forever.

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. Keyboard Interactivity
• usability issues
• MUST test for:
success case
error case
the “correction” case
not “killing” other keyboard functionality

84. Bonus Round:
How to Avoid the Turducken of Bad Design

93. Derek Featherstone
feather@simplyaccessible.com
@feather

94. simplyaccessible.com
Accessibility consulting, strategy and assessments
Accessible development and remediation services
Training courses, workshops and conferences Derek Featherstone
feather@simplyaccessible.com
(613) 599-9784
@feather (on twitter)