 Hey, there, polycasters. Rob here. Welcome back to the show. So today, we're going to complete our three-part series on building accessible components by talking about labeling. Labeling is super important for accessibility because it allows us to tell the user what a control is for. And let me show you an example to explain what I mean by that. So over here, I've got JS bin set up. And I'm just going to start creating a bit of a form element. So I'll drop in an input tag. And you can see, all right, cool, I've got a text input. What am I going to ask the user for, though? Well, I'll add a label. And I'm just going to wrap that label around the input. And I will say, hey, I would like to know the user's shipping address, right? So anyone filling out a form who is a sighted user will be able to go through and see, OK, there's a text input field. There's a label here. I'm assuming these two are associated. And because I have used nice semantic HTML and I've built this relationship between the label element and the input, check out what happens to my screen reader when I interact with this thing. Voice over on Chrome. Jet shipping address, edit text. Nice. So we've created that alternative interface for our users who rely on screen readers because we've built this nice semantic relationship. Now, the tricky bit here is that the label element only works with a handful of tags. So if we're building a custom element, we're going to have to come up with our own way of labeling it and providing that sort of accessible name to our users. So let's go check out the ARIA authoring best practices guide to maybe get some hints on how we could do this. So switching over to that document, I'm going to go to the checkbox section. And if I scroll down to the bottom, the second bullet point here says that the checkbox should have an accessible label preferably provided by a visible label associated using ARIA labeled by. Now, we haven't really talked about ARIA labeled by yet, but now seems like a really great time to cover that topic. So in the world of ARIA, there's really kind of like three ways that we can label something. There's ARIA label, sort of the singular, which is for basically applying a text alternative directly to an element. There's ARIA labeled by where we can actually have another element and sort of reference that element and use that as our label. And then in some instances, we can actually kind of generate a label or a name for an element just based on its content. And we're going to cover all three of those today. So let me start by talking about ARIA label, because that one's pretty easy and straightforward to explain. I'm going to switch over to my code editor. And here is our dash checkbox from the previous episode. And I'm just going to give it an ARIA label attribute. And we'll say the value is going to be sign up. So we're assuming the user checks this checkbox and they're signing up for something. So we switch over to Chrome. We refresh the page. Now, if we look at this checkbox now in the DevTools, we can see that ARIA label has been applied here. And let's check out what happens when I interact with this using my screen reader. Sign up. Uncheck the checkbox. So you heard the screen reader say sign up, uncheck checkbox. It has generated a name based on that ARIA label attribute. But we don't have a visible label on screen. So we could add a visible label on screen using something like a span, but now we're kind of duplicating our work there. Maybe a better approach would be to use something like ARIA labeled by. So let me show you how that works. We'll go back to our code editor. We'll get rid of this ARIA label attribute. I'm going to add a span here. I'll say sign up in that span. And the way ARIA label works is it takes an ID reference to another element to use that as its label. So I'll give span here an ID of like sign up label, something like that. And we'll take our dash checkbox and we'll say ARIA labeled by equals sign up label. So now we've linked these two together by that ID reference. We go back. We refresh the page. You can see the CSS, the height is a little off, right? This thing is not quite centered. That's easy enough to fix. But we do have a visible label on screen now, which is good. And let's look at what happens when we activate our screen reader. Voice over on Chrome, dash check sign up, uncheck checkbox. So you heard there that now it's saying sign up, uncheck checkbox. OK, this is great. This is basically what we want, but it is a little burdensome to have to ask everyone who's using our checkbox to also include a span and create this sort of label linkage between the two. One final approach that we could take is to actually have the checkbox's name generated by its content. Now, this works for smaller elements, a checkbox, a radio button, something like that. It wouldn't work so well for really large elements like an article or some big landmarks like that. But for something really small, a little control, this technique could work. So going back to my code editor, I'm going to get rid of that span. I'm going to get rid of the ARIA labeled by here. So we'll nuke these. And we'll go to our dash checkbox definition. And right now, we're using the host selector to draw a rectangle around our element. And then when it is ARIA checked true, we're putting a little check mark inside of it. And so we're going to need to add a little bit of additional markup. We're going to need to actually have that rectangle and that checkbox kind of over in a container. And then we're going to need to have another element which will act as our label. So I'm going to add a little bit of HTML here. Let's see. So I'll drop in a div. I'll call this firstDiv. Let's see. We'll call it checkboxContainer. That's going to hold our actual check mark. I'm going to make another div here. And we'll call this one, let's see. We'll do checkboxLabel. And then I'm just going to replace the CSS that I have here with some updated CSS, some updated styles. And let's walk through these really quick. So what I've done is I've kept the host style of just making sure this whole element is inline block. The checkboxContainer now has the styles for drawing our rectangle. When the host has already checked applied, the checkboxContainer will actually get the check mark inside of it. And then the checkboxLabel, we're just differentiating it by bumping the font size up a little bit and making sure that both of these are set to vertical align middle so that way the text and the checkbox look nice and centered. All right. The last thing I want to do is inside of this checkbox label, I'm going to add a content element. And what this is going to let me do is, in my index file, inside of dash checkbox, now I can just write my label right inside the element like that. It's going to project that into that element's shadow DOM. And then the browser should be able to compute the element's name or its label based on that content. So let's check that out. We'll go back to Chrome. We'll refresh the page. You can see that the text is a little bit bigger. It's centered now. We turn on our screen reader and let's see what happens. Voice over on Chrome. Sign up. Uncheck checkbox. So there we go. We've got a slightly nicer, easier way to give our user a label. Another really cool thing about this is that since the label is now inside of the element itself, when I click on the label, it also focuses and activates the element. And this is something that you see with sort of native elements, native input, native checkbox, when you associate them with a native label element. So now we've created a very similar association with our custom element here, which is really nice. So that about covers it for today. There's always more to talk about when we touch on accessibility. But hopefully now you have a better sort of foundational understanding of how these things work in the platform. If you have any more questions, though, I'm always happy to answer them. So please leave them for me down below in the comments. Or you can reach me on a social network of your choosing at hashtag ask polymer. As always, thank you so much for watching. And I'll see you next time.