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

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.

<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:

<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>:

<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>

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

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

Correct: Use an appropriate role or element

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

Incorrect: aria-label on a <p> element

<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:

<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:

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

Common elements where aria-label works correctly

<!-- 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.

Learn more:

www.tpgi.com

TPGI: Short note on aria-label, aria-labelledby and aria-describedby

→

W3C Reference

W3C ARIA 1.2: aria-label property

→

W3C Reference

W3C: Practical Support - aria-label, aria-labelledby and aria-describedby

→