Valor inválido “icon” para atributo “role” no elemento “span”.

A especificação WAI-ARIA define um conjunto específico de valores de role que as tecnologias assistivas como leitores de ecrã compreendem. Estes incluem roles como button, checkbox, alert, dialog, img, navigation, banner, e muitos outros. O valor "icon" não está entre eles. Quando um navegador ou tecnologia assistiva encontra um role não reconhecido, não consegue determinar o propósito do elemento, o que derrota o objetivo de usar ARIA em primeiro lugar.

Este é principalmente um problema de acessibilidade. Os leitores de ecrã dependem de roles ARIA válidos para comunicar a natureza dos elementos aos utilizadores. Um role inválido como "icon" é ignorado ou causa comportamento imprevisível, deixando os utilizadores de tecnologias assistivas sem o contexto de que necessitam. É também uma questão de conformidade com os padrões — o validador W3C sinaliza isto porque a especificação HTML requer que os valores de role correspondam aos roles definidos na especificação ARIA.

A correção depende do propósito do elemento:

• Ícones decorativos (que não transmitem informação): Remova completamente o atributo role, ou use aria-hidden="true" para ocultar explicitamente o elemento da árvore de acessibilidade.
• Ícones significativos (que transmitem informação visualmente): Use role="img" juntamente com um aria-label para fornecer uma alternativa de texto.
• Ícones dentro de elementos interativos: Oculte o ícone com aria-hidden="true" e garanta que o elemento interativo pai tem um nome acessível através de texto visível ou um aria-label.

Exemplos

❌ Inválido: Usando o role "icon" inexistente

<span class="icon" role="icon"></span>

Isto desencadeia o erro de validação porque "icon" não é um role ARIA válido.

✅ Corrigido: Ícone decorativo sem role

Se o ícone é puramente decorativo e não transmite qualquer significado (por exemplo, está junto a texto que já descreve a ação), simplesmente remova o atributo role. Adicionar aria-hidden="true" garante que os leitores de ecrã o ignoram completamente.

<span class="icon" aria-hidden="true"></span>

✅ Corrigido: Ícone significativo usando role="img"

Se o ícone transmite informação significativa que não está disponível através do texto envolvente, use role="img" e forneça um aria-label descritivo:

<span class="icon-warning" role="img" aria-label="Aviso"></span>

Isto diz às tecnologias assistivas que o elemento representa uma imagem e dá-lhe um nome acessível de “Aviso.”

✅ Corrigido: Ícone dentro de um botão

Quando um ícone é colocado dentro de um elemento interativo como um botão, oculte o ícone da árvore de acessibilidade e deixe o texto ou rótulo do botão fornecer o significado:

<button>
  <span class="icon-save" aria-hidden="true"></span>
  Guardar
</button>

Se o botão não tem texto visível (um botão apenas com ícone), forneça um aria-label no próprio botão:

<button aria-label="Guardar">
  <span class="icon-save" aria-hidden="true"></span>
</button>

✅ Corrigido: Ícone usando um elemento <img>

Se está a usar um ficheiro de imagem real para o ícone, considere usar um elemento <img> semântico, que tem um role img incorporado:

<img src="icon-alert.svg" alt="Alerta" class="icon">

Para ícones de imagem decorativos, use um atributo alt vazio:

<img src="icon-decorative.svg" alt="" class="icon">

Saiba mais:

MDN Reference

MDN: WAI-ARIA Roles

→