Tabelas de Dados — Guia de Implementação

WCAG A

Tabela de dados sem cabeçalhos (<th>)

Tabelas de dados precisam de cabeçalhos (<th>) com scope correto para que leitores de tela anunciem o contexto de cada célula. Uma tabela de layout nunca deve usar <th>.

Impacto por tipo de deficiência

Cegueira

Sem cabeçalhos, o leitor de tela navela célula por célula sem contexto — "João, 35, São Paulo" sem saber que são Nome, Idade e Cidade.

Incorreto — cria barreiras de acessibilidade

<!-- ❌ Tabela sem cabeçalhos nem caption -->
<table>
  <tr>
    <td>Nome</td><td>Cargo</td><td>Ramal</td>
  </tr>
  <tr>
    <td>Maria</td><td>Analista</td><td>1234</td>
  </tr>
</table>

Correto — acessível para todos os usuários

<!-- ✓ Tabela com caption, th e scope -->
<table>
  <caption>Lista de servidores — Seção de TI</caption>
  <thead>
    <tr>
      <th scope="col">Nome</th>
      <th scope="col">Cargo</th>
      <th scope="col">Ramal</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Maria Silva</td>
      <td>Analista de Sistemas</td>
      <td>1234</td>
    </tr>
  </tbody>
</table>

<!-- Para tabelas complexas: headers + id -->
<th id="nome-col" scope="col">Nome</th>
<td headers="nome-col">João</td>

Técnicas ARIA relevantes

aria-labelaria-describedbyrole="table"