Check out a free preview of the full Accessibility in JavaScript Applications course:
The "ARIA Overview" Lesson is part of the full, Accessibility in JavaScript Applications course featured in this preview video. Here's what you'd learn in this lesson:

Marcy discusses situations when using the ARIA APIs for accessibility analysis would be worthwhile, defining role, state, and property in relation to the specifications.

Get Unlimited Access Now

Transcript from the "ARIA Overview" Lesson

>> Marcy Sutton: So I talked about ARIA a little bit, and it is a specification for supplying accessibility information in your websites and Web applications. It's something that I didn't really get into right away, so this is definitely an advanced part of accessibility. But you'll see it come up often enough that it's worth diving in a little bit.

[00:00:24] So there's three major components in ARIA, the role, state, and property, the role is what is the thing. We saw a div go from a div, which is just a generic container, to a button, so that's what type of an element is it? The state is what's happening to it, is it disabled, is it selected?

[00:00:42] So there's ARIA attributes, like aria-disabled, aria-selected. And the property's kind of a catch-all bucket for other things, like aria-label is a good example. And that's just describing what's the nature of it, what's its name? And I also have to say that the first rule of ARIA is don't use ARIA.

[00:01:03] And that's why I say it's a bit more of an advanced topic, cuz it shouldn't be the first thing that you reach for. If you can use a button element or a native form control, you get a lot of behavior for free that you don't have to recreate.

[00:01:16] But for cases, really custom Web applications, that maybe you're inventing new patterns and there isn't a default HTML component for you to use, that's where ARIA can become a really useful tool.