HTML Academy · Aula

Acessibilidade de tabelas: scope, summary e caption

Adicionar legendas e atributos scope para dar suporte a leitores de ecrã.

Acessibilidade de tabelas: scope, summary e caption é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

Por que a acessibilidade das tabelas é importante

Usuários de leitores de tela navegam pelas tabelas de dados célula por célula — precisam do contexto do cabeçalho para cada célula de dados que leem.

Sem uma marcação adequada, os leitores de tela leem apenas valores brutos, sem o contexto da coluna ou da linha
Tabelas acessíveis tornam os dados compreensíveis para todos

O elemento caption

<caption> fornece um título visível para a tabela:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Estilizando caption

Estilize e posicione o caption com CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

O atributo scope em th

O atributo scope informa aos leitores de tela a quais células um cabeçalho se aplica:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Valores de scope

Valores do atributo scope:

col — o cabeçalho se aplica às células da mesma coluna
row — o cabeçalho se aplica às células da mesma linha
colgroup — o cabeçalho se aplica às células de um grupo de colunas
rowgroup — o cabeçalho se aplica às células de um grupo de linhas (tbody/thead)

scope para cabeçalhos complexos

Cabeçalhos expandidos usam scope colgroup ou rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

O atributo headers em td

Para tabelas muito complexas, use headers para vincular explicitamente as células aos seus cabeçalhos:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Quando usar scope ou headers

Orientações:

Tabelas simples com cabeçalhos em uma única linha → use scope="col" e scope="row"
Cabeçalhos complexos e expandidos → use o atributo headers com referências a ID
WCAG 1.3.1 exige que os cabeçalhos das tabelas sejam associados programaticamente às células de dados

aria-label em table

Quando um caption não for visualmente desejável, use aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Testando a acessibilidade das tabelas

Como verificar se sua tabela é acessível:

Use o painel Tabelas do leitor de tela (VoiceOver, NVDA)
Instale a extensão axe DevTools para o navegador
Execute pa11y CLI no URL da sua página
O W3C Markup Validator detecta a ausência de caption

Atributo summary (obsoleto)

O atributo summary era usado por leitores de tela em tabelas complexas — agora está obsoleto no HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Lista de verificação de tabelas acessíveis

Lista de verificação de acessibilidade para tabelas de dados:

Use <caption> para identificar a tabela
Use <th> para todas as células de cabeçalho
Adicione scope a todos os elementos <th>
Use <thead>, <tbody>, <tfoot> para a estrutura
Para tabelas complexas, use id + headers

Verificação rápida

Qual valor de scope deve ser usado para um th que é o cabeçalho de uma coluna inteira?

Resumo: acessibilidade das tabelas

Elementos essenciais de tabelas acessíveis:

<caption> — título visível da tabela, anunciado pelos leitores de tela
scope="col" — cabeçalho de coluna
scope="row" — cabeçalho de linha
scope="colgroup/rowgroup" — cabeçalhos expandidos
id + headers — para cabeçalhos complexos de vários níveis
Teste com axe, pa11y ou VoiceOver

Perguntas Frequentes

A aula “Acessibilidade de tabelas: scope, summary e caption” é grátis?

Sim — o texto completo de “Acessibilidade de tabelas: scope, summary e caption” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “Acessibilidade de tabelas: scope, summary e caption”?

Adicionar legendas e atributos scope para dar suporte a leitores de ecrã. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Acessibilidade de tabelas: scope, summary e caption”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

table, tr, td e th
Estrutura thead, tbody e tfoot
colspan e rowspan para abranger células
Acessibilidade de tabelas: scope, summary e caption

← Voltar para HTML Academy