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.