Verificação HTML: Valor inválido "presentational" para o atributo "role" no elemento X.

Sobre este problema HTML

Este erro ocorre quando você usa role="presentational" num elemento HTML. Embora a intenção seja clara — você quer remover a semântica ARIA implícita do elemento — o valor presentational não existe na especificação WAI-ARIA. É um erro comum ou um equívoco. As duas roles válidas para este propósito são presentation e none, que são sinónimos entre si.

Quando você aplica role="presentation" ou role="none" a um elemento, está a dizer às tecnologias assistivas (como leitores de ecrã) para ignorarem o significado semântico implícito do elemento. Por exemplo, uma <table> usada puramente para layout não tem semântica de dados tabulares, então role="presentation" remove a semântica relacionada com tabela da árvore de acessibilidade. No entanto, o conteúdo dentro do elemento permanece acessível — apenas a semântica do contentor (e em alguns casos, os seus descendentes associados obrigatórios) é removida.

Isto é importante por várias razões:

Conformidade com normas: Usar um valor de role inválido significa que o atributo é essencialmente ignorado pelos navegadores e tecnologias assistivas, então a semântica do elemento não é removida como pretendido.
Acessibilidade: Se um leitor de ecrã encontrar uma role desconhecida, pode recorrer à semântica padrão do elemento, levando a uma experiência confusa. Por exemplo, uma tabela de layout sem uma role presentation válida pode ainda ser anunciada como uma tabela de dados.
Consistência do navegador: Valores ARIA inválidos podem levar a comportamento imprevisível em diferentes navegadores e tecnologias assistivas.

Para corrigir isto, simplesmente substitua presentational por presentation ou none.

Exemplos

❌ Incorreto: usar a role inválida `presentational`

<table role="presentational">
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
  </tr>
</table>

✅ Correto: usar `presentation`

<table role="presentation">
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
  </tr>
</table>

✅ Correto: usar `none` (sinónimo de `presentation`)

<table role="none">
  <tr>
    <td>Coluna 1</td>
    <td>Coluna 2</td>
  </tr>
</table>

Outros elementos onde isto se aplica

A role presentation / none pode ser usada em vários elementos, não apenas tabelas. Aqui está outro exemplo comum com uma imagem usada puramente para decoração:

<!-- ❌ Incorreto -->

<img src="divider.png" alt="" role="presentational">

<!-- ✅ Correto -->

<img src="divider.png" alt="" role="presentation">

Quando usar `presentation` vs. `none`

Tanto presentation como none são funcionalmente idênticas. A role none foi introduzida mais tarde como um nome mais claro, já que presentation pode ser confundida com apresentação visual. Para máxima compatibilidade com navegadores, alguns programadores usam ambas:

<table role="none presentation">
  <tr>
    <td>Conteúdo de layout</td>
  </tr>
</table>

Este padrão de fallback garante que tecnologias assistivas mais antigas que não reconhecem none ainda assim capturem presentation. No entanto, na maioria dos ambientes modernos, qualquer um dos valores sozinho é suficiente.