← Todas as regras

Tabelas

Use uma legenda de tabela de verdade

• Regra: table-fake-caption
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Uma primeira linha estilizada para parecer título é lida como célula de dados. A tabela fica sem legenda, e a linha corrompe a estrutura de colunas para quem lê célula a célula.

Como corrigir

1. Leve o texto para um elemento <caption> como primeiro filho da <table>.
2. Estilize a legenda em CSS se ela precisar parecer com a linha antiga.
3. Remova depois a linha mesclada para que a contagem de colunas fique correta.

Na marcação

<table>
  <tr><td colspan="3"><strong>Q3 revenue</strong></td></tr>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></tr>
</table>

<table>
  <caption>Q3 revenue</caption>
  <tr><th>Region</th><th>Q3</th><th>Q4</th></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 table-fake-caption (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.