Our sites need to be entirely accessible via keyboard.

A mouse is a very common input device but totally inaccessible to many people.

Many users will approach your sites armed with only their

keyboard as an input device.

A person without hands might still use some kind of pointer to hit

keys on a traditional keyboard.

Keeping track of where the focus is in our screens

can be easily overlooked when we're not explicitly changing it.

Using forms, for example, generally makes focus quite visually obvious.

Keeping a handle on focus management helps us to ensure that our users can navigate

to all parts of the site, and

use all the interactive pieces of it with the keyboard.

Let's try it out with this simple example.

You'll find the project files for this video available for download.

Please note that I'm using a little bit of jQuery in this example.

If you're unfamiliar with this widely used library,

consider working through a jQuery course here on Treehouse.

There's a list on our example page that contains links to dogs I'd like to adopt.

Each list item has a name and

a remove button we can use to remove it from the page.

This works as is, but there's a problem.

If I go ahead and tap through the page, And

actually delete a list item, the focus appears to be dropped.

Suddenly I can't be sure where I am on the page.

If I'm using a keyboard to navigate, it's totally unclear where I am.

Nothing happens.

If I continue to tab through we'll see that I'm still in the same place, but

let's see what happens if I'm using a screen reader.

>> VoiceOver on Chrome, Focus Management Sample List,

window, Remove Jade, button has keyboard focus.

Press Remove Jade, button.

>> Equally unclear.

>> You are currently on a link inside of a list.

To click this link press Control-Option-Space.

>> It looks like I should maybe be focused on the next button.

But there is no audio cue until I've let it sit for

a second, at which point I see that I'm actually on a link.

All we need to do is add a single line of code to our app.js file.

We'll want this to happen when we click on a close button so

it'll go inside this event handler that we've already got set up.

Lets assume that we want the user to be able to start back up at the top of

the list so that they can cycle through the revised version.

To achieve this functionality, we'll chain the find, first, and focus methods.

We're finding the buttons with a class of close,

grabbing the first one, and setting programmatic focus on it.

Remember to save.

Now, when we go back to the browser,

we should see that our focus is redirected after deleting a list item.

Looks good.

And we'll check it in our screen reader.

>> VoiceOver on Chrome, Focus Management Sample List, window, Remove Amber, button.

Visited link.

Remove Captain, button.

Remove Amber, button list.

Remove Jade, button list 2 items.

VoiceOver off.

>> Looks good.

Check out the teacher's notes for a link to a helpful article by Hayden pickering.

That includes a few more examples using the focus method

to help you understand focus management.

Keep in mind that jQuery isn't the only way to give an element programmatic focus.

Take some time to make sure you understand how to direct focus in whatever library of

framework you're working with.