Tabelas

Células de dados precisam de cabeçalhos

Regra: td-has-header
Gravidade: Crítico
Nível WCAG A

Por que isso importa

Numa tabela maior que três por três, uma célula lida isoladamente é um número sem significado. São os cabeçalhos que permitem anunciar “Receita, Berlim, 1,2 mi” quando o foco chega à célula.

Como corrigir

Dê à tabela uma linha ou coluna de cabeçalho usando <th>.
Acrescente scope="col" ou scope="row" para que a direção fique inequívoca.
Em tabelas irregulares, conecte as células explicitamente com headers e id.

Na marcação

Falha

<table>
  <tr><td>Berlin</td><td>1.2M</td></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 td-has-header (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.