7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Accessible Checkboxes

When using an input element for checkboxes, you needn’t worry about adding Aria roles because accessibility devices already know how to handle them. However, if you want to create customized checkboxes using other HTML elements, there is a lot to keep in mind. In this lesson, you will learn a lot about the thought processes that go into creating accessible content as you tackle these custom checkboxes.

2.6 Accessible Checkboxes

In this lesson I wanna talk about the ARIA role of check box. Check boxes are a very commonly used input item in an HTML form but there's not a whole lot that we can do to style a check box. So sometimes you might want to use something else or another element instead of an input element to create a check box and then make it behave like we want it to behave. So I'm gonna turn off Chrome Vox for just a second. >> Window extensions tab. >> And I want to illustrate that we have a check box here that works, the first one at the top. But then we also have this second check box, which is made with a div and in jQuery I've made this work. And I've even created three states for it. So we have our unchecked state, we have a mixed state for the first time we click on it, and then we click on it again and we have our checked state. And we click on it again, it just cycles off. Now I don't know why you would have a mixed state for a privacy policy check box but you get the basic idea. So, let's turn Chromebox back on and see how these behave. So, I'm going to turn that on. >> Chromebox spoken feedback is ready. Window checkbox is tab. I agree to the terms. I have read the Privacy Policy. >> Okay so, it reads all of the text to us first. And let's click on the first check box or actually, let's just hit tab to go to the first checkbox. >> I agree to the terms, checkbox checked. >> So it tells us we had a checked check box and if we hit the spacebar. >> Not checked. I agree to the terms, checkbox not checked. >> It tells us that it's no longer checked. Now I've mentioned a couple of times before that when we start using these Aria rolls, we need to make sure that the elements we use them on are actually behaving like they're expected to behave according to that roll. And with any form element, you should be able to hit the Tab key to cycle through those form elements. And if I hit the Tab key right now. >> View site information. >> You'll see that it does not go to our fake checkbox. I can hit the Tab key as much as I want. And it's not going to move to that check box. So that's one thing we need to fix, but we also to start assigning some rules, here. So let's close this, let's jump over to our HTML. And I've got this HTML file called checkboxes.html, and I'm going to save that with a new name, so that we don't save over that original file, we'll just call this checkboxes01.html. So in our HTML, you can see that we have this first input, which is a checkbox, so this is an old-fashioned checkbox. We don't have to do anything there as far as an ARIA Role is concerned because our accessibility devices will know what to do with an input with a type of check box. So we can move past that but before we move past it let me go ahead and point out that as far as accessibility is concerned you always want to give your form inputs a name. And it's also helpful to give them a label. And this text here is what's read whenever this check box is highlighted. Well we have our second check box down below which is just a div that we're treating like a check box. And you'll notice, I've given it a class of checked. Well lets look at our style down here closer to the bottom. We have the id for our check box which defines the basic styles for our check box. And then we have the mixed class which is what it looks like the first time we click on it which puts that little blue square in the middle of it. And you'll notice I'm doing this using the before sudo class so the parent element the check boxes itself, the div has a position of relative. And then the before pseudo-element inside it has a position of absolute. So I've positioned it inside the check box so that it's 1 pixel from all four edges. And that's what gives it the look that we're going for. And then, we have the checked class. And it's kind of doing the same thing, using the before pseudo class, but we're just giving it an X there, instead of a check. So again, these are just styles. This just defines what our check box looks like. Let's move down to our JavaScript, where we're defining the behavior. So, you'll see I've imported jQuery here, and that's just to make some of these things easier. And we have our check box stored in this check privacy variable. We've created a click event for it. If it has a class of mixed, which means it's got the blue square filled in in the middle. And we click on it then we wanna remove that class of mix and add a class of checked so that it'll now have an x in it. If it already has an x in it, in other words, if it a class of checked, then we just simply wanna remove that class of checked. And it's not gonna have any class applied to it, and it's just gonna be an empty square. And then finally, if it doesn't have any classes associated with it, we're just going to add the mixed class. So the first thing I wanna do here is the most obvious thing, I wanna jump into our div, and I wanna give it a role of checkbox. And let's see how that affects things. I'm going to save our file. Jump back into our browser and then I'm going to navigate to check boxes zero one. >> Check boxes, I agree to the terms. Check box not checked. >> So everything's still behaving as normal with our first item. And when we click on our second item. >> Check box. >> It calls it a check box. Now remember when we clicked on our first item it said check box not checked. It didn't say that with this one though, with our new div. Because It has no way to know whether her check box is checked or not >> So with a lot of these aria roles we need to understand more than just the role itself but we need to understand the attributes that come with it. And when you have a check box you need to let your user know when it's checked, not checked even when it's mixed or partially checked. We need to provide that kind of feedback and there is an aria checked attribute that allows us to do that. But another problem that we have here, let's go back to our check box. >> Checked. >> Is that even though we've set our second item up With a roll of check box and even through we've created some click events or a click event for this check box. You'll notice that it doesn't work with the tab key, if I hit the tab key to switch between check boxes, view side information, it doesn't jump to the second check box. So we need to make sure that that works and we can do that very easily using tab index. So lets jump back to our HTML file. And let's take care of our tab indexes. So we have our first input, which is a checkbox, we're simply gonna give that a tab index of 1. And then we'll go to our div here and give it a tabindex of 2. And what that does is it makes this div a focusable item. By default, a div cannot acquire focus but if we give it a tabindex we can. So, now we can tab in between our two check boxes. But as I mentioned before there's more to it that we need to do because we need to communicate to our browser when this fake check box is checked, when it's not checked, or when it's partially checked. And we can do that with an attribute called aria-checked. And let's scroll over so we can see everything. Let's give this a value, first of all, since it's by default checked, let's give it a value of true. So that's a good starting point, but it's not always gonna be set to true. Because when we uncheck it, we need to change that value, and we're gonna do that in our JavaScript. So let's jump down to our JavaScript, and we've already created our if events for all of these different possibilities, so if If it has a class of mixed and we click on it, then it's gonna have a class of checked, we're gonna add a class of checked to it. So we also need to update that ARIA attribute. So we're gonna say $this, which is pointing to the item that we just clicked on. We're gonna say this.attr, for attribute, and we're going to assign a new value to the ARIA checked attribute. So we'll put a comma there, another set of quotation marks. And we're going to give this a value of checked. And so the way we do that is we set aria-checked equal to true. Now you'll notice I'm not using a Boolean value, this is still string inside quotes, and then a semi-colon at the end of that statement. So here we're setting aria-checked to true, because we're adding the checked class. So let's copy that, and then down here we're removing the checked class, so it's going to be unchecked, so let's just paste that. And we're gonna set this to false, so ARIA checked is gonna be set to false. And then we have our mixed, we're gonna add a mixed class to it. And we are also going to set aria-checked to a value of mixed, there is a mixed value for the aria-checked attribute. Those are your three possible values there. So hopefully we've added everything we need in order to get this check box behaving like a real HTML check box. So let's save that. Let's jump back into our browser. And I turned off ChromeVox for a second, I'm gonna turn it back on now. >> ChromeVox spoken, window check boxes tag. [SOUND] >> And then we'll click on this first one- >> [CROSSTALK] not checked. >> And it's not working, cuz first of all, we need to refresh our page. [SOUND] >> Checked boxes. >> But then if we click on this first one- >> Checked. >> It tells us that it's checked. And now, if we hit Tab- >> I have read the privacy policy Checkbox checked. >> It tells us that our second checkbox is checked, and we have that focused now. We can hit Tab to go from one checkbox to another. And now if I click on that checkbox to change its status. >> I have read the privacy policy, checkbox not checked. >> It tells us it's not checked, if we click on it again. >> I have read the privacy policy, checkbox partially checked. >> And it tells us that it is partially checked, so it is very, very helpful. Now there is one more thing that we would need to do to this check box in order to really make it work right and that is to make sure when you hit the space bar. The check box changes its status because by default you can do that with a regular check box, with an input check box. But we can't do that by default with this div element. You wanna make sure that all of your form attributes can be controlled using only the keyboard. We can't do that right now, we can only change the status of this with a click. So, I'm gonna leave that as a project for you. But that's something you always want to keep in mind is make sure that you understand everything that goes along with the ARIA role that you're trying to use. So thank you for watching and I'll see you in the next video.

Back to the top