Aria-label

The aria-label is an HTML attribute that defines an accessible name for an interface element, intended for assistive technologies such as screen readers. It replaces or complements visible text when that text is missing or insufficient to understand the element's function. It is one of the core tools of the WAI-ARIA (Accessible Rich Internet Applications) specifications published by the W3C.

What is the aria-label attribute?

It is an attribute added directly to the HTML code of an interactive element, such as a button, link or form field. Its value is a text string describing the element's function or content, without ever appearing on screen. Only assistive technologies read it out, for example a screen reader announcing this label vocally to a visually impaired user.

How does the aria-label attribute work?

The browser builds, for each element, an accessible name from several possible sources: visible text content, an alt attribute, an aria-labelledby, or an aria-label. When an aria-label is present, it generally takes priority over visible text when determining this accessible name. A button containing only a cross icon can thus receive aria-label="Close window" so its purpose is understandable vocally.

What is the difference with aria-labelledby and the alt text?

The aria-label writes the accessible text directly into the attribute, while aria-labelledby points to the identifier of another element already visible on the page, which is preferable when that text already exists. The alt attribute only applies to images and describes their visual content. The choice between these three options depends on context: aria-label is best suited when no relevant visible text exists on the page.

What are the best practices for using it?

• Reserve aria-label for interactive elements that genuinely lack a visible label, such as icon buttons.
• Avoid using it to duplicate text that is already visible, which can create inconsistencies with automatic translation or voice recognition.
• Write short, precise and contextual text rather than a generic description.
• Never use it as a substitute for correct semantic HTML structure.

The aria-label is one of many levers of web accessibility, a topic Mazette.co integrates into its webdesign and product design projects.