Dados e layout com tabelas
O elemento table foi introduzido com o HTML 2.0
em 1994 com a finalidade de apresentar dados tabulares como por
exemplo: tabelas de tempos, informações tabulares sobre pesos, medidas,
preços, etc.
Contudo com o passar dos tempos os Web Designers começaram a usar tabelas para controlar o layout e a apresentação das informações em uma página Web.
E assim, à época da chegada do HTML 3.2, o principal uso que se fazia das tabelas era com a finalidade de controlar a aparência da página em lugar de apresentar dados tabulares.
O uso de tabelas para construir o layout pode causar sérios e graves problemas à acessibilidade, mas graças ao trabalho de organizações como as 'Web Standards Group' estamos presenciando nos tempos atuais, uma redução neste mal uso de tabelas. Não há mais lugar para complicados layout baseados em tabelas com seus códigos intricados e confusos.
A apresentação e o layout de uma página Web deve atualmente ser controlada por uso apropriado de folhas de estilo em cascata. CSS é o caminho a seguir!
Procurando a informação
O encontro com uma tabela de dados como a mostrada a seguir é como um processo desenvolvido em três etapas:- Uma vista rápida para se conhecer o assunto da tabela ( p.ex: trata-se de uma tabela de horário de ônibus ou de preços de vegetais?)
- É uma tabela que me interessa? (É sobre preço de ervilhas em Curitiba?)
- Fornece uma informação detalhada? (Qual é o preço da ervilha por atacado em Curitiba?)
| Feijão | Ervilha | Cenoura | Tomate | |
|---|---|---|---|---|
| Curitiba | ||||
| Atacado | 1,00 | 1,25 | 1,20 | 1,00 |
| Varejo | 2,00 | 3,00 | 1,80 | 1,60 |
| Florianópolis | ||||
| Atacado | 1,20 | 1,30 | 1,00 | 0,80 |
| Varejo | 1,60 | 2,00 | 2,00 | 1,50 |
Pessoas sem problemas de visão, com um rápido passar de olhos pelo título e pelos cabeçalhos da tabela prontamente obtém resposta para os dois primeiros itens das etapas enumeradas.
Contudo para o terceiro item, há necessidade de se localizar um dado específico e isto requer que se identifique o cruzamento de cabeçalhos de uma determinada linha com uma determinada coluna.
PERGUNTA: Qual é o preço da ervilha vendida no atacado em Curitiba?
RESPOSTA: Para pessoas sem problemas de visão a resposta é fácil e imediata: 1,25.
Mas, o que dizer das pessoas com restrições visuais que se utilizam de leitores de tela para navegar na Web e obter informações em tabelas de dados?
Estas pessoas também terão acesso aos dados da tabela desde que elas (as tabelas) sejam construidas em acordo com as diretrizes de acessibilidade ao conteúdo da Web.
Leitores de tela e as tabelas
A esta altura é conveniente fazermos uma breve descrição da maneira como um leitor de tela interpreta os dados dentro de uma tabela.Ao contrário do que o nome possa sugerir, a maioria dos leitores de tela na verdade não a tela. No passado, alguns leitores de tela, tal como o "PW Webspeak", lia a tela da esquerda para a direita, linha por linha de cima para baixo e começando no canto superior esquerdo da tela, terminava a leitura no canto inferior direito. Hoje em dia, as tecnologias em uso corrente, incluido entre elas o JAWS, o mais popular leitor de tela em uso, lê a sequência do código fonte da página e não o conteúdo da tela.
Usuários do JAWS receberão as informações contidas em uma tabela de dados da seguinte maneira:
- A tabela como um todo, pode ser lida linha a linha, continuamente ou por seções selecionadas manualmente pelo usuário.
- Pressionando as teclas Atl+Ctrl+Seta esquerda (ou Seta direita) o usuário pode se movimentar ao longo das linhas e o JAWS lê o cabeçalho da coluna mais o conteúdo da célula. Podem ser lidas também de forma similar, as colunas, em movimentos para baixo e para cima.
- Com o foco em uma célula qualquer ao ser pressionada as teclas (Alt+Ctrl+Tecla numérica 5), o JAWS lê as informações sobre aquela célula. Isto é, os cabeçalhos de coluna e de linha daquela célula, mais o conteúdo da célula, se a tabela tiver sido codificada corretamente.
Identificando uma tabela
Quando você encontra uma tabela em uma página Web, normalmente existe um título ou um rótulo que a identifica, por exemplo: "Preços em reais de vegetais em Curitiba e Florianópolis". Um rápida olhada e você normalmente consegue identificar como a tabela funciona, por exemplo: produtos em uma linha em cima e cidades, varejo, na coluna esquerda.HTML fornece duas tags para orientar os usuários de leitores de tela e incrementar a acessibilidade aos dados da tabela.
Os títulos de tabelas que você encontra na Web hoje em dia são frequentemente apresentados fora da tabela em uma tag separada, normalmente os elementos cabeçalho
ou mesmo em uma célula O uso do elemento
Ao codificar uma tabela o elemento
Summary para a finalidade da tabela
Summary não é propriamente um elemento como caption, mas um atributo para o elemento table. O conteúdo desummary
não é renderizado na tela de navegadores gráficos mas serve como dado
auxiliar para entendimento da tabela para usuários de leitores de tela e
displays Braille. summary deve ser usado para descrever a finalidade
primária da tabela e dar uma indicação da sua estrutura geral. A maioria
das tecnologias assistivas lê o conteúdo de summary
fornecendo logo no início da tabela uma informação que ajudará o usuário
a interpretar a tabela. Para tabelas mais complexas o uso de summary é de muita importância.O exemplo a seguir mostra parte do código da tabela para "Preços em reais de vegetais em Curitiba e Florianópolis":
1.<table summary="Preços
em reais para vegetais importados e nacionais nas cidades de Curitiba
e de Florianópolis. Existem dois níveis de cabeçalhos de colunas.">2.<caption>3.Preços em reais de vegetais em Curitiba e Florianópolis4.</caption>Tabelas de dados simples
Em tabelas de dados, identificar os cabeçalhos de linha e de coluna. [Prioridade 1]. Por exemplo, em HTML, utilizar TD para identificar as células de dados e TH para identificar os cabeçalhos." Recomendações para a acessibilidade do conteúdo da Web - Ponto de verificação 5.1Usuários sem problemas de visão em geral fazem a leitura dos cabeçalhos no topo de uma coluna e no início de uma linha para identificar o conteúdo de uma determinada célula da tabela. Uma tarefa bem simples que requer apenas a identificação de cabeçalhos e de dados contidos na tabela.
Infelizmente as tabelas de dados encontradas na Web, frequentemente usam o elemento
Contudo as tecnologias assistivas não conseguem fazer esta diferenciação e para elas tudo que estiver marcado com a tag
HTML fornece uma maneira simples e acessível para solucionar este problema. O elemento
A tabela a seguir para preços em reais de "ameixa e pera" usa o elemento
| Ameixa preta | Pera d'água | |
|---|---|---|
| Atacado | 1,00 | 1,50 |
| Varejo | 2,00 | 2,50 |
01.<table border="1" summary="Tabela
com os preços em reais de ameixa preta e pera d'água com um nível de
cabeçalho de linha e um nível de cabeçalho de coluna">02. 03.<caption>04.Preços em reais de ameixa e pera em Campinas 05.</caption>06. 07.<tr>08.<td></td>09.<th>Ameixa preta</th>10.<th>Pera d'água</th>11.</tr>12.<tr>13.<th>Atacado</th>>14.<td>1,00</td>15.<td>1,50</td>16.</tr>17.<tr>18.<th>Varejo</th>19.<td>2,00</td>20.<td>2,50</td>21.</tr>22.</table>"atacado, um vírgula OO, um vírgula cinco O"Se o usuário desejar saber o preço por atacado para as peras o JAWS lerá a célula selecionada assim:
"column tres, row dois, peras atacado, um vírgula cinco O"
Abreviação
O atributo 'abbr' pode ser usado para abreviar um
cabeçalho longo de modo que ele não seja lido por inteiro toda vez que o
leitor de tela passe por ele. No exemplo a seguir foi usado o atributo
'abbr' para as tags 01.<table border="1" summary="Tabela
com os preços em reais de ameixa preta e pera d'água com um nível de
cabeçalho de linha e um nível de cabeçalho de coluna">02. 03.<caption>04.Preços em reais de ameixa e pera em Campinas 05.</caption>06. 07.<tr>08.<td></td>09.<th abbr="ameixa">Ameixa preta</th>10.<th abbr="pera">Pera d'água</th>11.</tr>12.<tr>13.<th>Atacado</th>14.<td>1,00</td>15.<td>1,50</td>16.</tr>17.<tr>18.<th>Varejo</th>19.<td>2,00</td>20.<td>2,50</td>21.</tr>22.</table>HTML fornece elementos que nos permitem agrupar as linhas de uma tabela em três seções distintas;
para os cabeçalhos da tabela,para o rodapé da tabela,para o corpo da tabela.
Se
Tabela de dados complexas
Em tabelas de dados com dois ou mais níveis lógicos de cabeçalhos de linha ou de coluna, utilizar marcações para associar as células de dados às células de cabeçalho. [Prioridade 1] Por exemplo, em HTML, utilizar THEAD, TFOOT e TBODY para agrupar linhas, COL e COLGROUP para agrupar colunas, e os atributos "axis", "scope" e "headers" para descrever relações mais complexas entre os dados."Tabelas contendo níveis simples de cabeçalhos de colunas e/ou linhas são bem mais fáceis de serem acessadas por usuários que se utilizam de leitores de tela. Assim, sempre que possível deve-se evitar as tabelas complexas com múltiplos níveis de cabeçalhos.
Recomendações para a acessibilidade do conteúdo da Web - Ponto de verificação 5.2
Contudo em alguns casos, tem-se que usar tabelas complexas. Algumas tabelas de dados, por exemplo; as tabelas científicas ou as tabelas de instituições financeiras em geral, requerem mais do que um nível de cabeçalhos de linhas e/ou colunas. E, mais uma vez, as pessoas sem problemas de visão não terão qualquer dificuldade em acessar tais tabelas. Contudo usuários que se utilizam de tecnologias assistivas também devem ser capazes de acessar os dados em tabelas complexas.
As duas maneiras mais comuns de se codificar tabelas com dois ou mais níveis de cabeçalhos são:
- Usar
ideheaderspara linkar o conteúdo das células com os respectivos cabeçalhos. - Usar
scopecomcol(e colgroup) e/ourow(rowgroup) para associar as células de uma coluna ou linha.
Mas, qual maneira é mais apropriada?
Em geral, tabelas mais complexas tem sido inacessíveis. Contudo quando são usados
id e headers de uma forma apropriada as tabelas tendem a ser acessíveis para a maioria dos usuários de leitores de tela. Nos tempos atuais um crescente uso de
scope, mas aparentemente esta não é a escolha de maior sucesso. id e headers HTML 4 introduziu o atributo 'headers' para as células de tabelas
id na célula de cabeçalho A tabela a seguir que consta da página de testes, para preços em reais de laranjas e maçãs usa
id e headers.| Importada | Nacional | |||
|---|---|---|---|---|
| Laranjas | Maçãs | Laranjas | Maçãs | |
| Rio de Janeiro | ||||
| Atacado | 1,00 | 1,25 | 1,20 | 1,00 |
| Varejo | 2,00 | 3,00 | 1,80 | 1,60 |
| São Paulo | ||||
| Atacado | 1,20 | 1,30 | 1,00 | 0,80 |
| Varejo | 1,60 | 2,00 | 2,00 | 1,50 |
PERGUNTA: Qual é o preço no atacado, no Rio de Janeiro, para maçãs importadas ?
O uso de
id e de headers permite que
usuários que se utilizam de leitores de tela obtenham a resposta para
esta pergunta. A codificação de parte desta tabela com os atributos id e headers é mostrada a seguir: 01.<table border="1" summary="Preços em reais no 02.varejo e no atacado para laranjas e maçãs 03.importadas e nacionais nas cidades do04.Rio de Janeiro e de São Paulo. 05.Existem dois níveis de cabeçalhos de colunas.">06. 07.<caption>08.Preços em reais para laranjas e maçãs importadas e 09.nacionais nas cidades do Rio de Janeiro 10.e de São Paulo11.</caption>12. 13.<thead>14.<tr>15.<td></td>16.<th colspan="2" id="importada"</strong>>Importada</th>17.<th colspan="2" id="nacional">Nacional</th>18.</tr>19.<tr>20.<td></td>21.<th id="laranjas-imp">Laranjas</th>22.<th id="macas-imp"</strong>>Maçãs</th>23.<th id="laranjas-dom">Laranjas</th>24.<th id="macas-dom">Maçãs</th>25.</tr>26.</thead>27.<tbody>28.<tr>29.<th id="rio"</strong> colspan="5">Rio de Janeiro</th>30.</tr>31.<tr>32.<th headers="rio" id="atacado-rio">Atacado</th>33.<td headers="importada laranjas-imp rio 34.atacado-rio">35.1,0036.</td>37.<td headers="importada macas-imp rio38.atacado-rio"</strong>>39.1,2540.</td>41.<td headers="nacional laranjas-dom rio 42.atacado-rio">43.1,2044.</td>45.<td headers="nacional macas-dom rio 46.atacado-rio">47.1,0048.</td>49.</tr>50.<tr>51.<th headers="rio" id="Varejo-rio">52.Varejo53.</th>54.... O RESTANTE DO CÓDIGO DA TABELA ...Se o foco estiver na célula certa (1,25), JAWS irá "ler a célula atual" assim:
"column três, row quatro, maçãs Rio de Janeiro atacado importada, um vírgula dois cinco "
Tabelas de dados muito complexas
A página de testes contém a seguinte tabela de dados para preços de cerejas e damasco, com três níveis de cabeçalhos para colunas e dois níveis para linhas e que usaid e headers.| Importada | Nacional | |||||
|---|---|---|---|---|---|---|
| Damascos | Cerejas | Damascos | Cerejas | |||
| Tipo A | Tipo B | Tipo A | Tipo B | |||
| Rio de Janeiro | ||||||
| Atacado | 1,00 | 9,00 | 6,00 | 1,20 | 13.00 | 9,00 |
| Varejo | 2,00 | 12,00 | 8,00 | 1,80 | 16.00 | 12,50 |
| São Paulo | ||||||
| Atacado | 1,20 | N/D | 7,00 | 1,00 | 11,00 | 6,00 |
| Varejo | 1,60 | N/D | 11,00 | 2,00 | 13.00 | 10,00 |
PERGUNTA: Qual é o preço por atacado para as cerejas importadas do tipo A na cidade do Rio de Janeiro?
A codificação de parte desta tabela com os atributos
id e headers é mostrada a seguinte: 01.<thead>02.<tr>03.<td></td>04.<th id="imp" colspan="3">Importada</th>05.<th id="dom" colspan="3">Nacional</th>06.</tr>07.<tr>08.<td></td>09.<th headers="imp" id="imp-dam">Damascos</th>10.<th headers="imp" id="imp-che" colspan="2">Cerejas</th>11.<th headers="dom" id="dom-dam">Damascos</th>12.<th headers="dom" id="dom-che" colspan="2">Cerejas</th>13.</tr>14.<tr>15.<td></td>16.<td></td>17.<th headers="imp imp-che" id="imp-che-tipoa">Tipo A</th>18.<th headers="imp imp-che" id="imp-che-tipob">Tipo B</th>19.<td></td>20.<th headers="dom dom-che" id="dom-che-tipoa">Tipo A</th>21.<th headers="dom dom-che" id="dom-che-tipob">Tipo B</th>22.</tr>23.</thead>24.... MAIS CÓDIGO ...25. 26.<tbody>27.<tr>28.<th id="rio" colspan="7">Rio de Janeiro</th>29.</tr><tr>30.<th headers="rio" id="rio-atacado">Atacado</th>31.<td headers="imp imp-dam rio rio-atacado">1,00</td>32.<td headers="imp imp-che imp-che-tipoa rio rio-atacado">9,00</td>33.<td headers="imp imp-che imp-che-tipob rio rio-atacado">6,00</td>34.<td headers="dom dom-dam rio rio-atacado">1,20</td>35.... O RESTANTE DO CÓDIGO DA TABELA ...Com o foco na célula apropriada (9,00), JAWS irá "ler a célula atual" assim:
"Row cinco, column três, importada Rio de Janeiro atacado cerejas tipo A nove vírgula O O"
Construa tabelas simples
Múltiplos níveis de cabeçalhos para colunas podem confundir usuários que se utilizam de leitores de tela. Por exemplo: JAWS lerá a tabela para damascos e cerejas assim:
"table em sete columns e nove rows" (seguido por informação geral sobre a tabela summary etc).
As três linhas de cabeçalhos para as colunas serão lidas assim:Não há qualquer indicação de que estas linhas contém cabeçalhos. E, ainda mais, os usuários ficarão em dúvida quanto ao número de colunas na tabela. O uso do atributo 'headers' nos níveis mais baixos dos cabeçalhos de colunas (como indicado no código fonte) permitirá a associação dos diferentes níveis de cabeçalhos quando o usuário comandar o JAWS a "ler a célula atual ".
- "três columns row um ..."
- cinco columns row dois ..."
- sete columns row três ..."
E, podemos acresentar que alguns resultados preliminares obtidos com a página de testes indicam que dispositivos Braille podem encontrar sérios problemas com múltiplos níveis de cabeçalhos de linhas e colunas.
Sempre que possível devem ser usadas tabelas simples; elas são mais fáceis de codificar e de serem acessadas por usuários de leitores de tela.
Evite o uso de colunas com células vazias
Em alguns casos os desenvolvedores usam colunas vazias em cabeçalhos ou dados, para obter um espaçamento entre as colunas de uma tabela.JAWS, por exemplo lê "blank" toda vez que encontra uma célula vazia e isto pode reduzir a usabilidade e a acessibilidade das tabelas de dados para usuários com leitores de tela.
CSS deve ser usado no lugar de células vazias para fins de controlar a apresentação de uma tabela de dados.
Teste de acessibilidade em tabela de dados
O uso descope, associado a col e colgroup,
é em geral uma maneira efetiva de se agrupar cabeçalhos de colunas com
suas respectivas informações e assim incrementar a acessibilidade. Usar scope com row e rowgroup
em alguns casos também é aconselhável, embora ainda haja dúvidas sobre a
melhor maneira de como se usar e qual o real benefício para aumento da
acessibilidade.A página de teste contém a tabela mostrada a seguir para "Porcas e parafusos de latão e aço" que usa
scope, col e row. | Latão | Aço | |||
|---|---|---|---|---|
| Parafusos | Porcas | Parafusos | Porcas | |
| 10cm | ||||
| Atacado | 1,00 | 1,25 | 1,20 | 1,00 |
| Varejo | 2,00 | 3,00 | 1,80 | 1,60 |
| 20cm | ||||
| Atacado | 1,20 | 1,30 | 1,00 | 0,80 |
| Varejo | 1,60 | 2,00 | 2,00 | 1,50 |
PERGUNTA: Qual é o preço por atacado das porcas de latão de 10cm?
A seguir um trecho do código desta tabela mostrando o que eu acredito ser o correto uso do atributo
scope, col e row para fornecer a resposta a pergunta acima.02.no atacado e no varejo para duas bitolas 03.de porcas e parafusos de latão e de aço.04.Existem dois níveis de cabeçalhos de 05.colunas.">06. 07.<caption>08.Preços em reais para porcas e parafusos de 09.latão e aço10.</caption>11. 12.<colgroup>13.<colgroup span="2">14.<colgroup span="2">15.<thead>16.<tr>17.<td></td>18.<th scope="colgroup" colspan="2">Latão</th>19.<th scope="colgroup" colspan="2">Aço</th20.21.<tr>22.<td></td>23.<th scope="col">Parafusos</th>24.<th scope="col">Porcas</th>25.<th scope="col">Parafusos</th>26.<th scope="col">Porcas</th>27.</tr>28.</thead>29.<tbody>30.<tr>31.<th scope="rowgroup" colspan="5">10cm</th>32.</tr>33.<tr>34.<th scope="row">Atacado</th>35.<td>1,00</td>36.<td>1,25</td>37.<td>1,20</td>38.<td>1,00</td>39.</tr>40.<tr>41.<th scope="row">Varejo</th>42.... O RESTANTE DO CÓDIGO DA TABELA ...scope.Com o foco na célula apropriada (1,25), JAWS 5.1 lerá "a célula atual " assim:
"column três, row quatro, latão atacado, um vírgula dois cinco "NB: o tamanho "10cm" e o cabeçalho "porcas" não é lido.
Com o JAWS 6.2 a leitura é assim:
"column três, row quatro, latão porcas atacado, um vírgula dois cinco"NB: o tamanho "10cm" não é lido. Eu não tenho muita experiência com o uso de
scope e ficaria imensamente grato a qualquer feedback a respeito da codificação da tabela "Porcas e parafusos de latão e de aço".
Nenhum comentário:
Postar um comentário