Como usar Tabelas em HTML

As tabelas devem ser utilizadas para organização tabular das informações. Para posicionamento e estruturação de layout de páginas utilize folhas de estilos (CSS).

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

As linhas da tabela devem estar associadas a seus respectivos cabeçalhos. Alguns leitores de tela utilizam estas informações para informar ao usuário deficiente visual a que coluna a informação da célula pertence.

Associe o cabeçalho <th> com o conteúdo da linha <td> através dos atributos <id=”…”> e headers=”…”.

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

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:

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

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

Como o Virtual Vision não efetua foco nas células das tabelas 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 direita para esquerda, permitindo que o título seja lido e logo após as células.

Exemplo do Código (mais indicado)

<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

8.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 leiaut 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.

Infelizmente o Virtual Vision 2.01 não se beneficia desta técnica.

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, como o WebVox, 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 W3C/WAI – Diretriz WCAG 1.0 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.

Veja no exemplo abaixo uma formatação de uso indevido que fará com que o leitor de telas faça uma leitura incorreta da informação.

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

Comentário do código

O leitor de telas irá ler:

Quando são utilizadas linhas da tabela para separar o texto desta a ordem natural de leitura das linhas e irá ler o texto de forma incorreta. forma, o Leitor de telas não conseguirá seguir

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

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

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.