FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.7 More Information

Now that you have a good foundation in making your web content more accessible, in this lesson I will show you where you can go for more information.

2.7 More Information

Hello and welcome back. We've talked about a few different ARIA roles and ARIA attributes that help us to make our sites more accessible. And I think by now you have a pretty solid understanding of where you need to start, at least the thought processes that go into making your site more accessible. Especially when it comes to using these roles and attributes. And so I don't think it would accomplish a whole lot to just keep showing you more and more roles and attributes that you can use. Instead, now that we've got the basic idea down, I just want to show you where you can find more information. So first of all, if you just jump into Google and do a search for ARIA roles, you'll find a lot of really helpful information. And one of the first search results that you'll probably come to, is this one for And you can immediately see when you come to this page, just a whole list of roles and attributes, properties, things like that, that you can use. And it's very important, as we've discussed before, if you're going to use one of these roles, you need to understand everything that goes into it. For example, with the Checkbox that we looked at, if we click on that to get more information, it tells us that first of all, we have this aria-checked attribute that has true, false, and mixed. We took a look at how to create our own checkbox that uses those attributes and that acts like a checkbox. But again, I just wanna repeat that if you're going to use these roles and these attributes, then you also need to build all the right functionality into those elements or widgets that are using those roles and attributes. And websites like this one are really gonna help you to understand what needs to go into those widgets. So for example we see here since a checkbox is an interactive control it must be focusable, which is why we added a tab index to it, and keyboard accessible. And another thing we mentioned, we didn't actually implement, but a challenge I gave to you was to use the space key to activate that checkbox once it was focused. So again, I want to encourage you to not only look through this website and see all the roles that are available, but anytime you create a new widget on your site I want you to think in terms of accessibility. And I want you to look through these roles and see if there is a role that might match up with it. And if there is, I want you to take a look at that role, drill into it, see all of the things that are expected of it, and make sure that you build the right functionality into it because all of the little things that go into a checkbox, for example, aren't immediately obvious, for example, you might have never used the space bar to change the value of a checkbox before. And so it might not have occurred to you to build that into your fake checkboxes, your divcheck boxes, if you will. And so it's really important to understand these roles and attributes if you're going to use them on your site. So I just wanted to show you where you can find a little more information, and hopefully this will, at least get you started building the things that you wanna build. So thank you for watching, and I'll see you in the next video.

Back to the top