Tabelas HTML são uma ótima maneira de melhorar a acessibilidade da tabela HTML. Eles ajudam as pessoas a entender informações que seriam difíceis de ler de outra forma. Por exemplo, os usuários podem ver como as informações em cada célula se relacionam com outras informações na tabela, examinando-as rapidamente. Mas isso também torna mais difícil para as pessoas cegas entender como essas células se encaixam.
E se for difícil para eles chegarem às suas mesas, você impedirá que muitas pessoas usem seu produto. Podemos resolver esse problema escrevendo o código HTML corretamente para que os leitores de tela possam entendê-lo. E para fazer isso, você precisa saber como tornar as tabelas HTML mais fáceis de usar. Você aprenderá mais sobre acessibilidade de tabelas HTML e como criar tabelas acessíveis neste artigo.
Como melhorar a acessibilidade de tabelas HTML
Use os atributos alt de forma significativa
A pessoa que escreveu o conteúdo decidiu usar imagens de marca de seleção verde para mostrar quando um recurso do plano faz parte de um determinado plano, mas esqueceu de adicionar atributos alternativos. Os usuários do AT não sabem quando um recurso é adicionado porque as imagens nas células não informam nada.
Para corrigir isso, verifique se as imagens têm texto alternativo que informa ao usuário qual é a imagem é sobre. Mesmo que pareça certo, um atributo alternativo de “marca de seleção” não significaria nada. Em vez disso, usei a frase “recurso incluído”. (Embora eu ache que seria melhor usar uma fonte de ícone do que uma imagem.)
Legende essa tabela
Esta tabela parece ter uma legenda que diz “Escolha um plano, ” mas esse texto é na verdade um nível de cabeçalho h3>. Movê-lo dentro do elemento table> e marcá-lo como uma legenda> permite que tecnologias assistivas, como um leitor de tela, saibam que o texto está relacionado à tabela> programaticamente.
Incluir texto de cabeçalho para cada coluna
Neste caso, a primeira célula da tabela está vazia. Linha 1 A coluna 1 é lida pelo leitor de tela. Tudo feito. Mas e o restante das informações nessas células? É necessário um cabeçalho que diga o que são.
O autor do conteúdo não quer um cabeçalho para a coluna um do ponto de vista visual, mas os usuários do AT se beneficiam quando o nome da coluna é falado antes do conteúdo das próximas células.
Verifique seu (con)texto
Os leitores de tela nem sempre funcionam da maneira que você espera com abreviações e pontuação. Esta tabela me mostrou dois exemplos interessantes. Primeiro, o número de usuários do plano Team parece “2-50”, mas é anunciado como “250” porque o hífen não é mostrado. Para garantir que isso fique claro, podemos adicionar a palavra “para” como texto auxiliar oculto e, por segurança, podemos ocultar o hífen de AT.
O que é acessibilidade de tabela HTML?
Existem recursos que facilitam o uso de software e sites por pessoas com deficiência. Alguns desses recursos são atalhos para o teclado, conversão de texto em fala, acesso para pessoas daltônicas, legendas, áudio mono e muito mais. Então, o que exatamente é a acessibilidade da tabela HTML?
Os leitores de tela são um tipo de ferramenta de acessibilidade que ajuda as pessoas cegas a entender o que está em um site ou aplicativo. Essas ferramentas úteis leem as informações em voz alta das tags HTML. Mas como os leitores de tela entendem as tabelas HTML?
Os leitores de tela vão da esquerda para a direita e de cima para baixo ao ler tabelas HTML. Por causa disso, muitas vezes é difícil para eles descobrir onde está uma célula ou como ela se relaciona com outra célula ou com o cabeçalho. Portanto, os desenvolvedores devem escrever um código HTML correto que possa ser lido por tecnologias que ajudem pessoas com deficiências. Na próxima parte, falaremos sobre como você pode fazer isso.