Tabelas Acessíveis

Elementos básicos para construção de tabelas:

Table

Apesar de criado com a finalidade de apresentar dados tabulares, o elemento TABLE é muito utilizado para a diagramação dos elementos visuais das páginas. Com o advento do CSS (folhas de estilo em cascata - linguagem voltada para a formatação visual dos elementos HTML) o uso de tabelas para solucionar o desenho de páginas deveria ter sido descartado. No entanto, tabelas continuam sendo usadas com esse objetivo.

Tr,Td

O elemento TR marca a linha da tabela e o elemento TD marca o conteúdo da célula como dado.

Lendo uma tabela: Pessoas sem problema de visão  e Pessoas portadoras de deficiência visual

Para pessoas sem problemas de visão, as informações contidas na tabela são compreendidas apenas avaliando o conteúdo da tabela, dados específicos são encontrados cruzando visualmente colunas e linhas.

No entanto para pessoas portadoras de deficiência visual, a compreensão e obtenção de dados de uma tabela não é uma tarefa fácil se essa tabela for construída de forma não acessível. Pessoas portadoras de deficiência visual utilizam-se geralmente de leitores de tela. Os leitores de tela não lêem a ‘tela’ e sim decodificam a sua estrutura HTML.

Dessa forma, o uso de elementos HTML que estruturem de forma clara a tabela auxiliam a sua leitura por pessoas que se utilizam leitores de tela.

Tabelas Acessíveis

A. CAPTION para o título da tabela

O elemento CAPTION é o título da tabela. O uso de outros elementos como H1, P, TD ou TH pode ter “visualmente” o sentido de título, mas não são semanticamente corretos, e tampouco, acessíveis.

No código HTML o elemento CAPTION deve ser colocado após a marcação TABLE e antes

de qualquer outra marcação que seguir.

Por padrão, o elemento CAPTION é mostrado centralizado logo acima da tabela. Para

modificações no visual deve ser usado o CSS.

EX:  <table sumary="" >

<caption>Material escolar</caption>

<tr>...segue o resto da tabela...

B. Atributo summary para a finalidade da tabela

Atributo summary para a finalidade da tabela. O atributo “summary” deve vir dentro do elemento TABLE servindo como informação auxiliar para entendimento da tabela para leitores de tela e displays Braille, não sendo visível em navegadores de interface gráfica.

O atributo “summary” descreve a finalidade da tabela e dá uma indicação da estrutura

geral, sendo necessário para compreensão de tabelas complexas.

EX: <table sumary="Material escolar - Levantamento comparativo de preços.">

<caption> Material escolar </caption>

<tr>...segue o resto da tabela...

C.TH para identificar os cabeçalhos

Para tabelas simples, o uso apropriado do elemento TH é essencial para tornar a tabela

acessível. Utilize o elemento TH para a identificação de cabeçalhos em linhas e colunas

pelos leitores de tela.

D. Abbr

O atributo 'abbr' permite a abreviação de um cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o leitor de tela o encontrar, lendo apenas a abreviação nas

demais vezes.

Ex: <table sumary="Material escolar - Levantamento comparativo de preços.">

<caption>Material escolar</caption>

<tr>

<th abbr=”hidrocor”>Estojo caneta hidrocor / loja</th>

<th>...segue o resto da tabela...

E. THEAD, TBODY e TFOOT grupos de linhas para tabelas extensas

Os elementos THEAD, TBODY E TFOOT são necessários em tabelas extensas,

que ocupam mais de uma página.

O elemento THEAD agrupa uma ou mais linhas de cabeçalho da tabela. O elemento TFOOT

agrupa linhas com informações de rodapé. No código HTML o elemento TFOOT deve

aparecer antes do elemento TBODY.

O elemento TBODY define o corpo da tabela que contém as células de dados. Uma tabela

pode conter mais de um elemento TBODY separando os diferentes grupos de dados.

O uso desses elementos permite que:

As linhas contidas nos elementos THEAD e TFOOT sejam fixas no navegador,

permitindo que as células de dados contidas no TBODY ‘rolem’ entre as duas;

Que quando impressas, as tabelas mostrem o cabeçalho e o rodapé em todas

as páginas.

Os elementos THEAD, TFOOT e TBODY de uma tabela devem ter o mesmo número de

colunas.

F. Agrupando colunas – elementos COLGROUP e COL

O elemento COLGROUP cria um grupo/estrutura de colunas, permitindo sua diferenciação.

A tabela do próximo exemplo contém dois grupos de colunas. O primeiro grupo de colunas

contém 10 colunas e o segundo contém 5 colunas.

G. SPAN

O atributo “span” costuma ser mais vantajoso em grupos de colunas com as mesmas
características. O elemento COL é um elemento vazio, sem função estrutural e serve
como suporte para os atributos. O elemento COL pode estar no interior ou no exterior de
um grupo explícito de colunas - COLGROUP.
O atributo “span” também pode ser utilizado no elemento COL, sempre que seja
necessário isolar uma coluna no interior de um grupo.

H.Atributos id e headers - Uma forma de associar cabeçalhos e células de dados

O atributo “headers” é utilizado nas células de tabelas (<td></td>) em conjunto com o
atributo id na célula de cabeçalho (<th></th>) para associar as células de dados aos seus
respectivos cabeçalhos.
O atributo headers é requerido sempre que os cabeçalhos estiverem situados em posições

irregulares, em relação aos dados aos quais eles se referem.

I. Atributo scope -Uma outra forma de associar cabeçalhos e células de dados

De forma semelhante aos atributos “id” e “header”, o uso do atributo scope é uma outra
forma de se agrupar cabeçalhos de colunas com suas respectivas informações e assim

melhorar a acessibilidade das tabelas de dados.