The “aria-labelledby” attribute must not be specified on any “span” element unless the element has a “role” value other than “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, or “superscript”.

A span element has an implicit ARIA role of generic, and the aria-labelledby attribute is not allowed on elements with that role.

The span element is a generic inline container with no semantic meaning. Its default ARIA role is generic, and the ARIA specification explicitly prohibits naming generic elements with aria-labelledby (or aria-label). This restriction exists because accessible names on generic containers create confusing experiences for assistive technology users — screen readers wouldn’t know what kind of thing is being labeled.

To fix this, you have two main options:

1. Add a meaningful role to the span that supports aria-labelledby, such as role="group", role="region", or any other role that accepts a label.
2. Use a more semantic element that already has an appropriate role, like a section, nav, or div with an explicit role.

If the span doesn’t truly need a label, simply remove the aria-labelledby attribute.

HTML Examples

❌ Invalid: aria-labelledby on a plain span

<span id="label">Settings</span>
<span aria-labelledby="label">
  <input type="checkbox" id="opt1">
  <label for="opt1">Enable notifications</label>
</span>

✅ Fix: Add an appropriate role

<span id="label">Settings</span>
<span role="group" aria-labelledby="label">
  <input type="checkbox" id="opt1">
  <label for="opt1">Enable notifications</label>
</span>

✅ Fix: Use a semantic element instead

<span id="label">Settings</span>
<fieldset aria-labelledby="label">
  <input type="checkbox" id="opt1">
  <label for="opt1">Enable notifications</label>
</fieldset>

Learn more:

MDN Reference

ARIA: Using aria-labelledby

→

MDN Reference

HTML span element

→

MDN Reference

Using ARIA: Roles, states, and properties

→