El atributo “aria-label” no debe especificarse en ningún elemento “span” a menos que el elemento tenga un valor de “role” distinto a “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript” o “superscript”.

Un elemento span tiene un role ARIA implícito de generic, y el atributo aria-label no está permitido en elementos con ese role.

El elemento span es un contenedor genérico en línea sin significado semántico. Su role ARIA por defecto es generic, que es uno de varios roles que prohíben el nombrado mediante aria-label o aria-labelledby. Esta restricción existe porque no se espera que los lectores de pantalla anuncien nombres para contenedores genéricos — agregar aria-label a estos crea una experiencia inconsistente y confusa para los usuarios de tecnología asistiva.

Para solucionar esto, tienes dos opciones principales:

1. Asignar un role explícito al span que soporte el nombrado, como role="img", role="group", role="status", o cualquier otro role que permita aria-label.
2. Usar un elemento diferente que ya tenga un role semántico que soporte aria-label, como button, a, section o nav.

Si el span es puramente decorativo o se usa para estilo, considera usar aria-hidden="true" en su lugar y colocar el texto accesible en otro lugar.

Ejemplos HTML

❌ Inválido: aria-label en un span simple

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

✅ Corregido: asignar un role apropiado

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

✅ Corregido: usar un elemento semántico en su lugar

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

✅ Corregido: ocultar el span decorativo y proporcionar texto de otra manera

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

Más información:

MDN Reference

MDN Web Docs: aria-label

→

MDN Reference

MDN Web Docs: ARIA roles

→

MDN Reference

MDN Web Docs: span element

→