Believe it or not, accessibility is more than just screen readers. There's a whole group of users who only use a keyboard (without a mouse). Learn how to make the web a friendly place for all kinds of people by ensuring keyboard accessibility.
5. Visual Auditory Motor Cognitive
http://webaim.org/intro/#people
6. Blind
Uses screen reader and
keyboard (and/or braille
reader)
Low Vision
Uses monitor, keyboard,
mouse, and screen
magnifier
Visual Color Blind
Uses monitor, keyboard,
mouse, and high contrast
http://webaim.org/intro/#people
7. Deaf
Uses monitor, keyboard,
and mouse (subtitles on
videos)
Low Hearing
Uses monitor, keyboard,
and mouse (subtitles on
videos)
Auditory
http://webaim.org/intro/#people
8. Limited Fine Motor
Control
Uses monitor and
keyboard
Only Gross Motor Control
Uses monitor and single
switch
Pain/Paralysis/RSI
Motor Various other means of
accessing a computer
http://webaim.org/intro/#people
33. Working with Focus
var button = document.getElementById("my-btn");
button.focus();
var focused = document.activeElement;
console.log(button === focused); // true
34. Make Focusable
<span id="my-span" tabindex="0">
Howdy!
</span>
Add into the
normal tab order
var mySpan = document.getElementById(“my-span”);
mySpan.focus();
35. Make Focusable
<span id="my-span" tabindex="-1">
Howdy!
</span> Not in tab order
but can use
focus()
var mySpan = document.getElementById(“my-span”);
mySpan.focus();
36. Focus
• Don’t hide the focus rectangle
– Unless you’re using a custom focus style
• Use links to navigate to URLs
• Use buttons for in-page actions
or form submission
38. Characteristics of Links & Buttons
Can receive focus
Click here
Show focus visually
Part of normal tab order
The onclick handler is
called when Enter is
pressed
39. Not a Button!
<span onclick="doSomething()">
Click Me
</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
40. Still Not a Button!
<span tabindex="0" onclick="doSomething()">
Click Me
</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
41. Still Not a Button!
<span tabindex="0" role="button"
onclick="doSomething()">
Click Me
</span>
Focusable
Visual Focus
Tab Order
Enter for onclick
50. Dialogs
• Set focus to dialog element when displayed
– Set tabIndex = -1 and use focus()
• Remember where focus was before the dialog
was opened
– document.activeElement
• Pressing Esc should close
the dialog and set focus
back to where it was
• Keep focus in the dialog
51. Keep Focus in Dialog
document.addEventListener(“focus”,
function(event) {
if (!dialogNode.contains(event.target)) {
event.stopPropagation();
dialogNode.focus();
}
}, true);
56. Keyboard Shortcuts
• Use ? to bring up shortcuts list in a dialog
• Make use of common keyboard shortcuts
where possible (lists)
• Use the convention of G
followed by another letter
to navigate to sections
• Use single letters for
common actions
• Shift focus appropriately
64. Etcetera
• My blog: nczonline.net
• Twitter: @slicknet
• These Slides: slideshare.net/nzakas
Editor's Notes
Go to browser and show navigation using the keyboard.
Go to blog navigation example.
Put this into Web Inspector and show the difference.
Show Gmail
Demo!
Don’t hide important information and then show on hoverI can’t get to it
Show Twitter
Show GitHub keyboard shortcut dialog
Show Twitter
GoogleGmailShortcuts dialogNavigate messagesReplyCreate newNavigate to link in emailGo to labelGo to InboxTwitterShortcuts dialogNavigate tweetsGo HomeGo to ConnectDirect MessagesReplyGitHubHomeIssuesShortcuts Dialog“T” for file finder