ARIA Labels & Descriptions

[00:00:00]
>> Jon Kuperman: So getting a little bit further into ARIA, we've talked about this a little bit, kind of showing some of the ARIA labels and the ARIA roles and things like that. But ARIA is a specification in and of itself and it's quite a robust API. So it offers a lot of things that can provide a ton of usefulness to interactive and robust applications.

[00:00:20]
And we'll get into some kind of cooler examples of using ARIA to provide what I would say are exceptional accessible experiences. So just to review, the difference between ARIA and WCAG is that WCAG sets the standard saying things need sufficient colors, things need to be keyboard accessible, things need to be logical and way ARIA provides tools and techniques to meet those standards.

[00:00:44]
So they say, hey, we'll give you ARIA labeledby, we'll give you described by, we'll give you these roles and these regions and things like that. So there are two specifications. One says how your app needs to work and the other provides a set of tools and techniques to get it working that way.

[00:00:58]
So there are complementary standards there, but ARIA is where we will look for HTML properties or some JavaScript APIs, or the tools that we'll actually need to get our job done here. So a specific example, WCAG specifies that text and interactive elements need to have sufficient color contrast.

[00:01:17]
So in order to be compliant, your text and your interactive elements need to have some kind of difference. So WAI-ARIA doesn't address color contrast, but it does give you things like ARIA value now value min, valuemax, things that you can use to help screen readers convey interactive robust things.

[00:01:36]
It's a bit of a subtle line to draw, but I think ARIA specifically covers it keeps using the word robust in the spec, but more advanced applications with more advanced use cases, tools that would not be sufficiently covered just by having a static website with appropriate colors and things like that.

[00:01:53]
So yeah, complex components, that's another good way of viewing it. Often ARIA comes in to help where simple HTML cannot do things. So it's not so much a replacement for anything. It's like additive APIs on top of HTML to help you meet these WCAG standards. So earlier we learned about the label tag and we saw all sorts of different ways that you can use labels, the implicit labels or the specific labels with IDs and how they can be used to label certain form elements and help screen reader users understand what it is that they're interacting with.

[00:02:27]
We also talked back then about how labels had a limitation of only being able to be applied to labelable elements. And we learned that we can use ARIA for non labelable elements. So in general, the ARIA spec provides us with some really cool tools for labeling and describing elements.

[00:02:44]
And those tools are aria-label, aria-labeledby and aria-described by. So let's take a little look into these. So we've got labeledby and describedby, which I find often trip some people up when they're first getting started. So the label is essential information about the object, like what it is. Basically what it is, it is a name field, a name text field.

[00:03:05]
The description is there to provide supplemental or extended information that users might need for whatever they're working on. So in this example we can see that the label is quantity, right? That first line there, label quantity. So when they get to the field it'll say text field, quantity.

[00:03:23]
And the description is what the user's kind of supposed to do. And so it's like enter the desired quantity 1 through 10, or maybe it would be, how many of these headphones would you like to purchase? Something that's supplemental that's not absolutely vital for how to enter information on the field, but is really nice to have describing what action you expect the user to take.

[00:03:44]
Does this kind of example help, kind of, okay, great. And then in order that they will be read, it will be the label and then the description will be read afterwards. So just kind of thinking about how the screen reader will handle it.