Baixe Tabelas Acessíveis e outras Notas de estudo em PDF para Desenho, somente na Docsity!
Tabelas Acessíveis
O objetivo do uso de tabelas em documentos HTML é a apresentação de dados tabulares. Para tanto, existem diversos elementos para formatar as tabelas de forma clara, tanto para o usuário comum, quanto para os usuários portadores de deficiência.
No entanto, uma simples verificação por algumas páginas mostra que em várias tabelas, o uso de elementos é reduzido ao básico: TABLE, TR, TD; dificultando o seu acesso.
As orientações que seguem visam esclarecer o uso dos elementos de tabela visando a melhoria da acessibilidade da apresentação de dados em forma de tabelas.
1. Lendo uma tabela
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.
2. Aviso: tabelas não são para diagramar
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.
O uso de tabelas para diagramar as páginas causa problemas não só a acessibilidade, mas a performance de carregamento da página.
Atualmente há um movimento de esclarecimento sobre o uso correto das linguagens CSS e HTML. Dessa forma tem-se observado um decréscimo de páginas que utilizam tabelas na diagramação.
Lembre-se: os elementos visuais e a diagramação das páginas devem ser controlados a partir do uso adequado das folhas de estilo (CSS).
3. Elementos de uma tabela
A seguir veremos os elementos e atributos disponíveis para a formatação de tabelas acessíveis:
CAPTIONCAPTION CAPTIONCAPTION 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:
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.
Material escolar ...segue o resto da tabela...
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:
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.
Material escolar
Estojo caneta hidrocor / loja ...segue o resto da tabela...
Ex:
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.
Ex:
.....
...informação contida no cabeçalho...
...informação contida no rodapé...
...primeira linha de dados do bloco um... ...segunda linha de dados do bloco um...
...primeira linha de dados do bloco dois... ...segunda linha de dados do bloco dois... ...terceira linha de dados do bloco dois...
…
...
Ex:
Oferta de cursos - Primeiro semestre
Nome do Curso Resumo Carga horária
Gravura – conceitos básicos Eunice Lobato História da gravura, estilos, gráfica. Visita aos ateliês.
40h
Gravura em metal Ione Rocha Trabalhos práticos de gravura em metal. 160h
Xilogravura Heli Santos Trabalhos práticos em xilogravura. 160h
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.
O atributo “scope” especifica o grupo de células de dados para qual a célula de cabeçalho () está associada. Este atributo é usado no lugar do atributo “header”, preferencialmente em tabelas de dados simples. O atributo possui os seguintes valores:
- row: Fornece informação de cabeçalho referente a linha que a contém;
- col: Fornece informação de cabeçalho referente a coluna que a contém;
- rowgroup: Fornece informação de cabeçalho referente ao grupo de linhas que a contém;
- colgroup: Fornece informação de cabeçalho referente ao grupo de colunas que a contém.
O atributo “scope” também pode ser associado, quando necessário, ao elemento de célula de dados (). Os leitores de tela entenderão a célula como o cabeçalho da linha.
4. Tabelas simples X tabelas complexas
Tabelas contendo níveis simples de cabeçalhos de colunas e/ou linhas são mais fáceis de serem acessadas que tabelas complexas com múltiplos níveis de cabeçalhos (ex: três níveis de cabeçalhos para colunas e dois níveis para linhas).
Mesmo com todos os elementos que proporcionem a acessibilidade, tabelas complexas são de difícil compreensão para o usuário que utiliza leitores de tela. Sempre que possível devem ser usadas tabelas simples.
Quando possível, as tabelas complexas devem ser divididas em tabelas simples.
5. Leitura recomendada
HTML 4.01 Specification - Tables http://www.w3.org/TR/html4/struct/tables.html
Tabelas de dados acessíveis http://www.maujor.com/tutorial/actables.php
