# Possible misuse of “aria-label”. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)

> Canonical HTML version: https://rocketvalidator.com/html-validation/possible-misuse-of-aria-label-if-you-disagree-with-this-warning-file-an-issue-report-or-send-e-mail-to-www-validator-w3-org
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-label` attribute defines an accessible name for an element, providing a text label that assistive technologies (like screen readers) can announce to users. It's especially useful when there's no visible text label on screen, such as for icon buttons or navigation landmarks. However, `aria-label` doesn't work on every HTML element — it only has an effect on elements that have roles which support name from author.

According to the ARIA specification, `aria-label` is designed to work with interactive elements (like `<button>`, `<a>` with `href`, `<input>`), landmark and structural roles (like `<nav>`, `<section>`, `<form>`), images (`<img>`), and elements with explicit widget or landmark roles. When applied to generic elements that have no role (or only the `generic` implicit role), such as `<div>` or `<span>`, the attribute is effectively ignored by assistive technologies. This means users of screen readers won't hear the label, defeating its purpose entirely.

This matters for several reasons:

- **Accessibility**: Developers may believe they've provided an accessible label when they haven't. Users relying on screen readers will miss the information entirely.
- **Standards compliance**: The ARIA in HTML specification explicitly prohibits `aria-label` on elements where it has no effect, and the W3C validator flags this as a warning.
- **Maintainability**: Meaningless attributes add noise to the codebase and can mislead future developers about the element's purpose.

To fix this warning, either move the `aria-label` to an appropriate element, add an explicit `role` attribute that supports naming, use `aria-label` on a different wrapping element that supports it, or replace the approach with visible text or a `visually-hidden` CSS class.

## Examples

### Incorrect: `aria-label` on a `<div>` with no role

A plain `<div>` has the implicit `generic` role, which does not support naming. The `aria-label` will be ignored.

```html
<div aria-label="User profile section">
  <img src="avatar.jpg" alt="User avatar">
  <p>Jane Doe</p>
</div>
```

### Correct: Use a landmark element or add an appropriate role

Wrapping the content in a `<section>` element gives it the `region` landmark role (when labeled), making `aria-label` valid and meaningful:

```html
<section aria-label="User profile section">
  <img src="avatar.jpg" alt="User avatar">
  <p>Jane Doe</p>
</section>
```

Alternatively, add an explicit role to the `<div>`:

```html
<div role="region" aria-label="User profile section">
  <img src="avatar.jpg" alt="User avatar">
  <p>Jane Doe</p>
</div>
```

### Incorrect: `aria-label` on a `<span>`

```html
<span aria-label="Warning">⚠️</span>
```

The `<span>` has the `generic` role and does not support `aria-label`.

### Correct: Use an appropriate role or element

```html
<span role="img" aria-label="Warning">⚠️</span>
```

### Incorrect: `aria-label` on a `<p>` element

```html
<p aria-label="Important note">Please read the terms carefully.</p>
```

The `<p>` element has the `paragraph` role, which does not support naming via `aria-label`.

### Correct: Use visible text or restructure

If you need to provide additional context, consider restructuring:

```html
<section aria-label="Important note">
  <p>Please read the terms carefully.</p>
</section>
```

Or simply ensure the visible text is sufficiently descriptive, removing the unnecessary `aria-label`:

```html
<p><strong>Important note:</strong> Please read the terms carefully.</p>
```

### Common elements where `aria-label` works correctly

```html
<!-- Interactive elements -->
<button aria-label="Close dialog">✕</button>
<a href="/home" aria-label="Go to homepage">🏠</a>
<input type="search" aria-label="Search the site">

<!-- Landmark elements -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
  </ul>
</nav>

<form aria-label="Newsletter signup">
  <input type="email" aria-label="Email address">
  <button>Subscribe</button>
</form>

<!-- Images -->
<img src="chart.png" aria-label="Sales data for Q4 2024">
```

### Quick reference: elements that do **not** support `aria-label`

Without an explicit role, `aria-label` will be flagged on these common elements: `<div>`, `<span>`, `<p>`, `<b>`, `<i>`, `<em>`, `<strong>`, `<small>`, `<code>`, `<pre>`, `<blockquote>`, `<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`, `<table>`, `<thead>`, `<tbody>`, and `<tfoot>`, among others. If you need `aria-label` on one of these, consider whether a more semantic element or an explicit ARIA role is the right solution first.