6 Maneiras Simples de Melhorar a Acessibilidade na Web

Praticamente todo mundo sabe que a experiência do usuário (UX) é uma consideração importante ao criar um site ou aplicativo. Ninguém quer usar um aplicativo não intuitivo com uma interface de usuário (UI) terrível.

Mas e a experiência do usuário de pessoas com deficiência?

Desde o início dos anos 2000, o movimento de acessibilidade na web tem defendido o design de sites que considera as necessidades de pessoas com deficiência. Algumas empresas foram levadas a tribunal por manterem sites inacessíveis, com os demandantes citando disposições da Lei dos Americanos com Deficiências.

A acessibilidade na web está crescendo como um campo de estudo, e os profissionais estão prestando atenção. A acessibilidade na web está se tornando mais importante para empresas e desenvolvedores, e alguns designers de UX começaram a incorporar o design acessível em seu trabalho.

No entanto, a acessibilidade na web e suas práticas ainda são um mistério para a maioria das pessoas.

Quais são as práticas de acessibilidade? Como um site é construído com a acessibilidade em mente? Quais tecnologias as pessoas com deficiência usam para acessar a internet e como podemos construir sites com essas tecnologias em mente?

Como melhorar a acessibilidade na web

Antes de trabalhar na acessibilidade de um site, primeiro considere os tipos de deficiência para os quais você está otimizando. Normalmente, as considerações de acessibilidade são destinadas a atender às necessidades daqueles com as seguintes condições:

• Deficiências visuais (baixa visão, cegueira parcial ou total, daltonismo)
• Deficiências auditivas (surdez, dificuldade auditiva, zumbido, hiperacusia)
• Deficiências motoras ou de destreza (paralisia, paralisia cerebral, lesões por esforço repetitivo, como síndrome do túnel do carpo)
• Deficiências cognitivas que afetam habilidades de resolução de problemas, memória e atenção, deficiências de desenvolvimento ou dificuldades de aprendizagem como dislexia

Há uma crescente conscientização cultural sobre a acessibilidade na web. No entanto, ainda há muita ambiguidade em torno da tecnologia assistiva que ajuda as pessoas com deficiência a usar a internet.

Compreender essas ferramentas é fundamental para implementar estratégias de acessibilidade bem-sucedidas. Como você pode criar práticas eficazes se não conhece a tecnologia em torno da qual está construindo e integrando?

Em alguns casos, pessoas com deficiência não precisam de nenhum software ou hardware específico para acessar a internet de forma eficaz. Em vez disso, para que suas necessidades de acessibilidade sejam atendidas, elas precisam que os proprietários de sites ou criadores de conteúdo forneçam ferramentas ou outras considerações.

Tipos de tecnologia assistiva

Tecnologia assistiva é o termo abrangente para dispositivos e ferramentas assistivas, adaptativas e reabilitativas usadas por pessoas com deficiência. No contexto da acessibilidade na web, a tecnologia assistiva é o software e hardware usados por pessoas com deficiência para acessar e usar a internet.

Implementar a metodologia de acessibilidade na web se torna mais fácil se você considerar as necessidades específicas das pessoas com deficiência. Não existem soluções universais, e diferentes abordagens devem ser adotadas para proporcionar uma experiência de usuário ideal, dependendo da deficiência.

Tecnologia assistiva para pessoas com deficiências visuais

Pessoas com deficiências visuais, como baixa visão ou cegueira, podem precisar de software de leitor de tela. O software de leitor de tela traduz exibições de sites em informações não visuais por meio de conversores de texto para fala, sinais sonoros e displays Braille atualizáveis. O software de ampliação de tela é, como o nome sugere, um programa independente que amplia exibições digitais para proporcionar uma visualização mais fácil para pessoas com baixa visão.

Tecnologia assistiva para pessoas com deficiências motoras

Deficiências motoras ou de destreza envolvem perda parcial ou total da função de uma parte do corpo e podem incluir perda do controle motor grosso ou fino de uma pessoa. Isso pode incluir paralisia, paralisia cerebral e lesões por esforço repetitivo, como síndrome do túnel do carpo.

Pessoas com deficiências motoras ou de destreza podem precisar de um dispositivo de entrada alternativo, em vez de um teclado e mouse tradicionais, para usar e navegar em um computador. Dispositivos de entrada alternativos incluem dispositivos de rastreamento de movimento ou ocular, apontadores de cabeça e dispositivos de entrada de comutador único. Mais adiante, discutiremos as escolhas de design que os proprietários de sites podem fazer para facilitar a experiência das pessoas que utilizam esses dispositivos. 

Tecnologia assistiva para pessoas com deficiências cognitivas ou dificuldades de aprendizagem

Ao contrário das deficiências visuais ou motoras, as deficiências cognitivas ou dificuldades de aprendizagem não são frequentemente consideradas nas técnicas e guias de acessibilidade na web. Embora a maioria das ferramentas para ajudar pessoas com deficiências cognitivas ou dificuldades de aprendizagem sejam construídas do lado do desenvolvedor ou designer de web, ferramentas existentes podem ajudar no desenvolvimento de tais programas personalizados.

Leitores de texto são programas de software que repetem o texto em uma tela em uma voz sintetizada. Para maior clareza, algumas opções destacam a palavra que está sendo falada. No entanto, os leitores de texto geralmente não são capazes de ler texto complicado (como menus) ou elementos não textuais (como imagens).

1. Use corretamente a marcação HTML

Quer um designer de web insira manualmente o HTML ou não, é importante colocar cabeçalhos em uma ordem que faça sentido. Leitores de tela que articulam informações em uma página da web usam cabeçalhos como pontos de referência.

Cortesia de Prototypr.io

Se o HTML de uma página estiver bagunçado ou os cabeçalhos não forem usados corretamente, os usuários que acessam um site com um leitor de tela terão dificuldades para navegar.

O elemento H1 deve ser usado para ideias principais em uma página, com cabeçalhos subsequentes (H2, H3, etc.) seguindo um padrão lógico baseado em tópicos. Isso ajuda os usuários a entender a página e a relação entre os elementos nela.

Os links também devem descrever com precisão a página para a qual os usuários serão levados. Links que simplesmente dizem "Clique Aqui" ou "Leia Mais" não informam nada aos usuários sobre o conteúdo da página da web.

2. Inclua texto alternativo de imagem sucinto e descritivo

O texto alternativo é frequentemente esquecido quando imagens são adicionadas a páginas da web. Afinal, a maioria das pessoas só usa texto alternativo ao procurar imagens em um mecanismo de busca ou realizar uma busca reversa de imagem.

Mas para pessoas que usam leitores de tela, o texto alternativo é tudo o que elas têm para aprender sobre uma imagem exibida. Os usuários podem ficar confusos se o texto alternativo de uma imagem não for alterado ou não for necessariamente representativo do que a imagem retrata. Isso é especialmente prejudicial se a imagem for crítica para entender a página da web.

Com isso em mente, é uma boa prática não usar imagens como elementos de navegação ou como o único conteúdo em um blog. Ao escrever texto alternativo, certifique-se de que a descrição seja precisa, mas não muito prolixa. Isso também ajudará na otimização para mecanismos de busca (SEO). Empregar HTML limpo e cuidadoso ajuda tanto o SEO quanto a acessibilidade na web, então você pode atingir dois objetivos de uma só vez.

3. Considere opções de CAPTCHA

Um teste de Turing público completamente automatizado para distinguir computadores de humanos, frequentemente abreviado para CAPTCHA, é uma ferramenta apropriadamente — se terrivelmente — nomeada. CAPTCHAs são particularmente comuns em telas de login para verificar se a pessoa que está se conectando é de fato um humano e não um bot de spam.

CAPTCHAs frequentemente apresentam aos usuários uma imagem de letras distorcidas que devem ser digitadas em uma caixa de texto antes de permitir que os usuários avancem. Por mais úteis que sejam na prevenção de spam, eles apresentam vários problemas para pessoas com necessidades de acessibilidade.

CAPTCHAs podem ser especialmente confusos para aqueles com dislexia ou algumas dificuldades cognitivas. Algumas imagens de CAPTCHA não consideram pessoas com daltonismo, que podem não conseguir diferenciar as letras do fundo. Imagens de CAPTCHA também são ilegíveis por leitores de tela, mas adicionar a resposta correta ao texto alternativo na página poderia derrotar o propósito do teste.

Se CAPTCHAs forem necessários para o seu site, certifique-se de que eles tenham opções acessíveis, como testes baseados em áudio ou o reCAPTCHA v3 do Google, que permite que os usuários passem em um teste CAPTCHA apenas clicando em uma caixa.

4. Torne o conteúdo de vídeo acessível

Embora pessoas com deficiência auditiva possam normalmente usar a internet com poucas dificuldades, os proprietários de sites devem considerar os obstáculos que esses usuários enfrentam. Por exemplo, se um site fornecer sinais sonoros sem sinais visuais acompanhantes, os usuários com deficiência auditiva não poderão interagir com o site.

Um dos obstáculos mais notáveis para pessoas com deficiência auditiva é a falta de legendas ocultas. Vídeos sem legendas ocultas podem ser completamente inacessíveis para aqueles com deficiência auditiva. Para aqueles que fazem upload de um vídeo para uma plataforma como YouTube ou Facebook, pode ser fácil confiar nas legendas geradas automaticamente, mas elas geralmente são imprecisas e não fornecem legendas contextuais para música ou efeitos sonoros.

Descrições de áudio também ajudam usuários com deficiência visual a acompanhar vídeos sem áudio e a mostrar pessoas que não têm papéis falados. Também é fundamental adicionar transcrições de vídeos para aqueles que usam leitores de tela ou de texto.

5. Decida sobre opções de cores acessíveis

Normalmente, as escolhas de cores para sites envolvem o que é mais moderno em UX. Isso geralmente significa uma grande quantidade de azul não ofensivo e definitivamente original. Mas a cor é uma consideração importante na acessibilidade na web. Em particular, os designers podem querer considerar as necessidades de usuários com daltonismo.

Para me ajudar a demonstrar, confira esta foto de Monty, o único e inigualável da G2, aproveitando o horizonte de Chicago.

Usuários com daltonismo vermelho-verde (deuteranopia) terão dificuldade em distinguir vermelhos, verdes, marrons e laranjas. Se um designer decidir colocar texto vermelho sobre um fundo marrom, usuários daltônicos provavelmente não conseguirão lê-lo.

E a deuteranopia é apenas um tipo de daltonismo. Embora possa parecer difícil levar em conta todos os tipos de daltonismo que existem, há muitas ferramentas gratuitas disponíveis para criadores de sites testarem cores em uma página da web. Outras ferramentas podem gerar paletas de cores acessíveis que podem simplificar a tomada de decisões.

6. Garanta que o site possa ser navegado usando apenas o teclado

Para pessoas que usam dispositivos de entrada alternativos, navegar em sites de rolagem infinita com layouts assimétricos pode ser um pesadelo. Embora essas escolhas de design sejam modernas, elas são incrivelmente inacessíveis para aqueles que dependem de dispositivos de entrada alternativos ou usam apenas um teclado.

Escolhas de design modernas incluem barras de navegação ou opções que só aparecem quando um cursor passa sobre um determinado botão. Muitas vezes, destacar um botão suspenso designado usando o teclado ainda não é suficiente para ativar o menu suspenso. Isso significa que usuários que usam apenas o teclado não têm como acessar essas opções de página da web.

Adicionar links de pular no início de uma página da web também pode permitir que usuários que usam apenas o teclado e usuários com leitores de tela pulem conteúdo sem navegar por uma página inteira cada vez.

Tornando seu site mais acessível

Adicionar melhorias de acessibilidade nem sempre é fácil, especialmente ao equilibrá-las com práticas de design modernas e técnicas de UX para pessoas sem deficiência. No entanto, UX e acessibilidade na web certamente não são incompatíveis.

Os designers têm muitas opções criativas para proporcionar experiências excelentes a usuários com ou sem deficiências. Desde que a acessibilidade seja uma consideração desde o início, implementar práticas de acessibilidade pode ser fácil e não precisa ser prejudicial ao processo geral de design de UX.