# 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”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/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
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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`

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

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

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