O atributo “aria-label” não deve ser especificado em nenhum elemento “span” a menos que o elemento tenha um valor de “role” diferente de “caption”, “code”, “deletion”, “emphasis”, “generic”, “insertion”, “paragraph”, “presentation”, “strong”, “subscript”, ou “superscript”.

Um elemento span tem um role ARIA implícito de generic, e o atributo aria-label não é permitido em elementos com esse role.

O elemento span é um contentor inline genérico sem significado semântico. O seu role ARIA padrão é generic, que é um dos vários roles que proíbem a nomeação via aria-label ou aria-labelledby. Esta restrição existe porque não se espera que os leitores de ecrã anunciem nomes para contentores genéricos — adicionar aria-label a estes cria uma experiência inconsistente e confusa para utilizadores de tecnologia assistiva.

Para corrigir isto, você tem duas opções principais:

1. Atribuir um role explícito ao span que suporte nomeação, como role="img", role="group", role="status", ou qualquer outro role que permita aria-label.
2. Usar um elemento diferente que já tenha um role semântico que suporte aria-label, como um button, a, section, ou nav.

Se o span é puramente decorativo ou usado para estilo, considere usar aria-hidden="true" em vez disso e colocar texto acessível noutro local.

Exemplos HTML

❌ Inválido: aria-label num span simples

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

✅ Corrigido: atribuir um role apropriado

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

✅ Corrigido: usar um elemento semântico em vez disso

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

✅ Corrigido: ocultar o span decorativo e fornecer texto de outra forma

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

Saiba mais:

MDN Reference

MDN Web Docs: aria-label

→

MDN Reference

MDN Web Docs: ARIA roles

→

MDN Reference

MDN Web Docs: span element

→