Texto traduzido e adaptado por Eli Maciel e Giovana Villari*
Se você não usa softwares leitores de tela, vamos fazer de conta, por um momento, que sim. Você é estudante e entra em um site para saber onde a aula de Biologia da instituição onde você estuda será realizada. Você acessa uma página da web em que constam essas informações, e isso é o que você ouve:
| Tabela com 10 colunas e 7 linhas. Código do Departamento, Número da Turma, Seção, Matrícula Máxima, Matrícula Atual, Número da Sala, Dias, Hora de Início, Hora de Término, Instrutor, BIO, 100, 1, 15, 13, 5, Seg, Qua, Sex, 10:00, 11:00, Magda, 100, 2, 15, 7, 5, Ter, Qui, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Ter, Qui, 09:00, 10:30, Magda, 315, 1, 12, 3, 6, Seg, Qua, Sex, 13:00, 14:00, Íngrid, BUS, 150, 1, 15, 15, 13, Seg, Qua, Sex, 09:00, 10:00, Roberto, 210, 1, 10, 9, 13, Seg, Qua, Sex, 08:00, 09:00, Vinícius. |
Após ouvir essas informações, você tem alguma ideia de onde a aula de Biologia vai acontecer? Provavelmente não. Quando você ouve tabelas sem interagir com o modo de leitura para este tipo de documento em um leitor de tela, a informação pode ser bastante confusa. Mesmo quando você entra no modo de leitura de tabelas, ainda pode ser complexo se ela não estiver marcada adequadamente.
Neste texto traduzido e adaptado do site do WebAim há uma série de explicações, dicas e recomendações para você criar tabelas em sites muito mais acessíveis a todas as pessoas. WebAIM é uma organização sem fins lucrativos baseada no Instituto de Pesquisa, Política e Prática sobre Deficiência da Universidade Estadual de Utah, nos Estados Unidos. É uma das principais referências em acessibilidade digital no mundo.
Tabelas de layout versus Tabelas de dados
Existem dois usos básicos para tabelas na web: tabelas de dados e tabelas de layout. O uso original pretendido das tabelas HTML servia para dados tabulares. Uma tabela é uma tabela de dados quando cabeçalhos de linha, cabeçalhos de coluna ou ambos estão presentes. Por exemplo:
Filhas da Shelly
| Nome | Idade | Aniversário |
| Jackie | 5 | 5 de abril |
| Beth | 8 | 14 de janeiro |
As tabelas também são comumente usadas para o layout da página. Tabelas de layout não têm cabeçalhos lógicos que podem ser associados às informações nas células da tabela. Esse tipo de tabela era tradicionalmente usado para superar limitações na apresentação visual e no layout usando HTML. Com CSS, no entanto, há muito mais flexibilidade no controle do layout da página, então é melhor não usar tabelas para isso. O uso de CSS resulta em um código HTML mais limpo e simples, melhor adaptabilidade de uso pelas pessoas usuárias finais e poucos problemas de acessibilidade potenciais. Além disso, importante reforçar que tabelas de layout não devem ser usadas no HTML5.
Às vezes, é sugerido, até mesmo por alguns grupos defensores da acessibilidade, que tabelas de layout sejam ruins. Na realidade, elas não apresentam problemas inerentes de acessibilidade. Certamente, há coisas piores que você poderia fazer em termos de acessibilidade. Pessoas com todos os tipos de deficiências podem acessar facilmente tabelas de layout, desde que elas sejam projetadas com a acessibilidade em mente – garantindo uma ordem de leitura linear adequada, dimensionamento de conteúdo etc.
Linearização de Tabelas de Layout
A linearização de conteúdo refere-se à ordem do conteúdo quando toda a formatação é removida. Tanto para tabelas de dados quanto para tabelas de layout, a ordem em que o conteúdo é apresentado pode afetar seu significado. Muitos sites usam tabelas para layout, e a maioria delas usa linhas e colunas expandidas para obter efeitos de formatação. O resultado final é que a ordem de leitura linearizada pode não ser a mesma que a ordem de leitura visual. Isso pode confundir pessoas que acessam a ordem de leitura e navegação linearizada, como quem usa leitores de tela ou navega por meio do teclado.
Os leitores de tela essencialmente ignoram o fato de que o conteúdo está dentro de uma tabela. O leitor de tela apenas lê o conteúdo na ordem literal em que aparece no código. Se a ordem literal do conteúdo no código for lógica, então sua ordem de leitura linearizada será lógica.
Importante
Os leitores de tela tratam tabelas de layout e tabelas de dados de maneiras diferentes. Para tabelas de layout, as ferramentas simplesmente leem o conteúdo da tabela com base na ordem do código-fonte. Para tabelas de dados, no entanto, eles identificarão a presença da tabela, incluindo o número de colunas e linhas, fornecerão funcionalidade de navegação na tabela, lerão cabeçalhos de linha e coluna etc.
Então, como um leitor de tela sabe se uma tabela é uma tabela de dados ou uma tabela de layout?
Eles realizam uma análise da marcação e estrutura da tabela para ‘adivinhar’. Por causa disso, é de extrema importância que a marcação de tabelas de dados, como <caption>, <th> etc. nunca seja usada em tabelas de layout, caso contrário, o leitor de tela pode apresentar incorretamente a tabela como uma tabela de dados, causando sobrecarga e confusão para quem navega.
Dimensionamento de tabelas de layout
Quando quem produz as tabelas usa tabelas para layout, geralmente faz isso para obter um controle mais supostamente preciso e flexível sobre a posição dos elementos na página. Ao fazer isso, as tabelas de layout geralmente definem valores em pixels para tentar controlar posições exatas. Como há uma enorme variedade de navegadores e dispositivos de pessoas usuárias finais, desde navegadores móveis apenas de texto até telas grandes de alta definição, definir tamanhos baseados em pixels é muito limitante.
Uma preocupação primordial das tabelas de layout é a falta de flexibilidade para acomodar ajustes de conteúdo, principalmente o redimensionamento de texto por quem tem baixa visão. Se o texto dentro de uma célula de tabela em pixels for ampliado por essas pessoas, isso pode causar problemas de legibilidade, especialmente se o texto não couber mais nas dimensões em pixels definidas. Isso pode resultar em barras de rolagem horizontal, texto saindo da célula e se sobrepondo a outros componentes da página. Se você estiver usando tabelas de layout, certifique-se de que a estrutura da tabela permita a personalização por quem vai navegar naquele ambiente e o redimensionamento de texto.
Use a configuração de tabela mais simples possível
Às vezes, designers exageram com as tabelas de layout, criando todo tipo de tabelas aninhadas e linhas e colunas desnecessárias, usando linhas e colunas expandidas de todas as maneiras, até que a tabela nem pareça mais uma tabela. Tudo isso pode ser invisível para quem enxerga se as bordas da tabela estiverem definidas como zero, mas pessoas cegas identificarão tudo. Seus leitores de tela vão informar sobre o número de linhas e colunas na tabela. Quando tentam navegar de uma área para outra dentro da tabela, podem se perder ou sentir confusão naquela navegação. A regra geral aqui é: quanto mais simples, melhor.
Marcação de tabelas de dados
O propósito das tabelas de dados é apresentar informações tabulares em uma grade, ou matriz, e ter colunas, ou linhas, que mostram o significado das informações na grade. Quem enxerga pode escanear uma tabela visualmente e, rapidamente, fazer associações visuais entre os dados na tabela e seus cabeçalhos de coluna e/ou linha apropriados.
Alguém que não pode ver a tabela não pode fazer essas associações visuais, então a marcação adequada deve ser usada para criar uma associação programática entre os elementos dentro da tabela. Quando a marcação HTML adequada está no lugar, quem usa leitores de tela pode navegar por tabelas de dados uma célula de cada vez, e ouvirá os cabeçalhos de coluna e linha sendo falados.
Legendas de tabela
Tabelas de dados frequentemente têm um texto descritivo breve antes ou depois da tabela que indica o conteúdo dessa tabela. Este texto deve ser associado à sua respectiva tabela usando o elemento <caption>. O elemento <caption> deve ser a primeira coisa após a abertura da tag <table>.
<table>
<caption>Filhas da Shelly</caption>
…
Embora não seja necessário que cada tabela tenha uma legenda, uma legenda geralmente é muito útil. Se estiver presente, deve ser associada à tabela usando o elemento <caption>.
Identificar cabeçalhos de linha e coluna
Um passo crítico para criar uma tabela de dados acessível é designar cabeçalhos de linha e/ou coluna. Na marcação, o elemento <td> é usado para células de dados da tabela e o elemento <th> é usado para células de cabeçalho da tabela. Voltando ao nosso exemplo original de tabela de dados, os cabeçalhos de coluna para esta tabela são Nome, Idade e Aniversário. Os cabeçalhos de linha são Jackie e Beth. Observe também a legenda associada.
Cabeçalhos de tabela nunca devem estar vazios. Isso é particularmente preocupante para a célula superior esquerda de algumas tabelas.
Associar as células de dados aos cabeçalhos adequados
Agora que criamos cabeçalhos, precisamos associar as células de dados aos cabeçalhos apropriados.
O atributo “scope”
O atributo “scope” identifica se um cabeçalho de tabela é um cabeçalho de coluna ou um cabeçalho de linha. Aqui está a marcação para a tabela, usando o atributo “scope”:
<table>
<caption>Filhas da Shelly</caption>
<tr>
<th scope=”col”>Nome</th>
<th scope=”col”>Idade</th>
<th scope=”col”>Aniversário</th>
</tr>
<tr>
<th scope=”row”>Jackie</th>
<td>5</td>
<td>5 de abril</td>
</tr>
<tr>
<th scope=”row”>Beth</th>
<td>8</td>
<td>14 de janeiro</td>
</tr>
</table>
O atributo “scope” informa ao navegador e ao leitor de tela que tudo dentro de uma coluna está associado ao cabeçalho com “scope=”col” nessa coluna, e que uma célula com “scope=”row” é um cabeçalho para todas as células nessa linha.
Todos os elementos <th> geralmente devem sempre ter um atributo “scope”. Embora os leitores de tela possam adivinhar corretamente se um cabeçalho é um cabeçalho de coluna ou um cabeçalho de linha com base no layout da tabela, atribuir um “scope” torna isso explícito.
Cabeçalhos abrangentes
O atributo “scope” se aplicará mesmo se a tabela for complexa, com múltiplos níveis de cabeçalhos (como em células expandidas). O escopo de um cabeçalho de tabela se aplicará a todas as células sobre as quais esse cabeçalho se estende.
Nota
Apesar de ser uma marcação padrão para tabelas por muitos anos, alguns leitores de tela ainda não oferecem suporte completo para tabelas complexas com células expandidas ou múltiplos níveis de cabeçalhos de linha e/ou coluna. Quando possível, tente “simplificar” a tabela e evite células expandidas e múltiplos níveis de células de cabeçalho.
Os cabeçalhos e os atributos “id”
Outra maneira de associar células de dados e cabeçalhos é usar os atributos “headers” e “id”. Este método geralmente não é recomendado, pois o “scope” é suficiente para a maioria das tabelas, mesmo se a tabela for complexa com múltiplos níveis de cabeçalhos de linha e/ou coluna.
Em tabelas extremamente complexas, onde o “scope” pode fazer com que os cabeçalhos de tabela se apliquem a (ou tenham um escopo para) células que não devem ser associadas a esse cabeçalho, então os atributos “headers” e “id” podem ser usados. Nesses casos, embora os atributos “headers” e “id” possam tornar a tabela tecnicamente acessível, se houver múltiplos níveis de cabeçalhos de linha e/ou coluna sendo lidos, provavelmente não será funcionalmente acessível e compreensível para quem usa leitor de tela.
Com essa abordagem, cada elemento <th> recebe um valor único no atributo “id”. Em seguida, cada célula <td> dentro da tabela recebe um atributo “headers” com valores que correspondem a cada valor de “id” do <th> ao qual a célula está associada. Os valores são separados por espaços e devem ser listados na ordem em que um leitor de tela deve lê-los. Se estiver usando “headers/id” no exemplo acima, a célula com a idade de Jackie pode ser marcada como <td headers=”birth jackie age”>5</td>).
Novamente, enfatiza-se que este método é mais complexo, usa muito mais marcação (e tem potencial para se tornar problemático) e raramente é necessário (use “scope” em vez disso).
Use tamanhos proporcionais ao invés de tamanhos absolutos
A regra que se aplica a tabelas de layout também se aplica a tabelas de dados. Deixe a janela do navegador determinar a largura da tabela sempre que possível, para reduzir a rolagem horizontal necessária para as pessoas com baixa visão. Se as larguras das células precisarem ser definidas, use valores relativos, como porcentagens, ao invés de valores em pixels.
Evite definir alturas de células, para que a célula possa se expandir para baixo para acomodar seu conteúdo – algo especialmente útil para quem tem baixa visão e pode aumentar o tamanho do texto.
Outra marcação de tabela
Resumo
O atributo “summary” da tag <table> pode ser usado para fornecer um resumo da estrutura de uma tabela de dados (não do conteúdo). O suporte ao “summary” varia, mas, em geral, é específico para leitores de tela (não é acessível para mais ninguém) e não é recomendado. Além disso, o atributo “summary” não faz parte da especificação HTML5.
Em geral, se uma tabela for tão complexa que precisa de uma explicação de como está estruturada, provavelmente não é muito acessível e deve ser simplificada e repensada. Por essas razões, não recomendamos o uso do “summary”. Se for usado, nunca deve ser usado em tabelas de layout.
thead, tfoot e tbody
Os elementos “thead” e “tfoot” definem linhas de cabeçalho e rodapé para tabelas. Eles não fornecem nenhuma funcionalidade de acessibilidade e geralmente só são úteis quando uma tabela longa é impressa – as linhas de cabeçalho e/ou rodapé se repetirão no topo ou na parte inferior de cada página impressa. Da mesma forma, o elemento “tbody” define o conteúdo principal de uma tabela de dados (ou seja, tudo o que não é “thead” ou “tfoot”). Novamente, esse elemento não oferece nenhum benefício adicional de acessibilidade, mas não há problema em usá-lo para a estilização da tabela ou por outros motivos.
*Eli Maciel é gerente de pessoas e projetos de comunicação digital. Giovana Villari é gerente de projetos e também colaborou nesta matéria. As duas integram a Liga Voluntária do Movimento Web para Todos.