Quando vemos uma tabela, começamos imediatamente a fazer associações visuais entre os dados e os cabeçalhos. Por exemplo, digamos que temos uma tabela representando nossos pets. Temos dois cachorros e dois gatos e a tabela está mostrando seus nomes e idades. Embora uma pessoa com visão possa ser capaz de entender as relações nesta tabela, fazer as conexões entre os valores e os cabeçalhos é muito mais difícil para pessoas que usam leitores de tela para navegar na tabela. Como desenvolvedor web, você é responsável por criar essas associações e estruturar sua marcação HTML de uma forma que também seja fácil para usuários de leitores de tela interpretarem. Então, vamos ver como você pode criar tabelas acessíveis que todos possam entender. A primeira boa prática que vamos abordar é o uso de uma legenda de tabela. Com o elemento caption, você pode escrever a legenda (ou título) de uma tabela, para que os usuários, especialmente aqueles que usam tecnologias assistivas, possam entender rapidamente o propósito e o conteúdo da tabela. Você deve colocar o elemento caption imediatamente após a tag de abertura do elemento table. Dessa forma, leitores de tela e outras tecnologias assistivas podem fornecer mais contexto anunciando a legenda antes de ler o conteúdo.

<table>
  <caption>Our Pets</caption>
  <!-- Table Rows and Columns -->
</table>

Agora vamos falar sobre cabeçalhos de linha e coluna. Cabeçalhos são células especiais, tipicamente encontradas no início de uma linha ou coluna, que descrevem o tipo de dados armazenados na linha ou coluna. Você pode definir um cabeçalho de linha ou coluna com o elemento de cabeçalho da tabela, th. Por exemplo, o código abaixo cria uma tabela para dois pets. Cada linha tem um cabeçalho de linha (o nome do pet) e cada coluna tem um cabeçalho de coluna, que descreve o que os dados na coluna representam (idade e tipo).

<table>
  <caption>Our Pets</caption>
  <thead>
    <tr>
      <!-- Column Headers -->
      <th>Name</th>
      <th>Age</th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Nora</th> <!-- Row Header -->
      <td>5</td>
      <td>Dog</td>
    </tr>
    <tr>
      <th>Gino</th> <!-- Row Header -->
      <td>2</td>
      <td>Cat</td>
    </tr>
  </tbody>
</table>

Observe que o código acima possui um elemento caption imediatamente após a abertura do elemento table. Então, dentro do elemento de cabeçalho da tabela (thead), ele tem os cabeçalhos das colunas (Name, Age e Type). Nas segunda e terceira linhas, dentro do elemento do corpo da tabela (tbody), encontramos os dados de cada um dos nossos pets. Os nomes dos pets são os cabeçalhos das linhas porque estão dentro dos elementos de cabeçalho da tabela (th). Associar as células de dados com seus cabeçalhos correspondentes também é muito importante para leitores de tela. O atributo scope determina se um cabeçalho é um cabeçalho de linha ou um cabeçalho de coluna. Leitores de tela podem adivinhar isso corretamente a partir da estrutura da tabela, mas geralmente é recomendado indicar explicitamente o scope para garantir clareza. O atributo scope tem quatro valores possíveis. Os dois que você usará com mais frequência são col para coluna e row para linha. No código abaixo, você pode ver que adicionamos o atributo scope aos cabeçalhos de coluna e linha. Os três cabeçalhos de coluna (Name, Age e Type) têm um scope de col, coluna. Os dois cabeçalhos de linha (Nora e Gino) têm um scope de row.

<table>
  <caption>Our Pets</caption>
  <thead>
    <tr>
      <!-- Now they have scope -->
      <th scope="col">Name</th>
      <th scope="col">Age</th>
      <th scope="col">Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Nora</th>
      <td>5</td>
      <td>Dog</td>
    </tr>
    <tr>
      <th scope="row">Gino</th>
      <td>2</td>
      <td>Cat</td>
    </tr>
  </tbody>
</table>

Se um cabeçalho de coluna ou linha abranger várias células, o scope também será aplicado a cada uma das células individualmente. Aqui está um exemplo disso:

<table>
  <tbody>
    <tr>
      <td></td>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
    <tr>
      <th rowspan="2" scope="row">Dogs</th>
      <th scope="row">Nora</th>
      <td>5</td>
    </tr>
    <tr>
      <th scope="row">Gino</th>
      <td>2</td>
    </tr>
    <tr>
      <th rowspan="2" scope="row">Cats</th>
      <th scope="row">Lulu</th>
      <td>10</td>
    </tr>
    <tr>
      <th scope="row">Elizabeth</th>
      <td>6</td>
    </tr>
  </tbody>
</table>

Nesta tabela, a célula com a idade de Nora (5) terá um cabeçalho de coluna (Age) e dois cabeçalhos de linha (Dogs e Nora). A idade de Gino (2) também terá um cabeçalho de coluna (Age) e dois cabeçalhos de linha (Dogs e Gino). No entanto, alguns leitores de tela podem não conseguir interpretar tabelas com estruturas complexas, então você também deve tentar simplificar a tabela o máximo possível para evitar cabeçalhos de linha e coluna que se estendam por várias células. Seu objetivo deve ser sempre garantir que os usuários possam acessar essas informações, mesmo que seus leitores de tela consigam lidar com estruturas complexas de tabelas. Agora, para a largura da célula, é recomendado evitar o uso de valores fixos. Você deve usar valores relativos em vez disso, como porcentagens. Além disso, tente evitar definir a altura da célula. Isso permitirá que os usuários ajustem o tamanho do texto para atender às suas necessidades. E finalmente, você deve deixar o navegador determinar a largura da tabela sempre que possível, para reduzir a necessidade de rolagem horizontal. Tabelas HTML são essenciais para apresentar dados estruturados em um formato acessível e compreensível. Seguindo estas diretrizes de acessibilidade, você pode criar tabelas que são fáceis de entender para todos.