# aria-label: How to Name Elements Correctly

Source: https://allyway.ai/glossary/aria-label

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](https://allyway.ai/glossary/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](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html) (Level A, [WCAG 2.2](https://allyway.ai/regulations/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.

> **Tip:** > **Visible words first**
> If a control shows text, the aria-label should start with those exact words ("Search products" for a button that says "Search"). W3C criterion 2.5.3 Label in Name requires the name to contain the visible text and recommends putting it first, so voice control users can say what they see.

## Examples

```html title="Example"
<!-- 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>
```

**Do:** Do

Use aria-label for [icon buttons](https://allyway.ai/glossary/icon-button), search fields without a visible label and to tell apart several [ARIA landmarks](https://allyway.ai/glossary/aria-landmarks) of the same kind. Describe the action ("Open menu"), not the icon ("Hamburger"). Hide the icon itself with `aria-hidden="true"`.

**Don't:** Don't

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

Q: What is the difference between aria-label and aria-labelledby?
A: 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.

Q: Does aria-label replace the visible text of a link?
A: 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.

Q: Is aria-label good for SEO?
A: No. aria-label is for assistive technology. Hidden keywords make the page harder to use and do not belong in it.

Q: Can I use aria-label on a div?
A: 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.

Q: How do I find icons without a name on my site?
A: The [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites) checks your homepage against WCAG 2.2 AA, including links and buttons without an accessible name.