The HTML aria-label attribute
The aria-label attribute gives an element an accessible name from a string of text, for use by assistive technology when there is no visible label — for example an icon-only button. Value: any string.
Overview
The aria-label attribute provides an accessible name for an element using a string of text.
It is one of ARIA's naming and description properties, which give an element an accessible name or description for assistive technology. Whenever you can, associate visible text — a <label>, or aria-labelledby pointing at on-screen text — so sighted and screen-reader users get the same information, rather than hiding it in an invisible string.
Like all ARIA, aria-label changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<button aria-label="Close dialog">×</button>Values
| Value |
|---|
| A string (the accessible name). |
Example
<button aria-label="Search">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor"/><line x1="21" y1="21" x2="16.5" y2="16.5" stroke="currentColor"/></svg>
</button>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Prefer referencing visible text (a <label> or aria-labelledby) over an invisible string where possible.
- Use aria-label only when there is no suitable on-screen text to reference.
- Keep the name concise and meaningful — it is exactly what a screen reader announces.