Keyboard Interactivity

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