Tabelas de Dados Acessíveis

As tabelas de dados são muito utilizadas para mostrar informações facilmente, em sites não é diferente, quando podem ser visualizadas tudo bem, o problema mesmo é quando você não pode ler. Os leitores não conseguem lê-las de maneira adequada, então é preciso utilizar código limpo e específico, mostrarei alguns exemplos a seguir.

O primeiro passo para se fazer uma tabela de dados acessível é simplificar o código. Depois deve-se usar o atributo "summary", ele deve ficar dentro da tag table.
EX:
<table summary="Tabela de preços das hortaliças do mercado X">

Usa-se também a tag caption, para dar título à tabela. Ao contrário do summary, a tag caption é rendezirada pelo navigador.

EX:
<caption>Hortaliças</caption>

Além disso, usamos o elemento abbr, que é utilizado para abreviar um nome e para expandir uma abreviação, abaixo temos dois exemplos:

<th abbr="RG">Registro Geral</th>

 ou
<th><abbr title="Dynamic Host Configuration Protocol">DHCP</abbr></th>

No primeiro exemplo, o cabeçalho "Registro Geral" será lido pelo leitor de tela apenas no cabeçalho. Nas células onde estarão os conteúdos de Registro Geral, será lido apenas "RG", antes do conteúdo da célula.

No segundo exemplo, o cabeçalho "DHCP" será lido pelo leitor de tela apenas no cabeçalho. Nas células onde estarão os conteúdos de DHCP, será lida sua extensão "Dynamic Host Configuration Protocol", antes do conteúdo da célula.

Para cabeçalho é usado a tag <th>, que já deixa centralizado e em negrito.

Devemos identificar o cabeçalho com um id para referenciá-lo no atributo headers, que fica dentro da célula (td).

EX:

<th id="fruta">Fruta</th><th id="preco">Preço</th>
<td headers="fruta">Laranja</td><td headers="preco">5,00</td>

O headers deve ter o mesmo valor que o id do cabeçalho, assim o leitor de páginas repetirá o valor que você colocou antes de ler o conteúdo, no exemplo acima ele lerá: "fruta laranja, preço 5,00"

Há outra maneira de fazer a associação entre os nomes do cabeçalho e das células, usando o atributo scope dentro de th. 

EX:

<th scope="col">Fruta</th>
<th scope="col">Preço</th>
<td>Laranja</td><td>5,00</td>

Desta maneira fica implícito que a primeira coluna é a de FRUTA e a segunda é a de PREÇO, então deve-se colocar os elementos na ordem correta, caso contrário a tabela pode não fazer sentido.

Identificador axis.

É usado para associar um identificador id a uma célula, o leitor repete o conteúdo do axis sempre que for requisitado
EX:

<th id="portugues" axis="materia">Português</th>
e, na célula da tabela:
<td headers="portugues">7</td>
O leitor lerá: "Matéria Português 7"

As linhas de uma tabela <tr> podem ser agrupadas em cabeçalho (thead), corpo (tbody) e rodapé (tfoot), quando houver mais de um nível de cabeçalho.
EX:

<thead>Linhas de Cabeçalho</thead>
<tbody>Linhas do corpo da tabela e suas células </tbody>