Tabelas

Cabeçalhos precisam de células para descrever

Regra: th-has-data-cells
Gravidade: Grave
Nível WCAG A

Por que isso importa

Um <th> sem células de dados abaixo costuma indicar tabela usada para layout, ou linha de cabeçalho fora de sincronia com o corpo. Nos dois casos, a estrutura anunciada não corresponde ao que está na tela.

Como corrigir

Verifique se cada cabeçalho realmente tem células na sua coluna ou linha.
Use <td> nas células que não são cabeçalho.
Se a tabela existe só para layout, substitua-a por CSS Grid ou Flexbox.

Na marcação

Falha

<table>
  <tr><th>Region</th><th>Revenue</th></tr>
</table>

Passa

<table>
  <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

1.3.1 Informação e relações (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre th-has-data-cells (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.