Elemento “td” está a faltar um ou mais dos seguintes atributos: “aria-checked”, “role”.

O atributo aria-checked comunica o estado selecionado de um widget interativo às tecnologias de apoio. De acordo com a especificação WAI-ARIA, este atributo é permitido apenas em elementos que tenham um papel que suporte o estado “checked” — como checkbox, switch, radio, menuitemcheckbox, ou menuitemradio. Um elemento <td> simples tem um papel implícito de cell (ou gridcell quando dentro de uma tabela role="grid"), nenhum dos quais suporta aria-checked. Quando o validador encontra aria-checked numa <td> sem um role compatível, marca o elemento como inválido.

Isto importa por várias razões:

• Acessibilidade: Leitores de ecrã e outras tecnologias de apoio dependem da relação entre role e os atributos de estado ARIA. Um aria-checked num elemento sem um papel selecionável reconhecido cria uma experiência confusa ou quebrada — os utilizadores podem não compreender que a célula deveria ser interativa.
• Conformidade com normas: A especificação ARIA em HTML define regras rigorosas sobre quais atributos são permitidos em quais papéis. Violar estas regras significa que o seu HTML é tecnicamente inválido.
• Comportamento do navegador: Os navegadores podem ignorar completamente aria-checked quando é usado num elemento sem um papel válido, tornando o atributo inútil.

Como corrigir

Você tem duas abordagens principais dependendo do que a sua <td> pretende fazer:

1. Adicione um atributo role apropriado. Se a célula da tabela genuinamente representa um controlo selecionável (por exemplo, numa grelha de dados interativa), adicione role="checkbox", role="switch", ou outro papel selecionável apropriado à <td>, juntamente com tabindex para acessibilidade de teclado.

2. Remova aria-checked e use um controlo real. Se a célula simplesmente contém uma caixa de seleção ou interruptor, coloque um <input type="checkbox"> real dentro da <td> e remova os atributos ARIA da própria célula. Controlos HTML nativos já comunicam o seu estado às tecnologias de apoio sem ARIA adicional.

Exemplos

❌ Incorreto: aria-checked sem um role

<table>
  <tr>
    <td aria-checked="true">Selecionado</td>
    <td>Item A</td>
  </tr>
</table>

Isto desencadeia o erro porque <td> tem o papel implícito de cell, que não suporta aria-checked.

✅ Correção: Adicione um role compatível à <td>

<table role="grid">
  <tr>
    <td role="checkbox" aria-checked="true" tabindex="0">Selecionado</td>
    <td>Item A</td>
  </tr>
</table>

Aqui a <td> tem explicitamente role="checkbox", que suporta aria-checked. O tabindex="0" torna-a focalizável por teclado, e role="grid" na tabela sinaliza que as células podem ser interativas.

✅ Correção: Use uma caixa de seleção nativa dentro da <td>

<table>
  <tr>
    <td>
      <label>
        <input type="checkbox" checked>
        Selecionado
      </label>
    </td>
    <td>Item A</td>
  </tr>
</table>

Esta abordagem é frequentemente a melhor opção. O <input type="checkbox"> nativo já comunica o seu estado selecionado às tecnologias de apoio, e não são necessários atributos ARIA na <td>.

❌ Incorreto: role e aria-checked incompatíveis

<table>
  <tr>
    <td role="button" aria-checked="false">Alternar</td>
    <td>Item B</td>
  </tr>
</table>

O papel button não suporta aria-checked. Isto desencadearia um erro de validação diferente mas relacionado.

✅ Correção: Use um papel que suporte aria-checked

<table role="grid">
  <tr>
    <td role="switch" aria-checked="false" tabindex="0">Alternar</td>
    <td>Item B</td>
  </tr>
</table>

O papel switch suporta aria-checked e é apropriado para controlos de estilo interruptor.

Saiba mais:

MDN Reference

MDN: td

→

MDN Reference

MDN: aria-checked

→

MDN Reference

MDN: role

→