 Hey, everybody. What's up? It's Rob. Welcome back to the AliCast show. So today, we're going to be talking about the importance that labeling can play in your applications. Now, if you follow the web content accessibility guidelines, which is really a set of criteria for making sure that your app is accessible, the very first thing you'll see in their guidelines in section 1.1 is that you need to provide text alternatives for controls and images and things like that in your page. So looking at section 1.1.1, we can see that if non-text content is a control or a sub-user input, then it has to have a name that describes its purpose. And you'll see mention of things needing names and then we'll add guidelines in a lot of different places. It can be a little confusing when you're reading these guidelines to understand what they mean by that, because I thought we were talking about labeling, but it's saying names. The term itself, name, is a bit overloaded in some of the accessibility specs. You'll also see sometimes it's referred to as text alternatives and things like that. But really what we're talking about here is for any sort of control or image on your site, it's going to have a few different attributes to it. It's going to have a name or a label. We often use those interchangeably. It can also have a role, so it can be a role button or a role of a checkbox or something like that. And it can also sometimes have a state, right? So like a button could be disabled or not. So today we're going to specifically talk about the name or the label of controls and really why it's important and how you can label elements differently or the different techniques you can use in your application. So follow me over here to JS bin. I'm going to walk through just a few examples. The first is we're going to start with a very simple button, just a very simple button element. And one of the things that I want to show off is how to use the new experimental Chrome accessibility dev tools to actually figure out what the name and the label for your controls is. So I've shown this off maybe a few times, but I realized I actually probably can do a good job of teaching folks how to turn these dev tools on. So the way you do that is you go to chrome colon slash slash flags, and this will open a bunch of features that you can turn on in your browser. These are all oftentimes experimental things, so you've got to be careful about just flipping stuff on. But the thing we're going to look for here is, we'll look for the word dev tools. And there's a line here that says, enable dev tools experiments right here. So I'll click the enable button, and then down at the bottom of the screen is prompt to tell me to relaunch. It's going to relaunch everything. Wait for Chrome to restart. And once it comes back online, we now know that our dev tools are ready to start working with. So I'll go over to JS bin, where I've been working on that little button example. Open my dev tools using command option J on my Mac. And then I'm going to click the little context menu over here on the right-hand side. There's like three dot thing. Go to settings, and we should now have this experiments tab in our dev tools. And when I click on this, there'll be the option to turn on accessibility inspection. And then I just need to close my dev tools and open them again. And now we're actually able to use these cool new accessibility dev tools. So for instance, I can go over and I can inspect this button and looking in the elements panel. Let's see over here where you've got the sort of like a style tab and things like that. Go over a little bit more. We'll see that we have this new accessibility option. And I'll zoom this in a little bit so it's a bit easier to read. Here, let's actually, we'll dock the dev tools to the bottom of the screen. So we can have a little bit more real estate. Scoot this up. All right, move it over. Accessibility, boom. OK, so now we see all sorts of cool accessibility related information for this button element. And you can see right here, there's a name field where it says add to cart, right? And that's the exact text that we've placed inside of that button. I'll zoom that in a little bit more so you can see the button up there at the top of the screen as well. So how is this name being applied to this button? Where did it actually get that value from? Well, if you look at the dev tools, you can see that there's a few different ways that a name can be calculated. If the element has a title, right now it says it's not specified. For some elements, it can actually take the content of the element. So since we actually put some text inside of our button right here, right, it's actually using that content to provide the name for the element. But there's other options as well, right? So it could be from label, it could be aria label, and aria label by as well. And I'll talk about those in just a little bit, right? But so this is sort of like the basics of how we get a name for an element. And we can assert that things are working as we expect by turning on a screen reader. And I'll move this box up here so you can kind of see what voiceover is saying, turn on volume. Inside of the frame, add to cart button, voiceover off. Right, and so you can see that the screen reader announces the name of the control when it lands on it. So it said add to cart and then it announces the roll button. Now for some elements, something like a checkbox, for instance, you usually don't have the ability to put text inside of the tag. So it can't generate a name from its content. So let's do another example here. We'll do input type equals checkbox. We'll get rid of that, add to cart button. Input type equals checkbox. Maybe we'll mark it as checked already, right? So you can see this little guy over here is checked. You know, what you might do, sometimes you might just say, OK, cool, well, I'll say like sign up for our newsletter, right? So a sighted user is going to be able to see that text on screen and they'll know that, OK, that text is associated with that checkbox because they're right next to each other. But if we inspect the checkbox, we can see that it actually does not have any sort of like computed name right now. So the problem here is if I'm using a screen reader and I just land on this checkbox, all it's going to do is say, you know, checkbox. It's not actually going to tell me anything else about it. So how do I give this element a name? Well, the way that we do that with a lot of sort of the built-in controls is we use the native label element. So if I just wrap this input in a label tag and put that text inside of there. So I've got both the input and the text that's labeling it inside of this label tag. And now, if I go and I inspect the input element and we look at our DevTools, we can see that its name is now set to sign up for our newsletter because it got that from that label element. Another technique that you can use, if for instance maybe like wrapping something in a label doesn't quite work for your needs, is you can give the element an ID. So I can give this input an ID. I'll just call it check, or something like that. And then I can give my label a four attribute and I can associate it with the ID of that element. So I'll say my label is for that check element. So I'm matching it to its ID. I'm matching its ID reference. And now, if I go and inspect these things, we'll see that we still get that name. And one thing you might note is in the Accessibility DevTools right now, it says from label for label undefined. So there's a little bit of a bug in this DevTool. Again, these are still experimental. So you might uncover bugs from time to time. But when that bug is fixed, it'll probably say something like label for, and it'll specify this label element right here. Tell us that's the label that is providing the name for our element. OK, cool. So that works for native controls, button, input, select, things like that. You can use the label element on those. But there are instances where the label element itself doesn't quite work for your needs either. So I'll give you another example here. Let's say we're making a button. And I've already written some CSS for this button. And it's going to be one of those sort of classic hamburger menu buttons. I'm sure you've seen these on responsive websites before. So usually, when you're using a hamburger menu button, you don't put any text on screen near it. Now you can. You could write the word menu underneath, and you could use that to label the element, which would be cool, but some designs folks don't do that. So how do I give this button some sort of a name? How do I give it some sort of a label? So one technique that we can use to do that is we can use the aria label attribute. The aria label attribute is basically going to provide a name for the element. And if that element already had text content or something like that, like an actual button element, the aria label element is going to trump that text content. And that will be the only text that is used, what is inside the aria label. So in this case, for this menu button, I'm going to give it aria label equals, we'll just say, menu. And now we go and we inspect this element using our DevTools. We can see that the name for the element is menu. And we can see that that value is coming off of that aria label attribute and even sites that we've got some aria attributes here. Cool. So that is another technique that you can use. If you need to label something, but you don't have the ability to put on-screen text on the page, this is a very, very handy technique. Again, if you are building any sort of site in general, but you want your screen reader users to be able to pick out the controls that have non-visual labeling, this is a very helpful technique. The last thing I want to talk about is how you can associate other elements as your label for things like custom controls. So let's say I'm building a really, really fancy custom widget, maybe a custom checkbox or a custom dropdown menu, something that doesn't have a native analog in the browser. I can use another attribute called aria-labeled-by to associate a label with that element. The reason why I want to use aria-labeled-by is because the native label tag only works with a few sort of like select-built-in elements. So it works for button, input, and select. But if I'm making custom controls and things like that, unfortunately, the label element is not able to provide those elements a label. So what I'm going to have to do is use the aria-labeled-by attribute. So let me walk you through an example of that. Let's see, I've already written some CSS for a custom button. Now, if you watch the previous episode, maybe we can include a link like over here or something like that, you never, ever, ever want to make a div button. But I'm going to do it for this case just to demonstrate a scenario where just using the label tag is not going to work for an element. So I'm going to add a div. I'll say class equals button. And we'll say shop now. So I'm making a button that lets folks shop for some stuff. So we're going to roll equals button. So that'll identify this element's roll. We'll give it a tab index of 0 so it's focusable. That's important. Cool. So if we go and we look at this element in our DevTools, it says this thing is roll equals button. It sort of has a label of shop now, because it's pulling it out of its text content. And that's useful. But maybe we have a bunch of shop now buttons on the page. Maybe we have a bunch of different sections where someone can shop for some stuff. So let's say this one in particular is under men's shirts. So someone could land on this button and say shop now, but it doesn't really tell them what they're shopping now for. I want a way to associate men's shirts with this shop now button. And I can do that using aria-labeled-by. So the same way that we did things with the for attribute and label element, we're going to give this heading an ID, an ID of men's shirts. And then we're going to associate that with this custom control. We'll say aria-labeled-by, which I always misspell, equals men's shirts. So open that up. Look at it in the DevTools. Look at our accessibility tab here. And we will see now that the name for this element is men's shirts. OK, well, that's kind of what we wanted, but we've lost the other bit where it says shop now. We kind of have to add that back in. And so this is where we see actually one of the really cool features of aria-labeled-by, which is that it can compose labels together by referencing different elements. In fact, the element that's containing the aria-labeled-by attribute can even self-reference itself and use that to compose a better label. So let's give that element an ID as well. So we'll take our div button here. And we'll say men's shirts button. And we'll say aria-labeled-by men's shirts, men's shirts button. And now we go back. We inspect this control. I'm going to look at the accessibility. And we'll see that now if a screen reader lands on this element, it's going to say men's shirts shop now button. You can verify that using a voiceover. Voiceover on Chrome. Men's shirts shop now button. Voice over off. Right on. That's really nice. And we also see down here in the DevTools, we get references to the elements that are the ID for the references that are being used for aria-labeled-by, which is really, really helpful. So that about covers the basics of labeling. If you have a site today, maybe you haven't gone through it with a screen reader just yet, maybe give that a shot. And if you've got some controls that perhaps they're just announcing the role, but not announcing the associated label, then consider using some of these techniques to make sure that those elements have a proper label, proper name. If you have any more questions for me, you can always leave them down in the comments below or hit me up on a social network of your choosing. And as always, thank you so much for watching. Hey, if you enjoyed this episode of AliCache, you can always catch more over in our playlist or click the little subscribe button and you'll get an email notification whenever we launch new stuff on the channel. As always, thanks for watching.