- Elementos básicos para construção de tabelas:
- table, tr, td
- Lendo uma tabela:
- Pessoas sem problema de visão
- Pessoas portadoras de deficiência visual
- Tabelas Acessíveis:
- caption
- summary
- th
- bbr
- thead, tbody, tfoot
- colgroup, col
- span
- id, header
- scope
- Exemplificar uma tabela não acessível:
- Descrever os problemas que uma pessoa portadora de deficiência visual terá para entender os dados da tabela
- Propor alterações no código da tabela para torna‐la acessível a portadores de deficiência visual
Elementos básicos para construção de tabelas
De um lado a outro da web, usava-se a abusava-se das tabelas HTML pra fazer o layout das páginas. Nós veremos como criar um layout sem tabelas, no Tutorial Avançado de CSS. O uso correto das tabelas é fazer exatamente o que você espera que uma tabela faça – estruturar dados tabulares, tais como descrição de dados estatísticos em geral, agendas, calendários, planilhas em geral e etc.
Existem várias tags usadas em tabelas, e entender completamente como elas funcionam é provavelmente a parte mais difícil do Tutorial Iniciante de HTML.
Adicione o código seguinte à tag “body” em seu documento HTML e então nós veremos o que cada tag está fazendo:
03 | <td>Linha 1, Célula 1</td> |
04 | <td>Linha 1, Célula 2</td> |
05 | <td>Linha 1, Célula 3</td> |
08 | <td>Linha 2, Célula 1</td> |
09 | <td>Linha 2, Célula 2</td> |
10 | <td>Linha 2, Célula 3</td> |
13 | <td>Linha 3, Célula 1</td> |
14 | <td>Linha 3, Célula 2</td> |
15 | <td>Linha 3, Célula 3</td> |
18 | <td>Linha 4, Célula 1</td> |
19 | <td>Linha 4, Célula 2</td> |
20 | <td>Linha 4, Célula 3</td> |
O elemento table define a tabela.
O elemento tr define uma linha da tabela.
O elemento td define uma célula. Elas precisam estar contidas em tags tr, como foi mostrado acima.
Se você imaginar uma tabela 3×4, que tem 12 células, devem existir quatro elementos tr pra definir as linhas e três elementos td em cada linha, totalizando 12 elementos td.
Lendo uma tabela
Pessoas sem problema de visão
Para ler uma tabela quando não se tem nenhum problema de visão é muito simples, basta entender que a tabela é a organização de informações na forma de linhas e colunas.
Pessoas portadoras de deficiência visual
A leitura de uma tabela para pessoas com deficiência visual é bastante complicada, uma vez que as tabelas quando visualmente são organizadas, o seu código fonte não é tão organizado assim, como hoje os leitores de tela como o JAWS leem o código da pagina e não as palavras que estão impressas na tela, caso uma tabela não esteja formatada corretamente para ser acessível será muito confuso da pessoa que está usando o leitor de tela entender as informações contidas na mesma.
Tabelas Acessíveis
A seguir veremos os elementos e atributos disponíveis para a formatação de tabelas
acessíveis: 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:
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.
...segue o resto da tabela...
Ex:
TH para identificar os cabeçalhos, TR para linha e TD para dado de tabela.
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. O elemento TR marca a linha da tabela e o elemento TD marca o conteúdo da célula como dado.
Deve-se evitar o uso de colunas com células vazias, pois elas atrapalham a leitura dos dados pelos leitores de tela. As folhas de estilo devem ser utilizadas para fins de apresentação diferenciada da tabela ao invés de colunas e linhas de células vazias.
Ex:
01 | <table sumary="Material escolar - Levantamento comparativo de preços."> |
02 | <caption>Material escolar </caption> |
03 | <tr>...segue o resto da tabela... |
04 | <table sumary="Material escolar - Levantamento comparativo de preços."> |
05 | <caption>Material escolar</caption> |
07 | <th>Estojo caneta hidrocor / loja</th> |
14 | <th>Lisboa papelaria</th> |
20 | <tr>...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.
1 | <table sumary=&amp;amp;quot;Material escolar - Levantamento comparativo de preços.&amp;amp;quot;> |
2 | <caption>Material escolar</caption> |
4 | <th abbr=”hidrocor”>Estojo caneta hidrocor / loja</th> |
5 | <th>...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:
02 | <caption>.....</caption> |
04 | <tr> ...informação contida no cabeçalho... </tr> |
07 | <tr>...informação contida no rodapé... </tr> |
10 | <tr> ...primeira linha de dados do bloco um... </tr> |
11 | <tr> ...segunda linha de dados do bloco um...</tr> |
14 | <tr> ...primeira linha de dados do bloco dois... |
15 | <tr> ...segunda linha de dados do bloco dois...</tr> |
16 | <tr> ...terceira linha de dados do bloco dois...</tr> |
O número de colunas contidas no grupo pode se especificado de duas maneiras diferentes:
Utilizando o atributo “span”;
Utilizando o elemento COL;
Ex: Um grupo de 60 colunas com as mesmas características:
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.
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.
Utilizando o atributo “span”
<colgroup span="60" id="cor">
</colgroup>
Utilizando o elemento COL
<colgroup>
<col id="cor"/>
<col id="cor"/>…segue até completar 60 elementos col…
</colgroup>
Ex:
01 | <table summary=&quot;Oferta de cursos - tabela estruturada em: nome do curso, |
02 | professor, resumo da disciplina e carga horária&quot;> |
03 | <caption>Oferta de cursos - Primeiro semestre</caption> |
05 | <th id="t1” abbr="Nome">Nome do Curso</th> |
06 | <th id="t2” >Professor</th> |
07 | <th id="t3” >Resumo</th> |
08 | <th id="t4” abbr="carga”>Carga horária</th> |
11 | <td header=”t1”>Gravura – conceitos básicos</td> |
12 | <td header=”t2”>Eunice Lobato</td> |
13 | <td header=”t3”>História da gravura, estilos, gráfica. Visita aos ateliês. |
15 | <td header=”t4”>40h</td> |
18 | <td header=”t1”>Gravura em metal</td> |
19 | <td header=”t2”>Ione Rocha</td> |
20 | <td header=”t3”>Trabalhos práticos de gravura em metal. </td> |
21 | <td header=”t4”>160h</td> |
24 | <td header=”t1”>Xilogravura</td> |
25 | <td header=”t2”>Heli Santos</td> |
26 | <td header=”t3”>Trabalhos práticos em xilogravura.</td> |
27 | <td header=”t4”>160h</td> |
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 (<td></td>) 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 (<td></td>). Os leitores de tela entenderão a célula como o cabeçalho da linha.
Ex:
01 | <table summary="Oferta de cursos - tabela estruturada em: nome do curso, |
02 | professor, resumo da disciplina e carga horária"> |
03 | <caption>Oferta de cursos - Primeiro semestre</caption> |
05 | <th scope="col" abbr="Nome">Nome do Curso</th> |
06 | <th scope="col" >Professor</th> |
07 | <th scope="col">Resumo</th> |
08 | <th scope="col" abbr="carga”>Carga horária</th> |
11 | <td scope="row">Gravura – conceitos básicos</td> |
13 | <td>História da gravura, estilos, gráfica. Visita aos ateliês. </td> |
17 | <td scope="row">Gravura em metal</td> |
19 | <td>Trabalhos práticos de gravura em metal. </td> |
23 | <td scope="row">Xilogravura</td> |
25 | <td>Trabalhos práticos em xilogravura.</td> |
Nenhum comentário:
Postar um comentário