ARIA Overview

[00:00:00]
>> 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.