12 Problemas Comuns de Acessibilidade Web para Deficiência Visual
Collection :
É de conhecimento geral hoje que a acessibilidade web é um direito humano básico. Além de abrir seu site para um público mais amplo de mais de 1 bilhão de pessoas com deficiências, as melhores práticas de acessibilidade estão alinhadas com outros objetivos de negócio, como SEO, usabilidade, designs compatíveis com dispositivos móveis e muito mais. O padrão para acessibilidade web é regido pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG).
De acordo com os Centros de Controle de Doenças, a deficiência visual está entre as 10 principais deficiências entre adultos com mais de 18 anos e é uma das deficiências mais comuns entre crianças. As deficiências visuais abrangem uma ampla gama de distúrbios e doenças, como cegueira total, daltonismo, erros refrativos (miopia, hipermetropia e astigmatismo), distúrbios relacionados à idade como glaucoma, catarata e degeneração macular, bem como deficiências como ambliopia ("olho preguiçoso") ou estrabismo (olhos voltados para fora ou para dentro).
Como pessoas com deficiência visual acessam a internet
A web é um meio muito visual, então deficiências visuais podem causar problemas de acessibilidade significativos. Pessoas com deficiência visual usam tecnologias assistivas como leitores de tela, ferramentas de ampliação de tela ou displays braille atualizáveis para acessar a internet.
Um leitor de tela é um tipo de software que trabalha com o sistema operacional para fornecer informações sobre ícones, menus, arquivos, pastas e caixas de diálogo. Como os leitores de tela não dependem de mouse, geralmente operam respondendo a vários comandos de teclado. Por exemplo, um comando pode permitir que um leitor navegue por uma página web, leia parte de um documento ou faça uma seleção. Todos os sistemas operacionais agora vêm com leitores de tela. Também existem alguns leitores de tela comerciais, como o popular software JAWS (Job Access With Speech). Os leitores de tela podem ler todo ou parte do texto visível em uma página, ler determinado texto que não é visível para usuários com visão (como texto alternativo) e detectar formatação de texto dentro de um documento. Para fazer todas essas coisas, no entanto, o site deve ser codificado para acessibilidade.
Um display braille atualizável permite que usuários com deficiência visual leiam saídas de texto em uma tela através do levantamento e abaixamento de pinos através de furos em uma superfície plana em combinações braille. Displays braille atualizáveis são usados junto com software de leitor de tela que coleta informações de conteúdo de uma página web e as converte em caracteres braille para serem exibidos.
Os problemas de acessibilidade web para pessoas com deficiência visual ocorrem quando encontram um site que não foi codificado para ser navegável por teclado e para suportar tecnologia assistiva. Ter código bem estruturado é extremamente importante para que o software de leitor de tela funcione adequadamente, pois a presença de certas partes do código ativará um comando. Por exemplo, se um leitor de tela detectar o código para uma tabela de informações em uma página, ele ativará comandos como aqueles que permitem que a tabela seja navegada horizontal ou verticalmente.
12 problemas comuns de acessibilidade para usuários com deficiência visual
Aqui estão os problemas digitais mais comuns que pessoas com deficiência visual encontram ao usar uma web que não foi tornada acessível ou codificada para acomodar tecnologia assistiva.
1. Layout HTML
Alguns leitores de tela são capazes de detectar e ler o CSS de uma página. No entanto, outros dependem do HTML sem estilo. Isso pode criar problemas quando o leitor de tela está determinando o que deve ser lido primeiro na página. Para evitar esse problema, todo HTML deve ser estruturado da mesma forma que um documento impresso seria estruturado, para que faça sentido quando lido da esquerda para direita, de cima para baixo.
2. Contraste de texto
Uma das preocupações de acessibilidade mais comuns é o baixo contraste de cores entre texto e fundos. O contraste de cores é um elemento essencial da acessibilidade web, pois ajuda os usuários a perceberem o conteúdo em uma página. De acordo com o WCAG 2, contraste é a diferença de brilho entre duas cores. Baixo contraste no texto é um problema comum de acessibilidade, pois pessoas com baixa sensibilidade de contraste, como pessoas idosas, ou pessoas com daltonismo podem não conseguir distinguir entre texto e fundo de certas cores com baixa proporção de contraste.
Em fevereiro de 2021, o WebAIM conduziu uma avaliação da acessibilidade de um milhão de páginas iniciais de sites e descobriu que 86,4% das páginas iniciais tinham texto com baixo contraste. De acordo com o WCAG 2.1 nível AA, a proporção ideal de contraste de cor é 7:1 para texto normal e 4,5:1 para texto grande.
O baixo contraste é um problema fácil de corrigir adaptando o design e temas do seu site para combinações de cores acessíveis. Existem muitas ferramentas gratuitas de acessibilidade como o Verificador de Contraste de Cores do Acquia Web Governance que você pode usar para verificar se há contraste suficiente entre seu texto e o fundo.
3. Estrutura de títulos
Usuários de sites com deficiência visual raramente leem uma página web inteira. Em vez disso, eles examinam a página procurando as partes que mais lhes interessam. Eles também podem examinar páginas web para informações pertinentes usando seu leitor de tela para listar títulos. Se os títulos não forem usados adequadamente (ou de forma alguma), então o usuário não conseguirá encontrar o que procura na página. É por isso que você nunca deve usar títulos decorativamente e deve colocá-los de maneira lógica descendente na página (H1, H2, H3, etc.).
4. Acessibilidade do teclado
Usar um mouse para navegar em um site pode ser difícil ou mesmo impossível para pessoas com deficiência visual, então, em vez disso, eles usam o teclado para navegar. Pessoas com deficiência visual podem percorrer um site usando comandos e atalhos de teclado. No entanto, um site terá que ter conteúdo bem estruturado com estruturas de títulos apropriadas e codificado para permitir acesso por teclado a todo conteúdo e funcionalidade, como hyperlinks, links, formulários e controles de mídia.
Usuários de teclado usam a tecla Tab para navegar pela página e, ao fazê-lo, precisa haver um indicador de foco de teclado visível que mostre a eles em qual elemento estão na página. Esses indicadores aparecem como uma borda ou como um destaque ao redor do elemento focado, ajudando aqueles com baixa visão a determinar onde estão na página web. É importante que o site seja codificado para navegação por teclado, pois o indicador de foco precisa seguir uma ordem de leitura lógica.
5. Links de navegação
Links de navegação também são um problema de acessibilidade. Leitores de tela são incapazes de detectar navegação se não for bem codificada. E quando é encontrada em uma página, um leitor de tela não saberá para pular sobre ela. Isso significa que usuários com deficiência visual terão que ouvir a navegação toda vez que carregarem uma nova página. Uma solução para isso é atribuir com precisão funções ARIA aos menus de navegação para indicar seu propósito e torná-los navegáveis. Além disso, certifique-se de que um link "Pular para o conteúdo principal" esteja disponível para que a navegação possa ser pulada por usuários de leitores de tela.
6. Conteúdo não-HTML
Problemas de acessibilidade também se estendem ao conteúdo como documentos hospedados em um site. Conteúdo não-HTML como PDFs, apresentações do Microsoft PowerPoint ou documentos do Word, também devem ser tornados o mais acessíveis possível. Há maneiras de tornar alguns desses documentos acessíveis: PDFs, por exemplo, podem ser marcados para navegação por um leitor de tela, enquanto PowerPoint e Word oferecem uma função de Verificador de Acessibilidade dentro do software para criar documentos acessíveis.
7. Renderização JavaScript
JavaScript costumava ser completamente inacessível a leitores de tela, mas agora, a maioria dos leitores de tela pode acessá-lo. No entanto, é importante notar que algumas pessoas podem ter JavaScript desabilitado ou estar em um ambiente (como um local de trabalho corporativo) onde está desligado. Usuários também podem estar usando versões mais antigas de leitores de tela que não conseguem lidar com JavaScript. Por esse motivo, é importante certificar-se de que seu site ainda funcione sem JavaScript.
8. Texto alternativo ausente (ou impreciso)
Tornar um site acessível não significa que você precisa abrir mão de imagens. Apenas significa que seus editores de site precisam ser cuidadosos sobre como atribuem tags alt às imagens. O texto alternativo deve descrever claramente que informação a imagem transmite. Mantenha as descrições curtas e concisas, pois usuários de leitores de tela tendem a navegar pelo conteúdo rapidamente. Seus editores também precisam saber que leitores de tela lerão o texto alt primeiro antes de ler a legenda da imagem (se ela tiver uma). Se a legenda e o texto alt forem idênticos, então o usuário ouvirá a mesma informação duas vezes! Embora isso seja tecnicamente compatível, ainda não é uma ótima experiência de usuário.
Para imagens decorativas, inclua um texto alt vazio (alt=" ") ou nulo (alt="") no código HTML. Isso dirá ao leitor de tela para pular a imagem.
Note que texto alt ausente impacta negativamente seu site de outras maneiras também, como diminuir seu SEO. Se sua imagem estiver sem texto alt ou com um atributo vazio/nulo, o leitor de tela ainda anunciará a imagem sem nenhuma descrição, o que pode torná-la muito confusa para o usuário.
9. Texto de link ausente
Links são cruciais para navegar na web, mas trazem seu próprio conjunto de problemas de acessibilidade. Texto de link ausente é um obstáculo comum para pessoas com deficiência visual. Isso ocorre quando não há texto usado para descrever ou apresentar o link. Isso pode acontecer quando imagens funcionais como botões, logos, ícones ou outras imagens são usadas como links. Um leitor de tela, no entanto, não consegue ler que essas imagens funcionam como links.
Para evitar que isso aconteça, o texto alt da imagem deve transmitir o propósito da imagem e a ação que será executada, em vez de apenas uma descrição da imagem. Por exemplo, para uma imagem de um logo que deve levar à página inicial, o texto alt deve ser "página inicial de *nome do site*.com" em vez de apenas "logo *nome do site*".
10. Texto de link ambíguo
Texto de link vago como "Clique Aqui" ou "Mais", ou apenas exibir o link inteiro, pode fazer sentido para usuários videntes de um site onde o conteúdo visual pode fornecer contexto, mas para usuários de leitores de tela, esses textos de link são exemplos de experiência de usuário terrível. Independentemente do texto que precede esses links vagos, ainda não transmite informações suficientes ao usuário. Como usuários de leitores de tela têm a habilidade de navegar de link em link, pulando o texto entre eles, eles não fornecem contexto sobre o que é o link e para onde os levará. Isso é facilmente corrigido usando texto informativo que forneça algum detalhe sobre o que é o link.
11. Formulários mal estruturados
A maioria dos sites tem campos de formulário para os usuários preencherem (uma caixa de busca sendo um exemplo de formulário) e esses campos de formulário frequentemente apresentam problemas de acessibilidade para pessoas com deficiência visual. Um dos maiores problemas com formulários é que eles frequentemente não têm os rótulos e instruções corretas que leitores de tela precisam para transmitir informações sobre o formulário. Cada campo precisa de um rótulo acessível para o leitor de tela ler, para que o usuário saiba o que preencher. Os botões também precisam de texto claro para que o usuário saiba o que selecionar após completar o formulário. Se você estiver usando CAPTCHAs, então precisa haver uma alternativa de áudio ou outra alternativa acessível para usuários com deficiência visual.
Além disso, pense sobre o que acontece quando o formulário é preenchido incorretamente. Comumente, sites retornarão o formulário com os campos incorretos em vermelho. Isso obviamente apresenta um problema de acessibilidade para aqueles que não conseguem ver o campo vermelho. Em vez disso, deve haver texto para ser lido que explique qual parte do formulário retornou o erro.
12. Expirações de formulário e time-outs
Muitos formulários têm funções de segurança que fazem a página ou o formulário expirar após um certo tempo. No entanto, para aqueles que usam tecnologia assistiva para preencher formulários, o processo pode demorar mais e eles podem não saber que há um limite de tempo. Remova os time-outs nos formulários, forneça informações suficientes de que o formulário tem limite de tempo, ou forneça a funcionalidade para usuários de tecnologia assistiva estenderem o limite de tempo para finalizar o processo.
Esses problemas de acessibilidade, embora comuns, são relativamente fáceis de corrigir e evitar uma vez que você está ciente deles. Educar-se sobre os fundamentos da acessibilidade web e fazer uso dos vários softwares de auditoria de acessibilidade web disponíveis, como o Acquia Web Governance da Acquia, pode ajudar tanto a encontrar problemas se eles passarem despercebidos, quanto ajudar você a resolvê-los antes que seus usuários os encontrem.
Procurando uma solução completa para acessibilidade web? A Acquia pode ajudar. Veja como podemos ajudar você a alcançar um site acessível com uma auditoria gratuita de acessibilidade web.
