aria-label

`aria-label` is a WAI-ARIA attribute that assigns a text string as the accessible name of an element. The accessible name is what screen readers announce when a user navigates to an element. While most elements get their accessible name from visible content, such as the text inside a button or the label associated with an input, `aria-label` provides a way to define that name when visible text is absent or inadequate. The attribute accepts a plain text string value. For example, `aria-label="Search"` on a magnifying glass icon button tells screen readers to announce "Search button" even though no visible text exists on the button. The label is invisible to sighted users but fully available to assistive technologies. `aria-label` is one of several mechanisms for providing accessible names. Others include the `<label>` element, `aria-labelledby`, and the element's own text content. The accessible name computation algorithm in the ARIA specification defines the priority order when multiple naming mechanisms are present.

Every interactive element on a web page needs an accessible name. Without one, screen reader users hear only the element's role, such as "button" or "link," with no indication of what the element does. This makes the interface nearly impossible to navigate. WCAG Success Criterion 4.1.2 (Name, Role, Value) requires that all user interface components have a name that can be programmatically determined. Success Criterion 1.1.1 (Non-text Content) requires text alternatives for non-text content. `aria-label` directly addresses both criteria for elements that lack visible text labels. Common scenarios where `aria-label` is necessary include icon-only buttons (hamburger menus, close buttons, social media links), multiple navigation landmarks that need differentiation (e.g., "Main navigation" versus "Footer navigation"), and search inputs that rely on placeholder text instead of a visible label.

Using `aria-label` is as simple as adding the attribute with a descriptive string: ```html <!-- Icon-only button --> <button aria-label="Close dialog"> <svg aria-hidden="true"><!-- X icon --></svg> </button> <!-- Distinguishing multiple nav landmarks --> <nav aria-label="Main navigation">...</nav> <nav aria-label="Footer navigation">...</nav> <!-- Search input without visible label --> <input type="search" aria-label="Search articles" placeholder="Search..."> ``` There are important rules and best practices to follow: **Use it on the right elements.** `aria-label` works on interactive elements (buttons, links, inputs) and elements with explicit ARIA roles. It does not work reliably on generic elements like `<div>` or `<span>` without roles. **Keep labels concise.** An `aria-label` should be brief and descriptive. "Close" is better than "Click this button to close the dialog window." Screen reader users expect short, action-oriented labels. **Don't duplicate visible text.** If a button already shows the text "Submit," adding `aria-label="Submit"` is redundant. Worse, if the `aria-label` says something different from the visible text, it creates a mismatch that confuses both screen reader users and voice control users who may speak the visible label. **Prefer visible labels.** The first rule of `aria-label` is to ask whether a visible label could work instead. Visible labels benefit everyone, including users with cognitive disabilities, users on small screens, and users who are simply unfamiliar with icon conventions. **Consider localization.** `aria-label` values are plain strings, not references to content in the DOM. This means they must be translated separately if your site supports multiple languages. Using `aria-labelledby` to reference visible translated text can be a more maintainable approach. **Interaction with aria-labelledby.** When both `aria-label` and `aria-labelledby` are present, `aria-labelledby` takes priority in the accessible name computation. This is defined by the accessible name and description computation specification.