| Aluno | Grupo | Matérias | |
| Português | Matemática | ||
| Paulo | A | 7 | 8 |
| Marcos | A | 6 | 9 |
| Rosa | B | 10 | 7 |
| Maria | B | 7 | 5 |
| Média por matéria | 7,50 | 7,25 | |
Código em HTML dessa tabela:
<table width="80%" align="center" border="1" cellpadding="5" cellspacing="4" bgcolor="#FFF4EA">
<tr>
<td rowspan="2" bgcolor="#efefef" align="center"><strong>Aluno</strong></td>
<td rowspan="2" bgcolor="#efefef" align="center"><strong>Grupo</strong></td>
<td colspan="2" bgcolor="#efefef" align="center"><strong>Matérias</strong></td>
</tr>
<tr>
<td bgcolor="#efefef" align="center"><strong>Português</strong></td>
<td bgcolor="#efefef" align="center"><strong>Matemática</strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><font color="#ff0000">Paulo</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">A</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">8</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><font color="#ff0000">Marcos</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">A</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">6</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">9</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><font color="#ff0000">Rosa</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">B</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">10</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
</tr>
<tr>
<td bgcolor="#FFFFFF"><font color="#ff0000">Maria</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">B</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">7</font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#ff0000">5</font></td>
</tr>
<tr>
<td colspan="2" bgcolor="#efefef" align="center"><strong>Média por matéria</strong></td>
<td bgcolor="#FFFFFF" align="center"><font color="#003399"><strong>7,50</strong></font></td>
<td bgcolor="#FFFFFF" align="center"><font color="#003399"><strong>7,25</strong></font></td>
</tr>
</table>
os Softwares de Leitura de Tela irão ler célula a célula dessa tabela da seguinte forma:
Aluno Grupo Matérias Português Matemática Paulo A 7 8 Marcos A 6 9 Rosa B 10 7 Maria B 7 5 Média por matéria 7,50 7,25 (todas as palavras grifadas em verde)
que fica sem nenhum sentido para o usuário, o conteúdo de cada célula não fica associado nem ao cabeçalho nem ao nome (linha e coluna).
Sem falar que atributos width, border, cellpadding, cellspacing, bgcolor, font color e align, estão em desuso (pois são lentos para a interpretação dos navegadores)
QUAL A SOLUÇÃO?
Retiramos todo os atributos html do código:
<table>
<td>Matemática</td>
</tr>
<tr>
<td>Paulo</td>
<td>A</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>Marcos</td>
<td>A</td>
<td>6</td>
<td>9</td>
</tr>
<tr>
<td>Rosa</td>
<td>B</td>
<td>10</td>
<td>7</td>
</tr>
<tr>
<td>Maria</td>
<td>B</td>
<td>7</td>
<td>5</td>
</tr>
<tr>
<td>Média por matéria</td>
<td>7,50</td>
<td>7,25</td>
</tr>
</table>
logo após:
Adicionamos o atributo "summary".
Este atributo serve para fazer um resumo da tabela. Ele deve ficar dentro do elemento <table>:
<table summary="descrição do conteúdo da tabela e a ausência desse atributo no código é sempre acusada como erro pelos validadores automáticos de acessibilidade.">
depois:
adicionamos o elemento <caption> logo após o elemento "<table>".
Ele é uma marcação para colocarmos título na tabela.
(Ao contrário do elemento "summary" ele é visível a quem enxerga, todos os navegadores o renderizam e tecnologias assistivas lhe dão suporte)
<caption>Título da Tabela.</caption>
em seguida:
Elemento <abbr>.
O elemento <abbr> pode ser utilizado para se obter dois resultados :
para abreviar um cabeçalho de coluna muito extenso;
<th abbr="CPF">Cadastro de Pessoa Física.</th>
o cabeçalho "Cadastro de Pessoa Física" será lido pelo leitor de tela apenas no cabeçalho.
Nas células onde estarão os conteúdos de Cadastro de Pessoa Física, será lido apenas "CPF", antes do conteúdo da célula.
ou
para expandir a abreviatura de um cabeçalho abreviado.
<th><abbr title="Instituto Nacional de Seguridade Social">INSS</abbr></th>
o cabeçalho "INSS" será lido pelo leitor de tela apenas no cabeçalho.
Nas células onde estarão os conteúdos de INSS, será lida sua extensão "Instituto Nacional de Seguridade Social", antes do conteúdo da célula.
em seguida:
todo o cabeçalho que estiver entre as TAGS TD:
<td>Aluno</td>
<td>Grupo</td>
Para uma codificação do cabeçalho com acessibilidade, devemos trocar <td> e </td> por <th> e </th>. ficando assim:
<th>Aluno</th>
<th>Grupo</th>
Para que as tecnologias assistivas possam associar os próximos elementos <td> aos <th> dos cabeçalhos, criamos identificadores de cabeçalho/célula. Os mais conhecidos são o "id/headers" e "scope/col".
Tabelas com identificadores id/headers.
<th id="aluno">Aluno</th>
<th id="grupo">Grupo</th>
<td headers="aluno">Paulo</td>
<td headers="grupo">A</td>
No código acima, identificamos o cabeçalho "Aluno" através do identificador "id" com valor "aluno" e as células de conteúdo (<td>) são associadas aos cabeçalhos através do atributo "headers" que devem ter o mesmo valor do cabeçalho ao qual queremos fazer a ligação.
Quando um leitor de tela passar por um <td headers="aluno"> sempre lerá a palavra "Aluno" do cabeçalho antes do conteúdo da célula.
Exemplo: "Aluno Paulo", "Aluno Marcos" etc.
Tabelas com identificador axis
O axis é um atributo que faz a associação de um identificador ID a uma célula, criando a repetição do conteúdo do axis sempre que esse identificador for requisitado.
Código:
<th id="portugues" axis="materia">Português</th>
e, na célula da tabela:
<td headers="portugues">7</td>
Assim o leitor de tela que aderir aos padrões web poderão sonorizar o conteúdo de uma td que estiver associada a um headers do identificador Português, como "Matéria Português" e, no nosso caso, com o conteúdo da célula "Matéria Português 7", sendo 7 o conteúdo da célula, como na tabela que virá abaixo.
Elementos de Tabela thead, tfoot,tbody.
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.
<thead>Linhas de Cabeçalho</thead>
<tbody>Linhas do corpo da tabela e suas células </tbody>
<tfoot>Linha do rodapé da tabela <tfoot>
o código da tabela já devidamente alterado deverá ficar assim:
<table summary="Tabela contendo notas por grupo em relação a alunos e matérias.">
<caption>Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.</caption>
<colgroup>
<col />
<col />
<col span="2" /><!-- Agrupamento das colunas Português e Matemática à célula de cabeçalho Matérias -->
</colgroup>
<thead>
<tr>
<th rowspan="2" id="aluno">Alunos</th>
<th rowspan="2" id="grupo">Grupo</th>
<th colspan="2" id="materia">Matérias</th>
</tr>
<tr>
<th id="portugues" axis="materia">Português</th>
<th id="matematica" axis="materia">Matemática</th>
</tr>
</thead>
<tbody>
<tr>
<td class="esquerda" headers="aluno">Paulo</td>
<td headers="grupo">A</td>
<td headers="portugues">7</td>
<td headers="matematica">8</td>
</tr>
<tr>
<td class="esquerda" headers="aluno">Marcos</td>
<td headers="grupo">A</td>
<td headers="portugues">6</td>
<td headers="matematica">9</td>
</tr>
<tr>
<td class="esquerda" headers="aluno">Rosa</td>
<td headers="grupo">B</td>
<td headers="portugues">10</td>
<td headers="matematica">7</td>
</tr>
<tr>
<td class="esquerda" headers="aluno">Maria</td>
<td headers="grupo">B</td>
<td headers="portugues">7</td>
<td headers="matematica">5</td>
</tr>
</tbody>
<tbody class="linha-das-medias">
<tr>
<th colspan="2" id="media">Média por matéria </th>
<td headers="portugues">7,50</td>
<td headers="matematica">7,25</td>
</tr>
</tbody>
</table>
os códigos de CSS ficam em um arquivo a parte como manda os bons procedimentos da W3C
Ex.: estilos.css
.centro { text-align:center; }
.esquerda { text-align:left; }
table { width:80%; border:1px outset #333; border-spacing:5px; font-size:1em; margin:auto; background:#FFF4EA; }
caption { margin:auto; }
th, td { border:1px inset #DDD; padding:4px; }
th { background:#efefef; }
td { background:#FFF; text-align:center; }
tbody td { color:#F00; }
.linha-das-medias td { text-align:center; font-weight:bold; color:#039; }
Conclusão:
Com o HTML5 foram abolidos comandos de tabela e criados novos, para uma melhor compreensão de leitura de tabelas por usuários cegos. Consistem em associações de campos de colunas e linhas de uma tabela... fato que no HTML 4 e anteriores, não existiam... em que os leitores de tela, simplesmente liam campo a campo sem qualquer associação.
Inclusive os sites agora, ficam com uma melhor semântica no Google, já que agora o buscador famoso, "sabe" exatamente o que significa aquele campo, quando faz uma busca.
Fonte: http://www.acessibilidadelegal.com/13-tabelas-acessiveis.php
