Every interactive element needs to be clearly named – and only once – so assistive technology like screen readers can tell users what the element does.
What counts as an accessible name?
Use the following options in order of priority:
- Visible Text on the Element
- Example: A link with the text “Visit Homepage.” No ARIA needed – text is already present.
- Associated
<label>Element- Example: A form input with a
<label>using theforattribute and a matchingidon the input. This is the best practice for form fields.
- Example: A form input with a
aria-labelledbyAttribute- Use when there’s meaningful text elsewhere on the page that should act as the label.
- Example: A modal window labeled by a heading at the top. The
aria-labelledbyreferences theidof that heading.
aria-labelAttribute- Use only when no visible text is available.
- Example: A heart icon used as a favorite button. Add
aria-label="Favorite the swing dress"to make it accessible.
Key reminders:
- Only one accessible name per element – just like a page should have one
<h1>. - Use semantic HTML and visible text when possible – ARIA is the backup, not the default.
- Avoid stacking multiple labels or using both
aria-labeland visible text together.
Using a clear and consistent naming strategy helps users who rely on screen readers navigate and understand your site with confidence.
Transcript
The fifth rule of ARIA is that interactive elements must have an accessible name. What does that mean? It means that elements that are interactive should have exactly one name.
This is just like your web page should have exactly one heading one. We want to evaluate what to use for this accessible name in a specific order. The first is if the text is visible right there on the element.
Second, if a label element is present element that is proper and to be associated.
aria-labeled-by
Next, we should look for aria-labelledby. This would mean that there’s already text on the page that we can use as the label.
Finally, if we have nothing else to use, we put an aria-labelledby. Label on the element.
Here are some examples. Most common example is a link. We have an anchor link here. It goes to a location. It has the visible text right there, visit homepage. That’s it, we’re done. No ARIA needed.
Semantic HTML
The second one is when we are using semantic HTML and we can properly associate a label with it. For example, on forms. Here we have a form with label for fName, and the label says First Name. Then we have an input type text, and that input has an id="fname".
This is how we associate the label with the input is that ID. The next option to use is aria-labelledby. We already have text that is present on our page and would make a good label for this element.
One of the most common situations is to have a modal window.
Modal Window
This modal window needs to have an accessible name. The easiest thing to use is the heading that is already at the top of the modal. Here I have <div aria-labelledby="modal-h2">.
Then within this modal, I have a <h2> with an id="modal-h2", and that will then name the whole modal. Modal is an interactive element and therefore needs an accessible name.
aria-label
The last option to use is an aria-label when we don’t have any text present. A common example of this is the favorite button on a web shop. Here I have an example of a button with a heart symbol on it. That heart doesn’t have any text.
It’s just a small little button to allow you to favorite the item. We’re going to make that heart wrap it in button, and we’re going to put an aria-label on that button to allow us to favorite the swing dress.
That label makes it clear what this button does. Remember, only use the aria-labelledby or aria-label if there isn’t already a text or a label present, and only use one accessible name per item.
I hope you enjoyed this video. If you did, please give it a like, share it with your friends, and of course, subscribe to the channel for more information on web accessibility.