Hey everybody. Josh here with Online ADA, bringing you another WCAG accessibility guideline video. We’re gonna cover 2.5.3, Label in Name.
This is a Level A requirement and the description reads, for user interface components with labels that include text or images of text, the name contains the text that is presented visually.
To understand this article, it’s first important that we understand what the accessible name is and where it comes from. Most of the time, the label is going to be what the accessible name is for the input. However, that’s not always the case and that’s what we’re talking about here in 2.5.3. So, if we take, for example, a search input on your page and we have a visible label representing that search input text box, then, and the label says something like search for a value, then the input itself might have an aria label on it that takes precedents over the label. And in that aria label, we have just the value search. That’s what we mean by having the label in the name. So something in that label that typically the beginning of the content of that label is gonna be in the accessible name, so the label would come combine either all of the visual label or the first part of it.
So in this case, you’re search input, it’s purpose is search so, we would want to have that very beginning part ‘search’ and the ‘for a value’ could be omitted, that goes into the aria label, and now we have the accessible name matches the label. If all that makes sense.
It’s also important, that if your visibly presented text has a lot of content intent in it, or even just more than one word, than that, very first word that exists in there or the very beginning of that label is going to be in the accessible name. This is because speech input users are going to read that visibly presented text and they’re expecting that it’s going to control that input. So, if you’re label says search for a value and you’re accessible name in the aria label, said something like ‘another search input’, then they don’t match up and that user would not be able to control that input by reading ‘search for a value’.
If instead you provide ‘search’ in the aria label they would read search. Even if they read out the rest of it, it would understand, programmatically, which input it was supposed to control. That’s what label in name means. It’s expecting that the accessible name, that’s computed from any of these properties previously listed, is gonna match the visibly presented text.
Okay. That was a long one lots of information there, but thank you for sticking with me and joining me in this video and I hope to see you on the next one.