This presentation covers the fundamentals APIS necessary to provide keyboard access for custom widgets built using JavaScript.

1. Keyboard Access
Todd Kloots
@todd

2. Goals
1. Understand the essential APIs for providing
keyboard access for custom widgets
2. Understand the common, expected patterns
for widgets

3. Configuring the Mac
http://yaccessibilityblog.com/library/full-keyboard-access-mac.html

4. OS X Preferences

5. OS X Preferences

6. Safari Preferences

7. Chrome Preferences

8. Who benefits?

10. * Users of screen readers

11. http://youtu.be/ReED-LpciYI

12. http://youtu.be/tdEaeULKkLQ

13. Who Benefits
Users who prefer/love the keyboard
Users who are blind
Users with physical disabilities

14. Widget Keyboard Patterns
Atomic widgets
(e.g. buttons, links, text boxes)
Container widgets
(e.g. listboxes, toolbars, trees)
Overlay widgets
(e.g. dialogs, menus, tooltips)

15. tabIndex

16. Screen Readers
Read the code (HTML)
Read the focused element
What is read:
Element/Control type
Label
Properties
State changes

17. Focusable Elements
<a>
<area>
<button>
<input>
<select>
<textarea>
<object>

18. tabIndex
<li tabindex="-1" />
<li tabindex="0" />
<li tabindex="1" />

19. Natively Focusable Elements
<a href="#">Label</a>
<button type="button">Label</button>
<input type="button" value="Label">
Convey interactivity
In the default tab flow
Fire click event in response to the mouse
and keyboard

20. Using tabIndex
<li tabindex="0" />
Convey interactivity
Focusable
Can be in placed in the tab flow
Fire click event in response to the mouse
BUT NOT the keyboard

21. <span class="btn" tabindex="0">OK</span>
// Native DOM
node.tabIndex = 0;
// jQuery
node.attr("tabIndex", 0);
// YUI
node.set("tabIndex", 0);

22. tabIndex=0

23. tabIndex=0 Use Case
<span class="btn" tabindex="0">OK</span>
$(".btn").on("keydown", function (e) {
var keyCode = e.keyCode;
if (keyCode === 13 || keyCode === 32) {
$(this).trigger($.Event("click"));
}
});

24. tabIndex=0 Review
Places the element in the default tab flow
Focusable via keyboard, mouse or JavaScript
Default browser focus outline onFocus
Click not fired via Enter or Spacebar

25. tabIndex=-1

26. tabIndex=-1
Removes the element from the tab flow
Focusable via the mouse or JavaScript
No browser focus outline in IE
Click not fired via Enter or Spacebar

27. tabIndex=-1 Use Cases
Popup Menus
Stateless Container Widgets
Stateful Container Widgets

28. Popup Menu Use Case
<ul class="menu hidden" tabindex="-1">
<li tabindex="-1">Inbox</li>
<li tabindex="-1">Archive</li>
<li tabindex="-1">Trash</li>
</ul>

29. Explicit tabIndex Use Case
4
1
2
3

30. tabIndex Review
tabIndex=0
tabIndex=-1
tabIndex=1

31. focus() and blur()

32. Use Cases
Overlay Widgets
Stateless Container Widgets
Stateful Container Widgets

33. Stateless Containers

34. Web vs. Desktop

35. Web vs. Desktop

36. Initial Focus

37. Right/Left Arrows

38. Blur

39. Subsequent Focus

40. 0 -1 -1 -1 -1
<div class="toolbar">
<button type="button" tabindex="0" class="prnt">Print</button>
<button type="button" tabindex="-1" class="find">Find</button>
<button type="button" tabindex="-1" class="save">Save</button>
<button type="button" tabindex="-1" class="sets">Settings</
button>
<button type="button" tabindex="-1" class="info">Info</button>
</div>

41. toolbar.on("keydown", "button", function (e) {
var keyCode = e.keyCode,
button = $(this),
next;
if (keyCode === 37) { // Left
next = "prev";
}
else if (keyCode === 39) { // Right
next = "next";
}
if (next) {
button[next]().focus();
}
});

42. Toolbar Exercise

43. Stateless Container Pattern
Use with the following ARIA widget roles
toolbar
menubar

44. Stateful Containers

45. Initial State: No Selection

46. Initial Focus

47. Up/Down Arrows

48. Blur

49. Subsequent Focus

50. <ul id="listbox">
<li tabindex="0">Activism</li>
<li tabindex="-1">Baking</li>
<li tabindex="-1">Cooking</li>
<li tabindex="-1">Dancing</li>
<li tabindex="-1">Fine Art</li>
<li tabindex="-1">Ice Skating</li>
<li tabindex="-1">Music</li>
<li tabindex="-1">Politics</li>
<li tabindex="-1">Sports</li>
<li tabindex="-1">Travel</li>
<li tabindex="-1">Technology</li>
</ul>

51. Up/Down Arrows
listbox.on("keydown", "li", function (e) {
var keyCode = e.keyCode,
li = $(this),
next,
nextItem;
if (keyCode === 38) { // UP
next = "prev";
}
else if (keyCode === 40) { // DOWN
next = "next";
}
if (next) {
// On initial arrow key press, don't advance focus,
// just synchronize focus and selection
if (!li.hasClass('selected')) {
li.addClass("selected");
}
else if ((nextItem = li[next]()) && nextItem[0]) {
makeSelection(nextItem);
nextItem.focus();
}
}
});

52. Roving tabIndex
function makeSelection(li) {
listbox.find("li.selected").attr('tabIndex', -1).removeClass("selected");
li.attr('tabIndex', 0).addClass("selected");
}
http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#focus_tabindex

53. Roving tabIndex Demo

54. Roving tabIndex Pattern
Use with the following ARIA widget roles
listbox
grid
tree & treegrid
tablist
radiogroup

55. Review
One tab stop per widget
Two patterns
Stateless Container
Stateful Container / Roving tabIndex

56. Menus

57. Initial Focus: No Selection

58. Initial Up/Down Arrow

59. Up/Down Arrows

60. -1
-1
-1
-1
<ul class="menu hidden" tabindex="-1">
<li tabindex="-1">Inbox</li>
<li tabindex="-1">Archive</li>
<li tabindex="-1">Trash</li>
</ul>

61. Initial Focus
function showMenu() {
menu.find(".selected").removeClass("selected");
menu.removeClass("hidden");
var position = button.position();
menu.css({
top: (position.top + button.outerHeight()),
left: position.left
});
menu.focus();
}

62. Initial Up/Down Arrow
if (target === menu[0]) {
if ((selected = menu.find(".selected")) && selected[0]) {
event = $.Event("keydown", { keyCode: keyCode });
selected.trigger(event);
}
else {
if (keyCode === 38) { // UP
selector = "li:last-child";
}
else if (keyCode === 40) { // DOWN
selector = "li:first-child";
}
menu.find(selector).addClass("selected").focus();
}
}

63. Up/Down Arrows
switch (e.keyCode) {
case 38: // UP
next = "prev";
break;
case 40: // Down
next = "next";
break;
case 13: // Enter
case 32: // Space
selected.trigger($.Event("click"));
selected.blur();
break;
}
if (next && (nextItem = li[next]()) && nextItem[0]) {
li.removeClass("selected");
nextItem.addClass("selected").focus();
}

64. Dialogs

65. Initial Focus

66. Tab or Shift + Tab

67. Cancel

68. Initial Focus
function showDialog() {
var activeEl = document.activeElement;
dialog.removeClass("hidden");
createModalMask();
positionDialog();
$('#ok-button').focus();
}

69. What About?
Modality?
Canceling?

70. document.activeElement

71. contains()

72. onFocus & onBlur

73. document.activeElement

74. function showDialog() {
var activeEl = document.activeElement;
dialog.removeClass("hidden");
createModalMask();
positionDialog();
$('#ok-button').focus();
$(document).on("focusin.dialog", enforceModality);
$(window).on('resize.dialog', function () {
sizeModalMask();
positionDialog();
});
dialog.on("click.dialog", "input", activeEl, hideDialog);
...
}

75. dialog.on("keydown.dialog", function (e) {
var keyCode = e.keyCode;
if (keyCode === 27) { // Esc
hideDialog(activeEl);
}
else if (keyCode === 9 && !e.shiftKey &&
e.target === $("#cancel-button")[0]) {
e.preventDefault();
}
});

76. function hideDialog(activeEl) {
dialog.addClass("hidden");
removeModalMask();
dialog.off(".dialog");
$(window).off(".dialog");
activeEl.focus();
}

77. contains(haystack, needle)
http://api.jquery.com/jQuery.contains/
http://yuilibrary.com/yui/docs/api/classes/Node.html

78. $(document).on("focusin", onDocFocus);
$(document).on("focusout", onDocFocus);
$(dialog).on("focus", "input", onDialogFocus);
$(dialog).on("blur", "input", onDialogFocus);

79. function enforceModality(e) {
if (!$.contains(dialog[0], e.target)) {
dialog.find('#ok-button').focus();
}
}
$(document).on("focusin.dialog", enforceModality);

80. Hiding Menus
menu.on("focusout", function (e) {
setTimeout(function () {
if (!$.contains(menu[0], document.activeElement)) {
menu.addClass("hidden");
}
}, 0);
});

81. :focus

82. :focus
Device independent
All browsers implement a default
focus outline

84. :focus Limitations in IE
Not supported in IE < 8
IE < 8 does provide :active, but only for links
IE doesn't render default outline when
tabIndex is set to -1
Cannot remove default outline using CSS in
IE < 8

85. Supplementing :focus In IE
if (browser.msie && browser.version < 8) {
toolbar.on("focus", "button", function () {
$(this).addClass("focus");
});
toolbar.on("blur", "button", function () {
$(this).removeClass("focus");
});
}

86. :focus {
outline: none;
}

88. Recommendation
/* BAD:
Don't globally remove the outline property. */
:focus {
outline: none;
}
/* GOOD:
Instead, selectively remove outline in rules
that provide an alternative. */
.tab:focus {
outline: none;
background-color: blue;
}

89. Useful Properties
Outline
Background
Text color
Box Shadow
Underline

90. Custom Focus in Y! Mail
IE 6 and 7
IE 8+

91. :active

92. :active
Also device independent
Precedes :focus
keydown state/mousedown state

93. :focus Use Cases
Atomic controls
(e.g. buttons and links)

94. :focus Not Useful With

95. Serving Two Masters
Keyboard
Mouse

96. Initial Up/Down Arrow
if (target === menu[0]) {
if ((selected = menu.find(".selected")) && selected[0]) {
event = $.Event("keydown", { keyCode: keyCode });
selected.trigger(event);
}
else {
if (keyCode === 38) { // UP
selector = "li:last-child";
}
else if (keyCode === 40) { // DOWN
selector = "li:first-child";
}
menu.find(selector).addClass("selected").focus();
}
}

97. Up/Down Arrows
switch (e.keyCode) {
case 38: // UP
next = "prev";
break;
case 40: // Down
next = "next";
break;
case 13: // Enter
case 32: // Space
selected.trigger($.Event("click"));
selected.blur();
break;
}
if (next && (nextItem = li[next]()) && nextItem[0]) {
li.removeClass("selected");
nextItem.addClass("selected").focus();
}

98. Maintaining State

99. listbox.on("keydown", "li", function (e) {
var keyCode = e.keyCode,
li = $(this),
next,
nextItem;
if (keyCode === 38) { // UP
next = "prev";
}
else if (keyCode === 40) { // DOWN
next = "next";
}
if (next) {
// On initial arrow key press, don't advance focus,
// just synchronize focus and selection
if (!li.hasClass('aria-selected')) {
li.addClass("selected");
}
else if ((nextItem = li[next]()) && nextItem[0]) {
makeSelection(nextItem);
nextItem.focus();
}
}
});

100. function makeSelection(li) {
listbox.find("li.selected").attr('tabIndex', -1).removeClass("selected");
li.attr('tabIndex', 0).addClass("selected");
}

101. listbox.on("focusin", function (e) {
if (!listbox.hasClass("focus")) {
listbox.addClass("focus");
}
});
listbox.on("focusout", function (e) {
setTimeout(function () {
if (!$.contains(listbox[0], document.activeElement)) {
listbox.removeClass("focus");
}
}, 0);
});

102. li.selected {
background: #ccc;
}
li:focus {
outline: none;
}
ul.focus {
border-color: #3875D7;
}
ul.focus li.selected {
background: #3875D7;
color: #fff;
}

103. Review

104. APIs
tabIndex
focus(), blur()
document.activeElement
contains()
focus and blur events
:focus, :active

105. Widget Keyboard Patterns
Task Key
Focus Next or Previous Tab / Shift + Tab / Arrows
Change selection →, ←, ↑, ↓
Expand / Collapse →, ←, ↑, ↓
Exit Esc
Click Spacebar
Default Action Enter

106. Code Examples
https://gist.github.com/kloots