HTML: aria-label
The aria-label attribute gives an element a name for assistive technology when a suitable visible name is not available.
What you will learn
- How to label an icon-only control
- Why visible text or a label element should usually come first
- How to avoid hiding useful information from sighted users
Icon button example
<button type="button" aria-label="Close dialog">
×
</button>A screen reader can announce the button as “Close dialog” even though the visible control only contains an icon.
Prefer visible names when possible
<button type="button">Save changes</button>Visible text helps everyone, including people who do not use assistive technology. For form inputs, use a visible label element when possible.
Common mistakes
- Do not use
aria-labelto hide a missing visible label when users need to see the instruction. - Keep the accessible name concise and describe the action, not only the icon shape.
- Do not add ARIA to an element when a native HTML element already provides the needed semantics.