Preview
Video Player
00:00
00:00
Keyboard Interactivity
3:54Our sites need to be entirely accessible via keyboard. A mouse is a very common input device, but totally inaccessible to many people. A person without hands might still use some kind of pointer to hit keys on a traditional keyboard.
Our sites need to be entirely
accessible via keyboard.
0:00
A mouse is a very common input device but
totally inaccessible to many people.
0:04
Many users will approach your
sites armed with only their
0:09
keyboard as an input device.
0:12
A person without hands might still
use some kind of pointer to hit
0:14
keys on a traditional keyboard.
0:18
Keeping track of where
the focus is in our screens
0:21
can be easily overlooked when
we're not explicitly changing it.
0:24
Using forms, for example, generally
makes focus quite visually obvious.
0:28
Keeping a handle on focus management helps
us to ensure that our users can navigate
0:33
to all parts of the site, and
0:38
use all the interactive pieces
of it with the keyboard.
0:39
Let's try it out with this simple example.
0:43
You'll find the project files for
this video available for download.
0:46
Please note that I'm using a little
bit of jQuery in this example.
0:49
If you're unfamiliar with
this widely used library,
0:53
consider working through a jQuery
course here on Treehouse.
0:56
There's a list on our example page that
contains links to dogs I'd like to adopt.
0:59
Each list item has a name and
1:05
a remove button we can use
to remove it from the page.
1:07
This works as is, but there's a problem.
1:10
If I go ahead and
tap through the page, And
1:13
actually delete a list item,
the focus appears to be dropped.
1:18
Suddenly I can't be sure
where I am on the page.
1:23
If I'm using a keyboard to navigate,
it's totally unclear where I am.
1:27
Nothing happens.
1:31
If I continue to tab through we'll see
that I'm still in the same place, but
1:33
let's see what happens if
I'm using a screen reader.
1:37
>> VoiceOver on Chrome,
Focus Management Sample List,
1:41
window, Remove Jade,
button has keyboard focus.
1:44
Press Remove Jade, button.
1:48
>> Equally unclear.
1:50
>> You are currently on
a link inside of a list.
1:52
To click this link press
Control-Option-Space.
1:54
>> It looks like I should maybe
be focused on the next button.
1:57
But there is no audio cue
until I've let it sit for
2:00
a second, at which point I see
that I'm actually on a link.
2:03
All we need to do is add a single
line of code to our app.js file.
2:07
We'll want this to happen when
we click on a close button so
2:12
it'll go inside this event handler
that we've already got set up.
2:15
Lets assume that we want the user to
be able to start back up at the top of
2:24
the list so that they can cycle
through the revised version.
2:27
To achieve this functionality, we'll
chain the find, first, and focus methods.
2:32
We're finding the buttons
with a class of close,
2:44
grabbing the first one, and
setting programmatic focus on it.
2:48
Remember to save.
2:54
Now, when we go back to the browser,
2:56
we should see that our focus is
redirected after deleting a list item.
2:58
Looks good.
3:11
And we'll check it in our screen reader.
3:13
>> VoiceOver on Chrome, Focus Management
Sample List, window, Remove Amber, button.
3:16
Visited link.
3:22
Remove Captain, button.
3:23
Remove Amber, button list.
3:25
Remove Jade, button list 2 items.
3:26
VoiceOver off.
3:29
>> Looks good.
3:30
Check out the teacher's notes for a link
to a helpful article by Hayden pickering.
3:31
That includes a few more
examples using the focus method
3:36
to help you understand focus management.
3:39
Keep in mind that jQuery isn't the only
way to give an element programmatic focus.
3:42
Take some time to make sure you understand
how to direct focus in whatever library of
3:47
framework you're working with.
3:52