Portal do Governo Brasileiro

Curso eMAG / Desenvolvedor

gov.br eMAG

Início do Conteúdo

Práticas Web acessíveis Tabelas

As tabelas são utilizadas com a finalidade de disponibilizar dados tabulares, ou seja, para organizar informações em linhas e colunas, e não devem ser usadas para diagramação dos elementos visuais das páginas (design). O uso de tabelas com o propósito de diagramação não influencia apenas no nível de acessibilidade de um site, mas também, na agilidade e desempenho no carregamento de suas páginas. Logo, para estilizar e organizar os aspectos visuais das páginas é recomendado utilizar as folhas de estilo (CSS).

Para pessoas que não possuem deficiência visual a leitura e compreensão das informações contidas nas tabelas ocorre de forma simples, através do cruzamento visual de linhas e colunas, o que permite encontrar rapidamente os dados desejados. Já para usuários de leitores de tela, a obtenção e compreensão dos dados contidos em tabelas não é uma tarefa tão fácil, especialmente se tiverem sido desenvolvidas de forma inacessível.

Sempre que possível, é recomendado utilizar tabelas simples, evitando-se fazer uso de colunas e linhas mescladas ou de células em branco, pois isso dificulta a leitura da tabela por softwares leitores de tela, uma vez que os mesmos realizam a leitura de forma linear, ou seja, linha a linha. Além disso, alguns elementos e atributos são essenciais para a acessibilidade de tabelas, e devem ser empregados de forma lógica e semântica, de modo que venham a cumprir seu real propósito. A seguir, vamos conhecer como podemos implementar a acessibilidade em tabelas.


Início do Sub-menu

Fim do Sub-menu


Início do tópico

Título da tabela

Todas as tabelas necessitam de um título que deve ser fornecido por meio do elemento caption. 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 tão pouco, 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.

Exemplo:

						
							
	<table summary="...">  
		<caption>Material escolar</caption>  
		<tr>...segue o resto da tabela...
						
						
					
Voltar ao sub-menu

Início do tópico

Resumo da tabela

Em casos de tabelas complexas e extensas, além do título, é preciso oferecer um resumo com os principais dados da tabela, fornecido através do atributo summary. O 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 de sua estrutura geral.

Exemplo:

						
							
	<table summary="Material escolar - Levantamento comparativo de preços.">  
		<caption>Material escolar </caption>  
		<tr>...segue o resto da tabela...  
						
						
					
Voltar ao sub-menu

Início do tópico

Uso apropriado dos elementos th, tr e td

É importante aplicar de forma apropriada os elementos que demarcam as partes de uma tabela:

  • th para identificar cabeçalhos em linhas e colunas
  • tr para declarar linhas em tabela
  • td para declarar o conteúdo das células da linha

Exemplo:

						
							
	<table summary="Material escolar - Levantamento comparativo de preços.">  
		<caption>Material escolar</caption>  
		<tr>  
			<th>Estojo caneta hidrocor / loja</th>  
			<th>6 unidades</th>  
			<th>12 unidades</th>  
			<th>24 unidades</th>  
			<th>36 unidades</th>  
		</tr>  
		<tr>  
			<th>Lisboa papelaria</th>  
			<td>R$ 6,20</td>  
			<td>R$ 9,99</td>  
			<td>R$ 11,90</td>  
			<td>R$ 16,90</td>  
		</tr>  
		<tr>...segue o resto da tabela...  
						
						
					

O uso correto dessas marcações permite que os leitores de tela informem aos usuários sobre a função de cada elemento. Dessa forma, o usuário saberá o que é um cabeçalho, o que é uma linha e o que é uma célula de dados.

Voltar ao sub-menu

Início do tópico

Elementos thead, tbody e tfoot

Devem ser utilizados para tabelas extensas, possibilitando o agrupamento de linhas em uma tabela:

  • thead: aplicado para o agrupamento de linhas de cabeçalho
  • tbody: usado para definir o corpo da tabela
  • tfoot: utilizado para agrupar linhas de rodapé, demarcando o final de uma tabela

Exemplo:

						
							
	<table summary="....">  
		<caption>.....</caption>  
		<thead>  
			<tr> ...informação contida no cabeçalho... </tr>  
		</thead>  
		<tfoot>  
			<tr>...informação contida no rodapé... </tr>  
		</tfoot>  
		<tbody>  
			<tr> ...primeira linha de dados do bloco um... </tr>  
			<tr> ...segunda linha de dados do bloco um...</tr>  
		</tbody>  
	</table> 
						
						
					

Segundo recomendações do W3C, é sugerido que o tfoot seja declarado no código antes do elemento tbody, permitindo que os agentes de usuário renderizem os resultados da tabela antes de todas as possivelmente numerosas linhas do conteúdo. O emprego dessas marcações de agrupamento permite a fixação das linhas de cabeçalho e rodapé no navegador, possibilitando que o conteúdo ou corpo (tbody) permaneça em movimento entre os limites demarcados. No entanto, esses elementos só irão funcionar caso possuam o mesmo número de colunas.

Voltar ao sub-menu

Início do tópico

Associar células de dados às células de cabeçalho

Para tabelas mais complexas, é muito importante utilizar marcações para associar as células de dados com as células de cabeçalho. Essas associações podem ser realizadas através de:

  • Atributos id e headers: o atributo headers é utilizado nas células de dados (<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.

    Exemplo:

    								
    									
    	<table summary="Oferta de cursos - tabela estruturada em: nome do curso, professor, resumo da disciplina e carga horária">  
    		<caption>Oferta de cursos - Primeiro semestre</caption>  
    		<tr>  
    			<th id="t1" abbr="Nome">Nome do Curso</th>  
    			<th id="t2">Professor</th>  
    			<th id="t3">Resumo</th>  
    			<th id="t4" abbr="carga">Carga horária</th>  
    		</tr>  
    		<tr>  
    			<td header="t1">Gravura - conceitos básicos</td>  
    			<td header="t2">Eunice Lobato</td>  
    			<td header="t3">História da gravura, estilos, gráfica. Visita aos ateliês.</td>  
    			<td header="t4">40h</td>  
    		</tr>  
    		<tr>  
    			<td header="t1">Gravura em metal</td>  
    			<td header="t2">Ione Rocha</td>  
    			<td header="t3">Trabalhos práticos de gravura em metal. </td>  
    			<td header="t4">160h</td>  
    		</tr>  
    		<tr>  
    			<td header="t1">Xilogravura</td>  
    			<td header="t2">Heli Santos</td>  
    			<td header="t3">Trabalhos práticos em xilogravura.</td>  
    			<td header="t4">160h</td>  
    		</tr>  
    	</table>
    								
    								
    							
  • Uso dos cope e col: a associação é automática, sendo mais utilizada em tabelas de associação direta, onde é dado o valor col para o atributo scope nos cabeçalhos.

    Exemplo:

    								
    									
    	<table summary="Tabela de vendas de maçã e banana efetuadas no ano de 2010">   
    		<caption>Vendas 2010</caption>   
    		<tr>   
    			<th scope="col">Mês</th>   
    			<th scope="colgroup" colspan="2">Rio Grande do Sul</th>   
    			<th scope="colgroup" colspan="2">Santa Catarina</th>   
    		</tr>   
    		<tr>   
    			<td>Janeiro</td>   
    			<td scope="col">Maçã</td>   
    			<td scope="col">Banana</td>   
    			<td scope="col">Maçã</td>   
    			<td scope="col">Banana</td>   
    		</tr>   
    		<tr>   
    			<td>Feveiro</td>   
    			<td>1000</td>   
    			<td>1500</td>   
    			<td>3000</td>   
    			<td>1000</td>   
    		</tr>   
    		<tr>   
    			<td>Março</td>   
    			<td>2000</td>   
    			<td>1500</td>   
    			<td>3500</td>   
    			<td>500</td>   
    		</tr>   
    	</table>
    								
    								
    							

Fim do Conteúdo