# The “aria-label” 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-label-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-label` 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`, which is one of several roles that prohibit naming via `aria-label` or `aria-labelledby`. This restriction exists because screen readers are not expected to announce names for generic containers — adding `aria-label` to them creates an inconsistent and confusing experience for assistive technology users.

To fix this, you have two main options:

1. **Assign an explicit role** to the `span` that supports naming, such as `role="img"`, `role="group"`, `role="status"`, or any other role that allows `aria-label`.
2. **Use a different element** that already has a semantic role supporting `aria-label`, such as a `button`, `a`, `section`, or `nav`.

If the `span` is purely decorative or used for styling, consider using `aria-hidden="true"` instead and placing accessible text elsewhere.

## HTML Examples

### ❌ Invalid: `aria-label` on a plain `span`

```html
<span aria-label="Close">✕</span>
```

### ✅ Fixed: assign an appropriate role

```html
<span role="img" aria-label="Close">✕</span>
```

### ✅ Fixed: use a semantic element instead

```html
<button aria-label="Close">✕</button>
```

### ✅ Fixed: hide the decorative `span` and provide text another way

```html
<button>
  <span aria-hidden="true">✕</span>
  <span class="visually-hidden">Close</span>
</button>
```