Verificação HTML: Elemento "span" está em falta com um ou mais dos seguintes atributos: "aria-expanded", "aria-valuemax", "aria-valuemin", "aria-valuenow", "role".

Sobre este problema HTML

O elemento span é um contentor genérico inline sem semântica inerente. Por si só, não transmite qualquer significado para tecnologias assistivas. Quando adiciona atributos ARIA como aria-expanded ou aria-valuenow a um span, está a sinalizar que o elemento representa um widget interativo — mas o validador (e tecnologias assistivas) precisam de mais contexto. Muitos atributos ARIA só são permitidos em elementos que têm certas funções, e algumas funções requerem um conjunto específico de atributos para funcionar corretamente.

Por exemplo, aria-valuenow é projetado para widgets de intervalo como sliders e barras de progresso. De acordo com a especificação WAI-ARIA, se usar aria-valuenow, o elemento deve também ter aria-valuemin, aria-valuemax, e uma função como progressbar, slider, meter, ou scrollbar. Similarmente, aria-expanded é destinado a elementos com funções como button, combobox, link, ou treeitem. Colocar estes atributos num span básico sem o role correspondente viola as regras ARIA e desencadeia este erro de validação.

Isto é importante por várias razões:

Acessibilidade: Os leitores de ecrã dependem do role para determinar como apresentar um widget aos utilizadores. Sem ele, os atributos de estado ARIA tornam-se sem significado ou confusos.
Conformidade com padrões: A especificação HTML integra regras ARIA, e os validadores garantem que os atributos ARIA são usados em combinações válidas.
Comportamento do browser: Os browsers usam o role para construir a árvore de acessibilidade. Um span com aria-valuenow mas sem role pode ser ignorado ou mal representado para utilizadores de tecnologias assistivas.

Como corrigir

Adicione o role correto ao span, juntamente com todos os atributos obrigatórios para essa função.
Use um elemento HTML semântico em vez de um span quando um existir (por exemplo, <progress> ou <button>).
Remova atributos ARIA desnecessários se o span for puramente decorativo ou se os atributos foram adicionados por engano.

Se o seu span for puramente visual (por exemplo, um asterisco decorativo para campos obrigatórios), não adicione atributos ARIA relacionados com estado. Em vez disso, use aria-hidden="true" para escondê-lo de tecnologias assistivas, e coloque atributos ARIA no controlo de formulário real.

Exemplos

Incorreto: `aria-expanded` num `span` sem uma função

<span aria-expanded="false">Menu</span>

O validador reporta o role em falta porque aria-expanded não é válido num span genérico.

Correto: Adicione um `role` (ou use um `button`)

<span role="button" tabindex="0" aria-expanded="false">Menu</span>

Ou, ainda melhor, use um elemento button verdadeiro:

<button aria-expanded="false">Menu</button>

Incorreto: `aria-valuenow` sem o conjunto completo de atributos de intervalo e função

<span class="progress-indicator" aria-valuenow="50">50%</span>

Correto: Inclua o `role` e todos os atributos de intervalo obrigatórios

<span role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  50%
</span>

Ou use o elemento nativo <progress>, que tem semântica incorporada:

<progress value="50" max="100">50%</progress>

Incorreto: `aria-required` num span decorativo

<label for="email">
  Email
  <span class="required" aria-required="true">*</span>
</label>
<input id="email" name="email" type="email">

O atributo aria-required pertence ao controlo de formulário, não ao asterisco decorativo.

Correto: Esconda o indicador decorativo e marque o input como obrigatório

<label for="email">
  Email
  <span class="required" aria-hidden="true">*</span>
</label>
<input id="email" name="email" type="email" aria-required="true">

Se também quiser que os leitores de ecrã anunciem “obrigatório” como parte do texto da etiqueta, adicione texto visualmente escondido:

<label for="email">
  Email
  <span aria-hidden="true">*</span>
  <span class="visually-hidden">obrigatório</span>
</label>
<input id="email" name="email" type="email" required>

A conclusão principal: sempre que usar atributos de estado ou propriedade ARIA num span, certifique-se de que o elemento também tem o role correto e todos os atributos companheiros obrigatórios para essa função. Quando um elemento HTML nativo já fornece a semântica de que precisa — como <button>, <progress>, ou <meter> — prefira-o em vez de um span com ARIA, pois os elementos nativos são mais robustos e requerem menos marcação adicional.