Tabelas acessíveis para dados

Quando usar uma tabela?

As tabelas são para dados tabulares: informação que só faz sentido cruzando linhas e colunas (um horário, uma comparação de preços, uma classificação). Se você tira as linhas e os dados viram uma bagunça, era uma tabela.

⚠️ Cilada clássica: usar tabelas para diagramar o layout da página. Isso era coisa dos anos 2000; hoje, para posicionar coisas na tela, existem o CSS Grid e o Flexbox. A tabela é para dados, não para layout.

A anatomia de uma tabela

<table>
  <caption>Notas do primeiro trimestre</caption>
  <thead>
    <tr>
      <th scope="col">Aluno</th>
      <th scope="col">Matemática</th>
      <th scope="col">Português</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ana</th>
      <td>9</td>
      <td>8</td>
    </tr>
    <tr>
      <th scope="row">Luis</th>
      <td>7</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Peça por peça:

• <table>: o contêiner de toda a tabela.
• <caption>: o título da tabela. Vem logo após <table> e os leitores de tela o anunciam antes de ler os dados.
• <thead>: agrupa a linha (ou linhas) de cabeçalho.
• <tbody>: agrupa as linhas de dados.
• <tr> (table row): uma linha.
• <th> (table header): uma célula de cabeçalho. Por padrão vem em negrito e centralizada.
• <td> (table data): uma célula de dados normal.

scope: o atributo que torna a tabela acessível

O atributo scope em um <th> indica a que ele se aplica esse cabeçalho:

• scope="col": encabeça uma coluna (o típico na linha de cima).
• scope="row": encabeça uma linha (a primeira célula de cada linha, como o nome do aluno).

Isso é fundamental para a acessibilidade: quando alguém com leitor de tela está na célula "9", o leitor pode anunciar "Ana, Matemática: 9" porque sabe que "Ana" é o cabeçalho da sua linha e "Matemática" o da sua coluna. Sem scope, ouviria apenas "9", sem contexto.

Uma tabela bem marcada (com caption, thead/tbody e th scope) faz sentido mesmo ouvida às cegas. Se passa nesse teste, você acertou. Esse é o objetivo.