Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:23Length:2.5 hours
  • Overview
  • Transcript

3.8 Accessible JavaScript

When I first got started with JavaScript, I was amazed by how much I was able to do with only mouse events. I could change text on the screen and trigger other events, all using just a mouse. These mouse-only events are dangerous to use anymore because when thinking about accessibility not everyone can use a mouse. This lesson will go over some functions and their keyboard-accessible counterparts.

Related Links

3.8 Accessible JavaScript

Hey John Hartley here with tuts+ and in this lesson of Beginner's Guide to Web Accessibility, we'll be taking a look at accessible JavaScript. So on my page here we have several different buttons and I'm going to go through each of these in a moment, but first, I wanted to kinda go over a few ideas. When I first got started with JavaScript I was amazed with how much I was able to do with only mouse events. I could change the text on the screen, trigger other events all with just using a mouse. These mouse events are dangerous to use anymore because when thinking about accessibility, not everyone can use a mouse. So I want you to think about the functions, mouse down, mouse up, mouse over, mouse out, mouse move, and double click. And basically remove them from your JavaScript vocabulary. Anything that is mouse specific is going to get you into hairy situation when aiming for compliance. This is especially true when used alone. In all cases, make your events device independent if possible. Now this isn't to say that you can never use the click event ever again. But when you do, you should also be using a keyboard accessible event as well. Let's take a look at some code. So, here, I set up my page and this is using jQuery, but when I click this button with just class of click, it'll run a function. And so it'll run the function, it'll prevent the default action, it'll console out the event and it'll change the text to you clicked. So, let's click this. Says you clicked, okay. So it's doing what we said. And let's take a look at the console now and see what this event is doing. So we bumped this out. And it has all this information in here. It's something I didn't originally know about. And that's having the event parameter inside of your function. So once you do that, you open up a lot of extra information that you wouldn't have had otherwise. One of the ones that I wanted to show you was specifically was type. And the type that we have here is click. And in console we have a host of extra information that we can check out. So it has CurrentTarget, it has the actual location of the button on the page. It has type and notice which right here, we'll look at that in a minute. But these are all things that we wouldn't have had if we hadn't passed that E through the function, so that's great. But how do I make sure that this is 100% accessible by keyboard? Well, we can also use in that event, keypress. And keypress just takes a look at your main keys. And so your letter keys on your keyboard. So I'll tab to Click Button and click and keypress and I'll press Enter and it says you pressed keycode 13. So I'll press it again and you can see over here on the right, I'm consoling out you pressed the Enter key, because I'm sniffing out what key are we pressing? So, if the type is keypress, and if the actual keypress is 13, and this is the keycode. Each key on your keyboard actually has a keycode, so that's pretty cool. It'll console out, you pressed the Enter key. If type is click, it'll output the text that you clicked. If you press a key it'll output the text you pressed keycode and whatever key it is. So we're using the e.which or event.which to see which key we're actually pressing. So I'll go back in here and I'll press Tab and you can see that that didn't change. The number here didn't change when we pressed Tab and again that's because the click and keypress, that's really only for the keys that are letters, and I believe space as well. But a space will generally trigger as a click. So you can see that it says real quick, that you pressed keycode 32, and then it hops to you clicked. All the numbers, those are also keys that you can press that will trigger a keypress function. So really anything that's not Tab, Caps Lock, Shift, Function, Ctrl, Opt, Cmd, Return, or Delete. So there are two more key press functions, there's keydown, and keyup. And I've taken a look at those, right down here. So these two dictate as soon as you press that key down, it'll run this function. So it fires that event, and it'll say you pressed keycode, whatever the key we pressed is. And then on keyup, it'll trigger again. These are two different buttons, so on the button with class of keydown, you're not going to have a keyup event, and on the button with class of keyup, you're not going to have a keydown event. Let's take a look at that. So I hopped in here, and I'm through those. I get to keydown and I can now press any key on my keyboard and it'll register. So this include the Shift key, the Return key, arrow keys as well. Anything on my keyboard is able to trigger a function on keydown, and same goes for keyup. One issue with this though is that I hit Tab right now, and all it does is say, you pressed keycode 9, and 9 is Tab. Generally, if we're doing this the right way, when I hit Tab it should go to keyup. It should focus on that, but it doesn't right now. That's one of the dangers of using keydown. So let's go back to the code and see if we can fix that real quick. And to get this done quickly, I"ll just wrap this all in an e.which != 9 and then I'll toss all of this in there. So, now if I hit any key other than Tab it should do what it normally does, which is output You pressed keycode and then whatever the keycode is, so we'll refresh. We'll tab to keydown, and tab one more time. Boom, there we go. So, keyup is now focused, and we're able to use anything on key focus. One thing here, if you press Tab again it tabs to focusin. Now why does it do that? This is because keyup waits for you to actually let go of the key, and then triggers that event. So I press keydown, and keydown triggers that event. I let go of the key, keyup fires. It's an important distinction to be made. For something like being able to press the Escape key to exit out of a modal, you'll need to use the keydown in that instance, because keypress won't work. So I'll go back to keyup here real quick, and this next one I want to show you what the mouseover event looks like. So, it's on focusin, so if I mouse over, It logs the event to the console, and if I twirl that down, the type is mouseout. So we go back over here. We have mouseover and then we have mouseout, so mouseover, roll this back up. Let's check, okay. So that first event, we'll check that one here in a second. And sure enough, the type is mouseover. So that's doing what we want it to. It's firing that event, but it's not so good for a keyboard user. So that's why we add focusin and focusout. Now focusin, this is kinda like keyup and keydown, where the element that you're trying to focus into gets focused, this event will trigger, and the function will run. So, back on our page, if I hover over, you can see this just says Mouse In or Mouse Out. So, Mouse In, Mouse Out. And, if I tab through, I get down there, it says Focus In. And I focus again and it says focus out, so Focus In, Focus Out, Focus In, Focus Out. So by using those two events I've kinda offset the need for only a mouse to be used. As we've been doing in In this entire course, important to make sure that you can go through the site with only a keyboard, just as you would with a mouse. And by having focusin as an event and focusout as well, you're almost replacing this mouseover and mouseout. Now one doesn't cancel out the other, you can use them in tandem like I have right here, but it's important to know the abilities that you have with that. That brings me to a jQuery function, .focus. And .focus is pretty powerful because it allows you to change the current focus of the page to something else. So let's take a look at our function over here. And the button class is givefocus. And on click or keypress, we want to give the click button focus. And if you don't remember, the click button is that first button on our page. If I click the focus button it should then give this button right here focus. Let's try it now. Okay, so that works. And now let's tab through down to focus and press key and that worked. This is especially helpful for when you're opening up modals or dialogue boxes, because then you can shift the focus from the element that triggered that modal or dialogue box and now put the focus inside of that modal. So I'll tab through again, and I'll just press a, and it went up there. Now if I tab through again, and because we're using keypress instead of keydown, if I hit Shift, this should not change focus, and it does not. I'll press it again and it stays there. So if I hit Tab one more time, it should focus on blur. Okay. And it does. Now what happens if I press another key? I'll go ahead and hit n. So I hit n, and focus is now gone. Why did it do that? Well let's take a look at the code. So we come down here to losefocus. And on click or keypress. And I'll show you on click as well. So I come all the way down here and I'll click it and it loses focus. That's because it's using this.blur which blurs itself. And blur, I would argue never really needs to be used. If this is a case where you wanted to just go to a different element, you just use .focus. Inside the browser there’s no ability to focus on two elements at the same time, so there’s never really any need to say well, I wanna focus the item that I’m manipulating right now and I want this other item to get focus. I personally haven't come across any reason to use .blur, but it's possible that you may need it at some point. So it's good to be aware of blur and focus. And one thing that I glossed over is that on keypress, so if I'm hitting j right now if I now hit Caps Lock and hit j again, it's a different keycode. So capital letters actually have a different keycode than lowercase letters. So important to remember that as well. So, somebody has Caps Kock on and they hit a letter that they're supposed to hit. If for some reason you only have them hitting one letter, if they have their Caps Lock on they may not actually be able to trigger whatever you're trying to trigger. And just as a note, as you go through the alphabet you can see that It continues to rise up, so in alphabetical order, that's how the numbers are associated. And then at the top, 1, 2, 3, 4, 5, 6, 7, 8, 9. That's going to be in order as well, starting at zero. You should now have a pretty good idea of things to avoid for events in JavaScript. Now there's a lot more that's involved in JavaScript. But because this is a beginner's course, I think the events alone with mouseover and keypress, keyup, keydown, that covers a lot of what you'll encounter with JavaScript. We've now got a good idea of what to look for in a site as well as how to test for it and how to develop an accessible site. In the next lesson we're gonna take a look at a site that earlier in 2015 got hit with a lawsuit for inaccessibility, and that's Reebok.com. So this would be a good time for you to pause, take a look at the site, and evaluate for yourself what is able to be fixed. And then we can kinda go through it together. Or if you're not interested in that, then you now have enough information to start going out and either fixing your own site or checking out other sites and seeing what is and is not accessible. So let's move on now to chapter four of A Beginner's Guide to Web Accessibility.

Back to the top