Cabeçalhos de tabela

A Silktide verifica se as tabelas que apresentam dados definem células de cabeçalho. Os cabeçalhos informam às pessoas que usam o significado de cada linha e coluna, algo que os leitores que veem inferem a partir do esquema da tabela.

Considere uma tabela de apelidos e cidades. Sem uma linha de cabeçalho, um valor como "Washington" poderia ser qualquer um dos dois — o significado só fica claro quando as colunas são identificadas.

<!-- Problema: os cabeçalhos são células comuns, por isso não têm significado -->
<table>
  <tr>
    <td>Sobrenome</td>
    <td>Cidade</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londres</td>
  </tr>
</table>

Por que isso é importante

Um percorre uma tabela uma célula de cada vez. Quando os cabeçalhos são definidos, ele pode anunciar o cabeçalho relevante junto com cada valor, de modo que "Londres" seja lido como "Cidade: Londres". Sem cabeçalhos, a pessoa ouve apenas um fluxo de valores e precisa memorizar o esquema da tabela para entendê-los — e, em tabelas maiores, isso é praticamente impossível.

Deixar a linha superior em negrito ou com uma cor diferente não é suficiente. A formatação visual não transmite significado à tecnologia assistiva; apenas o subjacente o faz.

Como corrigir

Altere cada célula de cabeçalho de <td> para <th> e adicione um atributo scope indicando se ela é o cabeçalho de uma coluna ou de uma linha:

<!-- Corrigido: os cabeçalhos são células de cabeçalho reais -->
<table>
  <tr>
    <th scope="col">Sobrenome</th>
    <th scope="col">Cidade</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londres</td>
  </tr>
</table>

Se a tabela não apresentar dados e for usada apenas para organizar visualmente a página, adicione role="presentation" ao elemento <table> para que a tecnologia assistiva ignore sua estrutura. Melhor ainda, substitua as tabelas de layout por CSS — elas são fortemente desencorajadas no design moderno para a Web.

Como a Silktide faz essa verificação

Encontra todas as tabelas em cada página.
Ignora as tabelas marcadas como apresentações com role="presentation".
Ignora as tabelas com apenas uma linha ou apenas uma coluna, que provavelmente não são tabelas de dados.
Relata cada tabela restante que não contém nenhuma célula de cabeçalho <th>.

Solução de problemas

Minha tabela tem cabeçalhos, mas eles são células `<td>` formatadas

Células que apenas parecem cabeçalhos não contam. A tecnologia assistiva não consegue perceber fontes ou cores; converta as células para <th>.

Minha tabela de layout foi sinalizada

A Silktide só ignora tabelas de layout que declaram role="presentation". Se uma tabela for realmente apenas para apresentação, adicione esse atributo — ou substitua a tabela por um layout em CSS.