Tabelas de dados acessíveis
Índice
- Dados e layout com tabelas
- Procurando a informação
- Leitores de tela e as tabelas
- Identificando uma tabela
- para o título da tabela
caption
- para a finalidade da tabela
summary
- para o título da tabela
- Tabelas de dados simples
- Tabelas de dados complexas
- Tabelas de dados muito complexas
- Construa tabelas simples
- Evite o uso de colunas com células vazias
- Teste de acessibilidade em tabela de dados
- Conclusão e pedido
- Referências e informação adicional
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!
Este artigo abordará:
- Como incrementar a acessibilidade em tabelas de dados,
- Teste que Russ Weakley e eu estamos fazendo atualmente, com a finalidade de verificar a efetiva acessibilidade em tabelas complexas codificadas de diferentes maneiras.
Muitos dos exemplos usados neste artigo são os mesmos que constam em uma página para testes que Russ e eu preparamos, e que contém tabelas de dados codificadas com diferentes esquemas de marcação para acessibilidade. Várias pessoas usando diferentes tipos de tecnologias assistivas testaram a página e os resultados preliminares destes testes apresentaremos mais adiante neste artigo.
Uma nota de alerta e um pedido; por favor não considere os exemplos de uma forma literal e absoluta. O conteúdo das tabelas foi bem simplificado e em alguns casos nós construidos deliberadamente níveis de cabeçalhos mais complexos do que o necessário.
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.
Como pode-se notar este procedimento aproxima-se bastante da maneira como uma pessoa sem problemas de visão obtém a informação em uma célula.
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.
caption
para o título 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 <h>
ou parágrafo <p>
. Em alguns casos o título é colocado dentro da tabela na linha superior <tr>
ou mesmo em uma célula <td>
. Qualquer uma destas soluções trará problemas para usuários com tecnologias assistivas.
O uso do elemento <caption>
é o caminho mais apropriado para a acessibilidade a um título de tabela. Por padrão o conteúdo de 'caption' (título da tabela) é renderizado logo acima da tabela e centrado. Contudo, CSS pode ser usada para mudar o estilo e a posição padrão do elemento <caption>
. Por exemplo: o título (caption) pode ser colocado em baixo da tabela como normalmente é usado em tabelas científicas e publicações acadêmicas.
Ao codificar uma tabela o elemento <caption>
deve ser colocado imediatamente após a tag de abertuta da tabela <table>
e antes de qualquer outra coisa.
summary
para a finalidade da tabela
summary
não é propriamente um elemento como caption, mas um atributo para o elemento table. O conteúdo de summary
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":
<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.">
<caption>
Preços em reais de vegetais em Curitiba e Florianópolis
</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.1
Usuá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 <td>
tanto para células de cabeçalhos como para células de dados (ou que contenham informação). Isto não traz qualquer tipo de problema para usuários sem restrições visuais, de vez que é relativamente fácil identificar visualmente células de cabeçalho e de dados.
Contudo as tecnologias assistivas não conseguem fazer esta diferenciação e para elas tudo que estiver marcado com a tag <td>
é dado da tabela. Como resultado disto, usuários com leitores de tela e display Braille, dependendo da tecnologia usada e da complexidade da tabela, não conseguem associar apropriadamente os dados contidos em uma célula com seus respectivos cabeçalhos.
HTML fornece uma maneira simples e acessível para solucionar este problema. O elemento <th>
deverá sempre ser usado para marcar cabeçalhos de linhas e de colunas em uma tabela de dados. (NB: <th>
não deve nunca ser usado com propósitos de layout de apresentação nas tabelas. Ponto de verificação 5.4).
A tabela a seguir para preços em reais de "ameixa e pera" usa o elemento <th>
para os cabeçalhos.
Ameixa preta | Pera d'água | |
---|---|---|
Atacado | 1,00 | 1,50 |
Varejo | 2,00 | 2,50 |
<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">
<caption>
Preços em reais de ameixa e pera em Campinas
</caption>
<tr>
<td></td>
<th>Ameixa preta</th>
<th>Pera d'água</th>
</tr>
<tr>
<th>Atacado</th>>
<td>1,00</td>
<td>1,50</td>
</tr>
<tr>
<th>Varejo</th>
<td>2,00</td>
<td>2,50</td>
</tr>
</table>
Um leitor de tela como o JAWS 5 lerá a linha 'Atacado' assim:
"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 <th>
dos cabeçalhos de colunas. Alguns leitores de tela lerão o cabeçalho completo "Ameixa preta" e "Pera d'água" a primeira vez que o encontrar, e a forma abreviada "ameixa" e "pera" as demais vezes.
<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">
<caption>
Preços em reais de ameixa e pera em Campinas
</caption>
<tr>
<td></td>
<th abbr="ameixa">Ameixa preta</th>
<th abbr="pera">Pera d'água</th>
</tr>
<tr>
<th>Atacado</th>
<td>1,00</td>
<td>1,50</td>
</tr>
<tr>
<th>Varejo</th>
<td>2,00</td>
<td>2,50</td>
</tr>
</table>
<thead>
, <tbody>
e <tfoot>
Para tabelas simples, o uso apropriado do elemento <th>
é essencial para tornar a tabela acessível. Contudo com um pouco mais de esforço, podemos incrementar a acessibilidade aos dados da tabela.
HTML fornece elementos que nos permitem agrupar as linhas de uma tabela em três seções distintas;
<thead>
para os cabeçalhos da tabela,<tfoot>
para o rodapé da tabela,<tbody>
para o corpo da tabela.
<thead>
e <tfoot>
são usados para agrupar uma linha de cabeçalhos no topo e outra no final da tabela. Estes elementos são úteis para tabelas extensas que ocupam mais de uma página uma vez que eles fazem com que o cabeçalho e o rodapé da tabela sejam impressos em cada uma das páginas. E, dependendo do navegador usado estes elementos posicionarão o cabeçalho e o rodapé fixos na tela enquando somente o corpo da tabela rola. Futuramente isto será muito útil para usuários utilizando dispositivos portáteis com telas de tamanhos reduzidos.
Se <thead>
e <tfoot>
forem usados, você deverá usar também <tbody>
para definir o corpo da tabela, que é a parte da tabela que contém as células de dados. Na verdade uma tabela poderá conter mais de um <tbody>
.
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."
Recomendações para a acessibilidade do conteúdo da Web - Ponto de verificação 5.2
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.
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
id
eheaders
para linkar o conteúdo das células com os respectivos cabeçalhos. - Usar
scope
comcol
(e colgroup) e/ourow
(rowgroup) para associar as células de uma coluna ou linha.
Mas, qual maneira é mais apropriada?
Quando eu realizo teste com a acessibilidade à tabelas de dados, eu usualmente peço para experientes usuários de leitores de tela para obter uma informação específica em uma tabela. 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 eu noto um crescente uso de scope
, mais minha experiência diz que aparentemente esta não é a escolha de maior sucesso. Mais adiante voltarei a comentar o item scope
no tema teste de diferentes esquemas de acessibilidade para tabelas de dados.
id
e headers
HTML 4 introduziu o atributo 'headers' para as células de tabelas <td>
. Este atributo é usado em conjunto com o atributo id
na célula de cabeçalho <th>
com a finalidade de associar uma ou várias células ao seus respectivos cabeçalhos.
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:
<table border="1" summary="Preços em reais no
varejo e no atacado para laranjas e maçãs
importadas e nacionais nas cidades do
Rio de Janeiro e de São Paulo.
Existem dois níveis de cabeçalhos de colunas.">
<caption>
Preços em reais para laranjas e maçãs importadas e
nacionais nas cidades do Rio de Janeiro
e de São Paulo
</caption>
<thead>
<tr>
<td></td>
<th colspan="2" id="importada">Importada</th>
<th colspan="2" id="nacional">Nacional</th>
</tr>
<tr>
<td></td>
<th id="laranjas-imp">Laranjas</th>
<th id="macas-imp">Maçãs</th>
<th id="laranjas-dom">Laranjas</th>
<th id="macas-dom">Maçãs</th>
</tr>
</thead>
<tbody>
<tr>
<th id="rio" colspan="5">Rio de Janeiro</th>
</tr>
<tr>
<th headers="rio" id="atacado-rio">Atacado</th>
<td headers="importada laranjas-imp rio
atacado-rio">
1,00
</td>
<td headers="importada macas-imp rio
atacado-rio">
1,25
</td>
<td headers="nacional laranjas-dom rio
atacado-rio">
1,20
</td>
<td headers="nacional macas-dom rio
atacado-rio">
1,00
</td>
</tr>
<tr>
<th headers="rio" id="Varejo-rio">
Varejo
</th>
... O RESTANTE DO CÓDIGO DA TABELA ...
Usando uma combinação de teclas do teclado, a maioria dos usuários do JAWS estará apta a localizar a célula que contém a informação requerida. Poderão também confirmar se acessaram a célula correta, instruindo o JAWS para "ler a célula atual ".
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 usa id
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:
<thead>
<tr>
<td></td>
<th id="imp" colspan="3">Importada</th>
<th id="dom" colspan="3">Nacional</th>
</tr>
<tr>
<td></td>
<th headers="imp" id="imp-dam">Damascos</th>
<th headers="imp" id="imp-che" colspan="2">Cerejas</th>
<th headers="dom" id="dom-dam">Damascos</th>
<th headers="dom" id="dom-che" colspan="2">Cerejas</th>
</tr>
<tr>
<td></td>
<td></td>
<th headers="imp imp-che" id="imp-che-tipoa">Tipo A</th>
<th headers="imp imp-che" id="imp-che-tipob">Tipo B</th>
<td></td>
<th headers="dom dom-che" id="dom-che-tipoa">Tipo A</th>
<th headers="dom dom-che" id="dom-che-tipob">Tipo B</th>
</tr>
</thead>
... MAIS CÓDIGO ...
<tbody>
<tr>
<th id="rio" colspan="7">Rio de Janeiro</th>
</tr><tr>
<th headers="rio" id="rio-atacado">Atacado</th>
<td headers="imp imp-dam rio rio-atacado">1,00</td>
<td headers="imp imp-che imp-che-tipoa rio rio-atacado">9,00</td>
<td headers="imp imp-che imp-che-tipob rio rio-atacado">6,00</td>
<td headers="dom dom-dam rio rio-atacado">1,20</td>
... O RESTANTE DO CÓDIGO DA TABELA ...
Embora a estrutura desta tabela seja complexa, o uso de combinação de teclas do teclado por usuários do JAWS permitirá acessar a informação na célula requerida.
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
Como já ressaltamos anteriormente, 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:
- "três columns row um ..."
- cinco columns row dois ..."
- sete columns row três ..."
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 ".
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
Russ Weakley e eu preparamos uma página de testes para acessibilidade em tabelas com a finalidade de testar diferentes maneiras de codificar uma tabela, tornando-as acessível aos usuários de leitores de tela e dispositivos Braille. A página contém quatro tabelas, uma tabela simples e três tabelas complexas com mais de um nível de cabeçalhos de linhas e de colunas.
Nós solicitamos às pessoas interessadas para testar as tabelas com suas tecnologias assistivas e nos enviar seus comentários sobre a acessibilidade às diferentes tabelas.
Nós somos muito gratos ao valioso feedback recebido de:
- Andrew Downie
- Roger Johansson
- Patrick Lauke
- Bruce Maguire
- David Woodbridge
Mas, nós queremos mais.
Se você estiver interessado em colaborar, consulte a página de teste com as tabelas traduzidas ou se preferir a página de teste com as tabelas originais
Duas das tabelas complexas na página de teste usam id
e headers
para associar cabeçalhos com células. A outra tabela usa scope
com col
e row
para associar todas as células de uma coluna ou linha.
Até o presente as tabelas foram testadas com os seguintes leitores de tela:
- JAWS Versions, 4.02, 5.1, 6.0 and 6.2 (JAWS é o mais popular leitor de tela na Austrália).
- Window-Eyes 5.0.
- Connect Outloud 2.0.
Todos estes leitores puderam acessar efetivamente as tabelas complexas que usam id
e headers
. Os resultados obtidos com a leitura destas tabelas pelo JAWS, estão descritos neste artigo. O suporte para scope
no entanto, é precário.
scope
, col
e row
O uso de scope
, 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
. (Eu, em geral não uso scope
, assim peço por favor informar se nesta tabela eu usei corretamente scope)
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.
<table border="1" summary="Preços em reais
no atacado e no varejo para duas bitolas
de porcas e parafusos de latão e de aço.
Existem dois níveis de cabeçalhos de
colunas.">
<caption>
Preços em reais para porcas e parafusos de
latão e aço
</caption>
<colgroup>
<colgroup span="2">
<colgroup span="2">
<thead>
<tr>
<td></td>
<th scope="colgroup" colspan="2">Latão</th>
<th scope="colgroup" colspan="2">Aço</th
</tr>
<tr>
<td></td>
<th scope="col">Parafusos</th>
<th scope="col">Porcas</th>
<th scope="col">Parafusos</th>
<th scope="col">Porcas</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="5">10cm</th>
</tr>
<tr>
<th scope="row">Atacado</th>
<td>1,00</td>
<td>1,25</td>
<td>1,20</td>
<td>1,00</td>
</tr>
<tr>
<th scope="row">Varejo</th>
... O RESTANTE DO CÓDIGO DA TABELA ...
Parece não ser possível a um usuário de leitor de tela obter o "Preço por atacado para porcas de latão com 10cm" nesta tabela marcada com uso de 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".
Windows-Eyes parece não dar suporte a scope
.
Conclusão e pedido
Antes de tudo eu gostaria de mais uma vez ressaltar a importância de se construir tabelas o mais simples possível. Tabelas de dados com mais de um nível de cabeçalho são difíceis de se codificar e mais difíceis ainda de serem acessadas por usuários com tecnologias assistivas
Até o presente, parece que o uso de id
e headers
é a maneira mais efetiva de se codificar de forma a tornar acessíveis, tabelas de dados complexas. Embora o uso de id
e headers
seja uma maneira um pouco mais difícil de se codificar do que com uso de scope
, o precário suporte oferecido pelos leitores de tela para esta última maneira faz com que não seja provavelmente uma opção efetiva para a acessibilidade.
Para finalizar, faço um pedido: se você tiver um tempo dê uma olhada na página de teste para acessibilidade em tabelas e se possível faça seus testes com diferentes tecnologias. Eu ficaria muito grato por qualquer feedback sobre o código que usei nas tabelas e como os leitores de tela e dispositivos Braille acessam aquela tabelas.
Referências e informações adicionais
LIVROS
- Clark, Joe. 2003. "Building Accessible Websites" New Riders Publishing, Indiana.
- Paciello, Michael. 2000. "Web Accessibility for People with Disabilities", CMP Books, Kansas.
- Slatin, John and Rush, Sharon. 2003. "Maximum Accessibility", Addison-Wesley, Boston.
WEBSITES
- World Wide Web Consortium. "Web Content Accessibility Guidelines 1.0."
- Thatcher, Jim. "Web Accessibility for Section 508".
- Byrne, Jim. "Table Manners: Creating accessible tables for both layout and data".
- Webaim. "Creating Accessible tables"
- Ferg, Stephen. "Techniques for Accessible HTML tables"
Conheça os livros do Maujor®
Ir para a página de entrada nos sites dos livros.