Lupa digital

As tabelas devem ser utilizadas para organização tabular de informações.

Para posicionamento e estruturação de layout de páginas e conteúdos utilize folhas de estilos (CSS).

9.1 Associe as células aos cabeçalhos das colunas

As linhas da tabela devem estar associadas a seus respectivos cabeçalhos. O programa leitor de tela utiliza esta informação para informar ao usuário em qual linha e coluna a informação da célula pertence.

Associe o cabeçalho, atributo th, com o conteúdo da linha, atributo td, através dos atributos id e headersrespectivamente.

Informe ao usuário o que significa a tabela posicionando um título na parte superior da tabela através do elemento caption.

Exemplo

Exemplo do código

<table id="funcionarios">
 <caption >Relação de Funcionários</caption>
 <tr>
 <th id="nome" >Nome</th>
 <th id="matricula" >Matrícula</th>
 <th id="departamento" >Departamento</th>
 <th id="divisao" >Divisão</th>
 </tr>
 <tr> 
 <td headers="nome" >Fabio</td>
 <td headers="matricula" >278410</td>
 <td headers="departamento" >Arrecadação</td>
 <td headers="divisao" >Controle Financeiro</td>
 </tr>   
 <tr> 
 <td headers="nome" >Pimenta</td>
 <td headers="matricula" >876423</td>
 <td headers="departamento" >Arrecadação</td>
 <td headers="divisao" >Controle Financeiro</td>
 </tr>
 <tr> 
 <td headers="nome" >Segal</td>
 <td headers="matricula" >587963</td>
 <td headers="departamento" >Arrecadação</td>
 <td headers="divisao" >Fiscalização</td>
 </tr>
</table>

Comentário do código

Este exemplo mostra como associar células de dados, criados com o elemento td, com seus cabeçalhos correspondentes, através do atributo headers. Este atributo especifica uma lista de células, linhas e colunas, associadas com o conteúdo da célula. Para esta associação, é necessário a utilização do atributo id.

Alguns leitores de telas irão ler esta tabela da seguinte forma:

Nome: Fábio , Matricula: 278410, Departamento: Arrecadação, Divisão: Controle Finaneiro
Nome: Pimenta, Matricula: 876423, Departamento: Arrecadação, Divisão: Controle Finaneiro
Nome: Segal , Matricula: 587963, Departamento: Arrecadação, Divisão: fiscalização

Infelizmente o Virtual Vision 2.01 não possui recurso para informar que coluna uma determinada célula pertence. Neste caso o Virtual Vision lerá esta tabela da seguinte forma:

Nome, Matricula, Departamento, Divisão
Fábio , 278410, Arrecadação, Controle Finaneiro
Pimenta, 876423, Arrecadação, Controle Finaneiro
Segal , 587963, Arrecadação, fiscalização

9.2 Posicione cabeçalhos e linhas em uma ordem lógica de leitura

Como o leitor de telas não efetua foco nas células das tabelas com a tecla TAB e também não consegue associar células a cabeçalhos, procure estruturar a tabela de forma que a torne interpretável através da leitura de cima para baixo e da esquerda para direita, permitindo que o título seja lido e logo após as células.

Exemplo

Exemplo do Código

<table class="tarifas">
    <tbody>
    <caption>Tarifas telefônicas da Telemar</caption>
    <tr>
        <th id="horario">Horários</th>
        <th id="tarifa">Tarifas</th>
    </tr> 
    <tr> 
        <td headers="horario">0 às 6</td>
        <td headers="tarifa" >menos 75%</td>
    </tr>
    <tr> 
        <td headers="horario">6 às 7</td>
        <td headers="tarifa">menos 50%</td>
    </tr>
    <tr> 
        <td headers="horario">7 às 8</td>
        <td headers="tarifa">normal</td>
     </tr>
<tbody> 
</table>

Comentário do código

Desta forma o programa leitor de telas irá ler a tabela conforme abaixo, dar maior sentido a informação:

Tarifas telefônicas da Telemar
Horários, Tarifas
0 as 6, menos 75%
6 as 7, menos 50%
7 as 8, normal

9.3 Tabelas para leiaute e posicionamento

As técnicas mais modernas de desenvolvimento, baseadas no Modelo de Documento DOCTYPE STRIC, torna o uso de tabelas para criação de leiaute e posicionamento um erro de linguagem.

A semântica de uma tabela diz que a mesma deve possuir um título e estar organizada com linhas de cabeçalhos e linhas de conteúdo, permitindo a programas leitores de telas mais modernos identificar quantas linhas existem na tabela e inclusive em que linha o foco de leitura está posicionado.

O Uso de tabelas para posicionamento torna o código fonte da página carregado e de difícil compreensão, além de aumentar o tempo de carregamento da página.

Alguns leitores de telas, não conseguem interpretar corretamente uma página com um grande aninhamento de tabelas, linhas e colunas, tornando a leitura da página impraticável.

A recomendação do WCAG indica o uso de folhas de estilo (CSS) para posiconamento.

Caso seja inevitável, por falta de atualização do conhecimento das técnicas mais modernas por parte do desenvolvedor, pelo menos procure criar tabelas de forma que permita uma ordem linear de leitura, para que não ocorra a interpretação indevida do texto ou mesmo da navegação na página.

Exemplo do Código

<table class="tabelaerro">
<tbody>
<caption>Tabela com posicionamento indevido do conteúdo</caption>
<tr> 
 <th id="coluna1"> Coluna 1</th>
 <th id="coluna2"> Coluna2</th> 
<tr>
<td headers="coluna1">Quando são utilizadas linhas da tabela para separar o texto desta</td>
<td headers="coluna2"> a ordem natural de leitura das linhas e irá ler o texto de forma
incorreta. </td>
</tr>
<tr>
<td headers="coluna1"> forma, o Leitor de telas não conseguirá seguir</td>
<td headers="coluna2">&nbsp;</td>
</tr>
</tbody>
</table>

Comentário do código

O leitor de telas irá ler:

 

Quando são utilizadas linhas da tabela para separar o texto desta forma o leitor de telas irá ler o texto de forma incorreta. Primeiro serão lidas as informações da coluna 1 e depois a coluna 2. 

O correto seria exibir a primeira coluna não sem dividi-la. Com isto, todo o texto da primeira coluna será lido e depois o da segunda coluna.

Exemplo do Código

<table class="tabelaerro">
<tbody>
<caption>Tabela com posicionamento correto do conteúdo</caption>
<tr> 
 <th id="coluna1a"> Coluna 1</th>
 <th id="coluna2a"> Coluna 2</th> 
</tr>
<tr>
<td headers="coluna1a">Quando são utilizadas linhas para separar o texto desta forma, o Leitor de telas irá ler o texto</td>
<td headers="coluna2a">corretamente. Lendo a primeira coluna e depois a segunda.</td></tr></tbody>
</table>

Comentário do código

O leitor de telas irá ler:

Quando são utilizadas linhas para separar o texto desta forma, o Leitor de telas irá ler corretamente. lendo a primeira coluna e depois a segunda.

Algumas vezes, dependendo da formatação que estiver sendo feita na página, será necessário incluir uma nova tabela em cada coluna para forçar a leitura de forma correta.