# Aria-Label is Not Always the Answer

DevFeed: [Aria-Label is Not Always the Answer](<https://devfeed.tech/articles/aria-label-is-not-always-the-answer-38440.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2021-11-29/aria-label-is-not-always-the-answer/>)

Author: Eevis Panula

Published: 2023-01-03T08:57:28.550000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [aria](<https://devfeed.tech/topics/aria.md>), [HTML](<https://devfeed.tech/topics/html.md>), [html elements](<https://devfeed.tech/topics/html-elements.md>), [W3C](<https://devfeed.tech/topics/w3c.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [accessible](<https://devfeed.tech/tags/accessible.md>), [aria](<https://devfeed.tech/tags/aria.md>), [details](<https://devfeed.tech/tags/details.md>), [html](<https://devfeed.tech/tags/html.md>), [html-elements](<https://devfeed.tech/tags/html-elements.md>), [w3c](<https://devfeed.tech/tags/w3c.md>)

## AI overview

This tutorial explains that aria-label is not universally appropriate or consistently supported across HTML elements. It describes when to use aria-label, when aria-labelledby is preferable, and the element types where aria-label works consistently with assistive technologies.

## Source excerpt

Okay, you've learned about accessibility and that there is sometimes a need to make, for example, the link text more descriptive for screen reader users. You've learned about the aria-label-attribute, and its powers. It's the answer to everything! I'm afraid I have to say that it is not. It doesn't work with all HTML elements. In this blog post, I'll dig a bit deeper into the aria-label-attribute, and its usage and limitations, and options. What Is aria-label? So, let's first talk about the specification and where to use it. W3C Recommendation for Accessible Rich Internet Applications (WAI-ARIA)-document defines aria-label as "a string value that labels the current element." You can use it to provide a recognizable name of the object if there is no visible text on the screen that could be used as the label. If there was, aria-labelledby should be used. The most important thing, and the reason I'm writing this article, is that developers should use it only with the following elements: interactive elements (such as links, buttons, inputs et cetera) Elements that have a landmark role Elements that have an ARIA-widget role img or iframe-elements Source: Short note about aria-label, aria-labelledby and aria-describedby by Léonie Watson. aria-label on these elements works consistently with assistive technologies. The support is inconsistent if you use it with any other tag, such as div or span. More about that in Aria-label and non-supported elements. Let's look into each one of these elements a bit more. Interactive Elements Interactive elements are tags intended for user interaction. It means, for example, button, a (when href-attribute is present), input , details and others. The main idea is that users can interact with them. Elements with Landmark Role Elements can have landmark roles either implicitly or explicitly. Having an implicit role means that some of the HTML elements have roles set to them natively. The explicit role, on the other hand, is set with role-att