th, scope e o elemento caption

Uma verdadeira tabela de dados mostra relações entre linhas e colunas. Com uma marcação adequada, os leitores de tela podem anunciar a qual cabeçalho cada valor pertence.

Se toda célula for apenas um td, o leitor de tela lê números sem contexto. A pessoa usuária ouve os valores, mas nunca descobre o que significam.

Troque as células de cabeçalho de td para th. Agora o navegador sabe que essas células identificam os dados, em vez de contê-los, e as expõe como cabeçalhos.

Um elemento th é anunciado como cabeçalho e pode ser associado às células que descreve. É essa ligação que dá significado aos números isolados.

Adicione scope a cada th para indicar quais células ele abrange. O valor é col para um cabeçalho de coluna ou row para um cabeçalho de linha.

Use scope=col no cabeçalho no topo de uma coluna. Cada célula abaixo dele herda esse rótulo à medida que a pessoa usuária desce.

Use scope=row na primeira célula de uma linha quando ela nomear essa linha, como uma pessoa ou uma data na borda esquerda.

O elemento caption dá um título à tabela inteira. As pessoas que usam leitores de tela o ouvem primeiro e sabem o que estão prestes a explorar.

Coloque caption como o primeiro filho dentro da tabela, logo após a tag de abertura. Qualquer outra posição é inválida e pode ser ignorada.

Um h2 próximo não é suficiente. O caption é associado programaticamente à tabela, então as pessoas descobrem o título mesmo ao passar de uma tabela para outra.

Caption, uma linha de cabeçalho com th e scope e, depois, linhas de dados. Essa base torna a maioria das tabelas simples totalmente acessível sem ARIA.

Você está identificando o cabeçalho da coluna no topo de uma tabela.

Você aprendeu o trio das tabelas acessíveis: th para cabeçalhos, scope para direcioná-los e caption para nomear a tabela. A maior parte do trabalho está concluída.