FREELessons: 9Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 ARIA Overview

In this lesson, I will introduce you to the ARIA specification and share with you a few basic rules and guidelines for using ARIA roles and attributes.

2.1 ARIA Overview

Hello and welcome back. In this lesson, I wanna give you a high level overview of what ARIA roles are and how to use them. Now, ARIA stands for Accessible Rich Internet Applications, and the ARIA specification defines ways that we can make our websites and web applications more accessible to those who have disabilities. And we can use ARIA Roles to help assistive technologies, such as screen readers, determine how the elements of your site are supposed to behave. For example, if you give an element the role of button, then assistive technology, again, such as screen readers will treat that element like a button even if it's not a button or an input element. So semantically a button element is going to be treated the same way as a div element with a role of button. Keep in mind that I said, semantically, just because you give a div the role of button doesn't mean it's going to take on the behavior of a button. You've got to do that yourself and we'll talk about that in a moment. Now when we're trying to use ARIA roles to make our sites more accessible, there are some best practices that we need to keep in mind as we move forward. And these are gonna make more sense once we start looking at the examples later on but we need to keep these in mind. The first thing I wanna bring up is that, we need to use the right Mark up, and what I mean by that, is that whenever possible you should use an HTML element that already has the desired behavior built into it. In other words, if you want an element that looks and behaves like a button then use a button element. Unless you have a really good reason for it, and I can't think of a good reason right off hand, you don't wanna use a div element as a button. Even if you're assigning an ARIA role of button to that div element, you might as well just use a button element. Because the button element already has the behaviors that you need built into it. Now, the key phrase in what I said a moment ago I'm gonna go is whenever possible, we need to use the right markup. Whenever it's possible to create an element that has our desired behavior in it, then we need to do so. But sometimes, it isn't possible. For example, there are a lot of ARIA roles out there, and not every role has a corresponding HTML element. But a more common example is you might have in HTML element, such as a check box or an input with a type of check box, that you might not be able to style the way you want it. Because when it comes to things like check boxes or radio buttons. There's a very limited amount of things that you can do with CSS to make those look better, or to customize those to fit the design of your site. And so a lot of web designers will use a div instead of a check box and then just treat that div like a check box. In that case, it's okay to use a different element. And then when you give that div a role of check box, then a screen reader will know how to tell a visually impaired person and not a div. But then the third thing that we need to keep in mind here is that we need to make it work. In other words, giving something a role, a checkbox, is not going to automatically make it function like a checkbox. That's gonna be up to you as the designer or developer to take that div and give it the desired functionality. For example, if you were to use a div with a row of button, which we've already talked about, there's not really very many good reasons for doing that. But if you decided to create a div and treat it like a button, then you need to make sure that it can do the things a button can do. A button, first of all, can receive focus. A div element cannot, unless you explicitly give it that functionality. A button, by default, can be clicked. A div cannot, when you click on a div, it doesn't really do anything, it's just a presentational element. So, when you use an ARIA role to override the semantics of a particular element, then you ned to remember that it's your job to make it function the way it's intended to function. And then the last thing we need to keep in mind here is that we don't want to be redundant with our use of ARIA roles. And what I mean by that is if we create a button element we don't also need to give it a role of button because screen readers for example know What buttons are. And they know how to treat buttons. Similarly, if an input has a required attribute on it, you don't also need to give it an ARIA required attribute of true. So hopefully this high level overview has given you a good understanding of what ARIA is, and how these roles are going to be used. And as we move forward and actually start looking at some specific examples, hopefully this will all start making sense. So thank you for watching, and I'll see you in the next lesson.

Back to the top