Esquerda - Conteúdo.

Criação de Tabelas de Dados Acessíveis.

Marco Antonio de Queiroz - MAQ.
Gilberto Porta.

Introdução.

O elemento <table> é usado, em geral, de duas maneiras:

  1. Para formatação de layouts de páginas e posicionamento de elementos;
  2. Para tabular dados, criação de tabela de dados, para o qual esse elemento originalmente foi criado.

A primeira forma é a mais encontrada, embora não recomendada. Somente tabelas de dados podem ser criadas com acessibilidade ou tornadas acessíveis, deixando a célula associada ao cabeçalho e linha.

Tabela de dados sem acessibilidade.

Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.

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 (X)HTML.

<p class="centro">Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.</p>
<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>

A maioria dos softwares leitores de tela para pessoas com deficiência visual só terá a possibilidade de ler essa tabela "célula a célula" isoladamente. Dessa forma, lerá:
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

O conteúdo de cada célula não fica associado nem ao cabeçalho nem ao nome, ou seja, à linha e coluna. A pretensão de uma tabela acessível é que o usuário de um leitor de tela possa saber exatamente a que linha e coluna o conteúdo de cada célula pertence, podendo ser lidos o cabeçalho horizontal e o vertical associados ao conteúdo da célula de uma só vez.

Nas versões mais atuais, alguns leitores já leem a linha e coluna em tabelas simples sem acessibilidade, mas se perdem caso essas tabelas saiam do padrão mais comum, como em nosso exemplo, onde Matérias se dividem em português e matemática.

Como você pode observar na tabela acima, toda a apresentação foi feita com marcações de HTML, como:
width, border, cellpadding, cellspacing, bgcolor, font color e align.
Todos esses atributos estão em desuso (deprecated), são obsoletos, sendo muito mais lentos na sua renderização pelo navegador.

Tornando a Tabela de Dados Acessível.

Limpeza do código.

Nosso primeiro passo será eliminar toda a apresentação e formatação em HTML, para posteriormente serem colocados na folha de estilo. Ao retirá-los, nosso código será:

<table>
<tr>
<td rowspan="2">Aluno</td>
<td rowspan="2">Grupo</td>
<td colspan="2">Matérias</td>
</tr>
<tr>
<td>Português</td>
<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>

Construção do Novo Código.

Agora, com a tabela "limpa", podemos começar a adicionar elementos e atributos de acessibilidade, além de criarmos a apresentação na folha de estilo. Dessa forma, ao final, apesar de elaborarmos um código bem diferente do inicial, teremos uma tabela de dados visualmente idêntica à original, porém acessível aos leitores de tela gráficos, que poderão identificar a que linha e coluna pertence uma célula.

Adição do atributo "summary".

Este atributo serve para fazer um resumo da tabela que virá a seguir. Ele deve ficar dentro do elemento <table>. Sua sintaxe correta é:
<table summary="descrição do conteúdo da tabela.">

Obs.: O atributo summary é uma prioridade 3 do WCAG 1.0 e também anunciado no WCAG 2.0, mas questionado no WCAG Samurai, por considerar que toda tabela vem dentro de um contexto e que seu resumo seja desnecessário. Além disso, parte das tecnologias assistivas não possue suporte para sua leitura. No entanto, a ausência desse atributo no código é sempre acusada como erro pelos validadores automáticos de acessibilidade. Recomendamos sua utilização.

Elemento <caption>.

O elemento "<caption>" deve ser utilizado 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. Os validadores automáticos de acessibilidade não são unânimes em acusar como erro sua ausência na tabela.

Sintaxe: <caption>Título da Tabela.</caption>

O elemento caption é recomendado pelos WCAG 1.0 e 2.0 com a observação nesse segundo de que não se pode repetir a informação do elemento caption no atributo summary.

Elemento <abbr>.

O elemento <abbr> pode ser utilizado para se obter dois resultados opostos:

  1. para abreviar um cabeçalho de coluna muito extenso;
  2. para expandir a abreviatura de um cabeçalho abreviado.

Sintaxe:
1. <th abbr="CPF">Cadastro de Pessoa Física.</th>
2. <th><abbr title="Instituto Nacional de Seguridade Social">INSS</abbr></th>

No primeiro exemplo, 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.

No segundo exemplo, 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.

Identificação dos cabeçalhos.

Depois de limpar o código, os cabeçalhos ficam como células comuns codificados pelo elemento <td> e </td>, sem texto centralizado e negritado:
<td>Aluno</td><td>Grupo</td> etc.

Para uma codificação do cabeçalho com acessibilidade, devemos trocar <td> e </td> por <th> e </th>. O elemento <th> já comporta, por padrão, o texto centralizado e negritado.

<th>Aluno</th><th>Grupo</th> etc.

Para que as tecnologias assistivas possam associar os próximos elementos <td> aos <th> dos cabeçalhos, cria-se 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> etc.

No código acima, identificamos o cabeçalho "Aluno" através do identificador "id" com valor "aluno" e assim por diante. 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. Dessa forma, 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 identificadores scope/col.

<th scope="col">Aluno</th>
<th scope="col">Grupo</th>
<td>Paulo</td><td>A</td> etc.

No código acima, identificamos o cabeçalho "Aluno" através do identificador "scope" com valor "col" e assim por diante. Neste caso, não haverá uma associação explícita. As células de conteúdo (<td>) devem ser codificadas sequencialmente, pois a associação é automática, sendo a primeira célula (<td>) de uma linha (<tr>) sempre associada ao primeiro cabeçalho (<th>) da coluna e assim por diante. No nosso caso, Sempre leria a palavra "Aluno" do primeiro cabeçalho antes do conteúdo da primeira célula de cada linha.
Exemplo: "Aluno Paulo", "Aluno Marcos", etc.

Podemos destacar que, a diferença entre os identificadores "id/headers" e "scope/col" é que, no primeiro podemos associar qualquer célula de conteúdo a qualquer célula de cabeçalho, podendo-se ainda utilizar o atributo axis como veremos a seguir, enquanto no segundo a associação é automática, fugindo do controle do desenvolvedor e sendo mais utilizado em tabelas simples de associação direta.

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>

No exemplo acima, 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>

Tabela Acessível.

Avaliação de aprendizagem dos alunos na Escola Professor Pardal Pinto.
Alunos 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 HTML

<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>

Código CSS (Deverá ficar num arquivo à parte. 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; }

Atenção! É recomendado usar os estilos em um arquivo à parte e fazer a chamada entre as tags <head> e </head>.
Obs.: Para que o espaçamento entre as células (border-spacing:5px;) no Internet Explorer fique igual ao dos outros navegadores é preciso usar o seguinte hack:

<!--[if IE]><style type="text/css">table { *border-collapse: expression('separate', cellSpacing = '5px'); }</style><![endif]-->

Ex.:

<head>
<meta ... />
<title> ...</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<!--[if IE]><style type="text/css">table { *border-collapse: expression('separate', cellspacing = '5px'); }</style><![endif]-->
</head>

Dicas Gerais.

  • Esta página não passará pelo avaliador de código XHTML Strict do W3C por estar apresentando, para fins didáticos, uma tabela sem acessibilidade com elementos obsoletos;
  • Para se navegar por tabelas no leitor de tela Jaws, utilizam-se as teclas control e alt simultaneamente e com as setas para cima e para baixo, esquerda e direita, conforme se queira saber em que linha ou coluna estamos além do conteúdo da célula e a tecla 5 do teclado numérico para que seja lido coluna, linha e conteúdo da célula ao mesmo tempo.

Referências na Web.

Disponibilizado em: 22/12/2009.