What is aria-label?

The aria-label attribute is part of WAI-ARIA, the Web Accessibility Initiative's Accessible Rich Internet Applications spec. It enables you to set an accessible name for an HTML element directly in the markup, without adding any visible text to the page.

Screen readers announce the aria-label attribute's value instead of an element's visible text or content, making it useful for buttons, icons, and other interactive elements that don't have a visible label.

At a glance

Why is aria-label important when it comes to accessibility?

Every interactive element on a page needs an accessible name so assistive technologies can tell users what it does. Sighted users get this information from visible text, icons, images, and layout. Screen reader users get it from the accessibility tree: a structured representation of the page that browsers build for assistive technologies to read.

When an element's visible label is missing, unclear, or purely decorative, the aria-label attribute makes it understandable to users of assistive technology.

A search icon with no text next to it means nothing to a screen reader unless something in the markup describes its function. Without an aria-label attribute or another way to provide labels, screen reader users hear nothing more than "button" and have to guess what the button actually does.

When it comes to form controls, icon-only buttons, and navigation menus, where visual design often favors compact icons over descriptive text, aria-label attributes are especially necessary, having a considerable impact on how usable a site is for screen reader users.

Using the aria-label attribute, you can improve web accessibility without changing a page's visual design. You can describe an element's purpose for assistive technologies while leaving the layout, spacing, text, and icon choices exactly as a design team intended.

Unsurprisingly, it’s one of the most commonly used ARIA attributes.

How does aria-label work?

An aria-label attribute overrides an element's default accessible name. If a <button> already has visible text content, that text is normally its accessible name. Add an aria-label attribute, and the value you provide takes over instead, keeping the original text content visible on the page.

This override only affects what assistive technologies announce. It changes nothing about how the element looks, so aria-label text never appears visually and never gets picked up by browser text search or copy-paste.

The browser follows a set order when it works out an element's accessible name: aria-labelledby takes priority first, aria-label comes next, then any native HTML labeling method such as a <label> element or alt attribute, and the title attribute is used last as a fallback.

Adding an aria-label attribute to an element that already has a proper native label, such as a form input already tied to a <label>, simply replaces a label that was already working.

The aria-label attribute can be added to most HTML elements, though it only has an effect on elements with a role that supports an accessible name, such as buttons, links, and form inputs.

Adding it to a plain <div> or <span> with no ARIA role attached often does nothing, since many assistive technologies ignore the accessible name of elements that don’t have a meaningful role in the accessibility tree.

An aria-label example

A common use case is an icon-only button, such as a search icon with no visible label text:

<button aria-label="Search">
  <svg aria-hidden="true" focusable="false">
    <!-- magnifying glass icon -->
  </svg>
</button>

Here, the SVG icon is marked aria-hidden="true" so it's invisible to the accessibility tree, and the aria-label attribute on the button supplies the accessible name to assistive technology.

A screen reader announces this as "Search, button," even though no text label is visible on the page. Without the aria-label attribute, the same element would announce only as "button," leaving its function undefined for anyone who can't see the search icon.

aria-label vs. alt text

Both the aria-label and alt attributes provide a text alternative to assistive technologies, but they aren't interchangeable.

As a rule, use the alt attribute for images and use an aria-labelattribute for interactive elements and icons that native HTML has no built-in way to label.

Common mistakes or misconceptions

• Labeling elements with no role. Adding aria-label to a <div> or <span> without a role attached is unnecessary, as the element has no accessible name to begin with, at least as far as most assistive technologies are concerned.
• Overriding a working visible label. If an element's visible text already describes its function clearly, adding an aria-label attribute on top will just duplicate or contradict it. You also risk creating a mismatch that trips up voice control users, who typically say the visible text label to activate an element, not any hidden aria-label text.
• Using aria-label as a styling shortcut. Don’t use the aria-label attribute to hide a label visually, as you will make your web page less accessible. Doing this still leaves out users with cognitive disabilities and voice control users who rely on visible label text.
• Keep the label visible wherever possible. If it genuinely can't be shown, a visually hidden native <label> is more robust than an aria-label.
• Forgetting translation and localization. Because aria-label text isn't visible content, some automated translation and browser localization tools skip over it, leaving screen reader users on translated sites with an accessible name in the wrong language. Use aria-label sparingly, and check translated pages specifically for this.