Curso de HTML / Tornar uma tabela acessível: caption, scope e células mescladas

Uma tabela de dados legível identifica seu assunto e especifica quais cabeçalhos de linhas e colunas se aplicam a cada valor. Use caption e th, adicione scope quando isso ajudar, e mescle as células apenas quando as relações resultantes permanecerem compreensíveis.

Nomeie a tabela com caption

caption descreve a tabela como um todo e deve ser o primeiro elemento filho de table. Ele se distingue de um título de parágrafo próximo porque faz parte da tabela. Se um período ou método de medição for necessário para interpretar os números, indique-o na legenda ou no texto próximo. A legenda introduz a tabela; os nomes individuais de linhas e colunas permanecem nas células de cabeçalho.

Conecte os dados aos cabeçalhos com o atributo scope.

Use scope="col" para os títulos das colunas e scope="row" para os títulos das linhas. Neste exemplo, o valor correspondente a Segunda-feira e Manhã é de três visitantes.

<table>
  <caption>Visitantes por dia e por período do dia</caption>
  <thead>
    <tr>
      <th scope="col">Dia</th>
      <th scope="col">Manhã</th>
      <th scope="col">Tarde</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Segunda-feira</th>
      <td>3 visitantes</td>
      <td>5 visitantes</td>
    </tr>
    <tr>
      <th scope="row">Terça-feira</th>
      <td>4 visitantes</td>
      <td>6 visitantes</td>
    </tr>
  </tbody>
</table>

scope descreve a orientação da relação de um cabeçalho com os dados; não é uma regra de estilo visual. Em uma tabela simples, a relação pode ser óbvia sem isso, mas uma marcação explícita facilita a revisão da intenção. O tutorial W3C WAI sobre tabelas explica mais modelos.

Mescle as células apenas quando os dados exigirem

colspan="2" cobre duas colunas; rowspan="2" cobre duas linhas. O exemplo a seguir agrupa Manhã e Tarde sob um cabeçalho comum. O colgroup define essas duas colunas para que scope="colgroup" tenha um alvo claro. Para as linhas e células subjacentes, consulte Fundamentos de tabelas: table, tr, th e td.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Dia</th>
    <th scope="colgroup" colspan="2">Visitantes</th>
  </tr>
  <tr>
    <th scope="col">Manhã</th>
    <th scope="col">Tarde</th>
  </tr>
  <tr>
    <th scope="row">Segunda-feira</th>
    <td>3 visitantes</td>
    <td>5 visitantes</td>
  </tr>
</table>

O resultado inclui um grupo de colunas para Dia e um grupo de duas colunas para Manhã/Tarde. A primeira coluna também está em um colgroup explícito para que sua estrutura seja legível sem depender das regras de omissão de tags.

Não adicione células mescladas apenas para decorar uma tabela simples. Se os leitores precisarem adivinhar a qual cabeçalho um número pertence, simplifique a tabela ou divida-a em tabelas menores. O guia W3C WAI sobre cabeçalhos de tabela irregulares fornece exemplos mais complexos.

Teste as relações

Indique um valor qualquer e pergunte: « Que dia e que período do dia isso representa? » Verifique a resposta sem se basear apenas na cor ou na posição. Teste telas estreitas para verificar conteúdo cortado e, para tabelas complexas mescladas, também experimente um leitor de tela. As tabelas devem representar dados, e não um layout ou um formulário de entrada. Combine a análise das tabelas com os princípios de teste manual em Bases da acessibilidade: Cabeçalhos, links, imagens e teclado.