aria-label: How to Name Elements Correctly
Also called: ARIA label attribute, aria-label attribute, Invisible label
Definition
aria-label is an ARIA attribute that sets the accessible name of an element as a text string. Screen readers announce this name instead of the element's content, so it is used mainly for controls without visible text, such as icon buttons.
aria-label is an HTML attribute from the ARIA specification that gives an element an accessible name as plain text. A screen reader announces it, for example "Close dialog, button" for an "×" icon. It is the quickest fix for controls that have no visible text – and one of the most misused attributes when visible text already exists.
What it means
WCAG 4.1.2 Name, Role, Value (Level A, WCAG 2.2) requires a programmatically determinable name for every user interface component. W3C lists technique ARIA14, "Using aria-label to provide an accessible name where a visible label cannot be used", as a sufficient way to meet it. The wording matters: aria-label is meant for cases where a visible label is not possible.
Three things to know about the attribute:
| Fact | Consequence |
|---|---|
| It overrides the element's own text | <a aria-label="Read more">Shipping terms</a> is announced as "Read more" – the visible text is ignored |
aria-labelledby wins over it |
If both are set, the referenced text is the name |
| It is invisible | Sighted users never see it, so mistakes go unnoticed |
It works on interactive elements (links, buttons, form fields), on landmarks such as <nav> and on role="img". On a plain div or span without a role, ARIA does not allow naming – many screen readers ignore the label there.
Examples
<!-- Good: icon-only button -->
<button aria-label="Close dialog">
<svg aria-hidden="true">…</svg>
</button>
<!-- Good: two navigations told apart -->
<nav aria-label="Main">…</nav>
<nav aria-label="Footer">…</nav>
<!-- Bad: label contradicts visible text -->
<a href="/shipping" aria-label="Click here">Shipping terms</a>Use aria-label for icon buttons, search fields without a visible label and to tell apart several ARIA landmarks of the same kind. Describe the action ("Open menu"), not the icon ("Hamburger"). Hide the icon itself with aria-hidden="true".
Put aria-label on elements that already have good visible text, use it on a plain div or span, stuff it with keywords for SEO or use it instead of a real <label> on form fields that have room for one.
How to check aria-label
Questions
What is the difference between aria-label and aria-labelledby?
aria-label holds the name as text in the attribute. aria-labelledby points to the id of another element whose visible text becomes the name. Use aria-labelledby when the text is already on the page.
Does aria-label replace the visible text of a link?
Yes. For assistive technology, aria-label overrides the element's content. That is why a label that differs from the visible text confuses screen reader and voice control users.
Is aria-label good for SEO?
No. aria-label is for assistive technology. Hidden keywords make the page harder to use and do not belong in it.
Can I use aria-label on a div?
Only if the div has a role that allows a name, such as role="region" or role="img". On a generic div or span without a role, ARIA prohibits naming and many screen readers ignore it.
How do I find icons without a name on my site?
The free WCAG scanner checks your homepage against WCAG 2.2 AA, including links and buttons without an accessible name.
Related terms
Accessible Name: What It Is and How It Is Computed
The accessible name is the text that browsers pass to assistive technology to identify an element – for example the words a screen reader announces for a button, link or form field. WCAG 4.1.2 requires a programmatically determinable name for every user interface component.
Read definition: Accessible Name: What It Is and How It Is ComputedARIA: Roles, States and Properties Explained
ARIA (WAI-ARIA, Accessible Rich Internet Applications) is a W3C specification of HTML attributes – roles, states and properties – that tell assistive technology what a custom element is, what it is called and what state it is in.
Read definition: ARIA: Roles, States and Properties ExplainedIcon Button: How to Give It an Accessible Name
An icon button is a button that shows only a symbol – a magnifier, a cross, three lines – and no visible text. To be accessible it needs an accessible name in code that tells assistive technology what the button does.
Read definition: Icon Button: How to Give It an Accessible NameEmpty Button: What the Error Means and How to Fix It
An empty button is a button element with no accessible name – no text, no aria-label and no alt text on an image inside it. Screen readers announce only that it is a button, not what it does.
Read definition: Empty Button: What the Error Means and How to Fix It