Acessibilidade na Web 101: Projetando para Todos
Publicados: 2022-01-10Web design é sobre acessibilidade. A maioria dos web designers visa criar produtos para o maior número de pessoas dentro de seu público, lançando seus designs como redes abertas para gerar o maior fluxo de usuários.
E embora haja lógica nesse princípio de design, ele ofusca um princípio um pouco mais simples e inclusivo: design para todas as pessoas, não para a maioria.
Otimize o conteúdo para que todos os possíveis usuários possam desfrutar e interagir com seu site e acessar as informações e dados disponíveis. Engajar-se nesta prática ajudará a desenvolver um mercado mais amplo e diversificar sua base de clientes. 15% da população mundial tem algum nível de deficiência.
São pessoas que, como todo mundo, usam a internet com frequência e dependem muito da comunicação e das ferramentas digitais. Otimizar seu site para garantir que os usuários desfrutem de uma ótima experiência pode expandir sua web de interação. Ao praticar a inclusão em seu design, você poderá alcançar milhões de pessoas que muitas vezes são esquecidas.
Projetar para acessibilidade não precisa ser difícil. Ele só precisa ser simples e atencioso com todos os usuários em potencial. Veja como otimizar seu site para acessibilidade máxima.
Entenda seus usuários
Conhecer seu público é crucial em qualquer projeto, por isso é o melhor lugar para começar. Entenda que seus usuários podem incluir indivíduos com diferentes capacidades. Alguns de seus usuários podem ter deficiência auditiva ou visual, outros podem ter distúrbios convulsivos, outros ainda podem ter problemas de mobilidade.
Embora você não possa projetar para todos os cenários possíveis, você ampliará seu horizonte de design se dedicar um tempo para pensar em tantos quanto puder. Depois de pensar em seu público expandido, faça uma pesquisa. Leia estudos de caso, converse com amigos que tenham experiências, consulte guias de acessibilidade.
Talvez tente pegar uma página do campo educacional, princípios do design universal é uma boa referência.
Pense em UX
Agora que você desenvolveu um entendimento com seus futuros usuários, coloque esse entendimento em sua estrutura de experiência do usuário (UX). Esta etapa ajudará você a ter empatia com seus usuários e a considerar coisas em que talvez não tenha pensado antes. Ele também o direcionará para uma ampla variedade de definições de tecnologia assistiva.
Assim como um designer deve considerar o comportamento de um site em todos os principais navegadores, as tecnologias assistivas devem fazer parte da lista de verificação de funcionalidades. Às vezes, mesmo as menores mudanças no web design podem abrir novas portas para usuários com deficiência.
Uma simples mudança
Por exemplo, possivelmente a mudança mais fácil de implementar é como você usa tags de ênfase.
Visualmente, não há diferença entre <b>
e <strong>
, nem <i>
aparece de forma diferente de <em>
. Mas para pessoas com deficiência, essas tags podem mudar drasticamente a experiência do usuário.

Enquanto eles renderizam o mesmo, efetivamente negrito e itálico , a diferença entre essas tags é sua função. Enquanto as tags mais simples em negrito e itálico são de apresentação (mudando a forma como o texto é renderizado), forte e ênfase indicam diferentes padrões de fala para tecnologia assistiva.
Mas não é tão simples como substituir cegamente todos os <b>
por <strong>
. Muitos cabeçalhos usam texto em negrito para contraste, por exemplo, mas talvez não seja melhor para usuários com deficiência experimentar uma tag <strong>
aqui. Pense: “ Esse texto precisa ser falado de forma diferente para que um usuário experimente seu significado completo?” Caso contrário, considere descartar o <strong>
ou <em>
, a menos que sejam realmente necessários.
Mudanças sutis e considerações como essa podem fazer toda a diferença para usuários com deficiências. É importante atualizar e não fazer downgrade do UX.
Projetando para deficientes visuais
Embora o conselho acima já beneficie os deficientes visuais, nem todos com problemas visuais terão o mesmo nível ou tipo de deficiência. É igualmente importante oferecer opções que possam acomodar aqueles que mantêm o uso da visão.
Considere estes elementos:
- Permitir que os usuários ampliem a fonte. A maioria dos navegadores fará isso com ou sem o seu consentimento, mas ficará mais bonito se você tiver CSS preparado para isso.
- Evite certas combinações de cores como vermelho e verde ou azul e amarelo. Em vez disso, por que não usar cores para aumentar as conversões e aumentar a acessibilidade?
- Código no “texto alternativo”. O texto alternativo pode ser lido por tecnologia assistiva e explica quaisquer gráficos na página.
- Use pontos nas abreviações, mesmo as conhecidas. A maneira como um leitor de tela processa informações geralmente é fonética: imagine ouvir “Fibby” vs. FBI
Para obter mais informações sobre como incorporar elementos para usuários com deficiência visual, consulte a Fundação Americana para Cegos.
Projeto para deficientes auditivos
Embora os deficientes auditivos precisem de menos acomodações, as tendências recentes no uso de vídeos em sites aumentaram a necessidade de escolhas de design inteligentes. Portanto, se o seu site incorporar algum componente auditivo, use legendas ocultas ou interpretação de linguagem de sinais.
Evite a tentação de usar legendas ocultas automáticas – pare em qualquer vídeo aleatório que tenha sido processado usando transcrição automática para ver traduções de palavras que não fazem sentido e podem ser muito produtivas.
Para diretrizes específicas de legendagem, as recomendações da Associação Nacional de Surdos podem ser encontradas aqui.
Projetando para epilepsia fotossensível
Uma das preocupações de design em torno do uso predominante de vídeo, especialmente vídeo que usa uma função de reprodução automática, envolve usuários com epilepsia fotossensível. Esses usuários podem sofrer convulsões desencadeadas por efeitos de luz estroboscópica ou imagens em movimento. Web designers podem usar a ferramenta de análise de epilepsia fotossensível para verificar a probabilidade de seu conteúdo desencadear uma convulsão.
Se o conteúdo for identificado como em risco, mas não puder ser alterado para reduzir o risco, sempre avise sobre o potencial e não reproduza o vídeo automaticamente. Certifique-se de que o aviso esteja visível e próximo ao botão play.
Projetando para deficiência de mobilidade
Algumas deficiências de mobilidade vão desde a perda total do controle motor fino até um leve tremor. Qualquer um dos níveis de deficiência resulta na mesma experiência do usuário em um site que não os considerou:
- Os usuários devem se esforçar mais para alcançar os links e podem se cansar rapidamente.
- Os usuários não podem navegar no site porque ele não permite o uso do teclado.
- Ter que rolar por uma página longa resulta em fadiga porque não há opção de “voltar ao topo” ou pular disponível.
Sites otimizados para tela sensível ao toque ou entrada de mouse fino podem apresentar consequências mais graves para pessoas com mobilidade reduzida, possivelmente tornando o site inutilizável.
Incorporar elementos de design como navegação que pode ser operada usando o teclado e links de âncora frequentes que podem atrair o usuário para diferentes seções da página pode ajudar muito esses usuários.
Crie uma opção de site “básica”
Seu design é impecável, interativo e impressionante, usa as melhores e mais recentes tendências disponíveis no mercado aberto – e é pouco acessível para qualquer um dos usuários descritos acima.
Se isso soa como seu web design, uma alternativa mais fácil pode ser criar um layout “simples” que os usuários possam ativar e desativar. Isso atrairá mais do que apenas usuários com deficiência: para usuários que sofrem de enxaquecas desencadeadas por alto contraste, por exemplo, ter uma alternância de fácil acesso pode ser a diferença entre se tornar um cliente ou sair para enfrentar uma enxaqueca de três horas.
Não pare por aí também. Aplique a mesma opção para suas listas de assinatura, permitindo que os usuários editem facilmente suas preferências antes de receber o email marketing.
Continue entendendo seus diferentes usuários. Continue pensando neles. Quanto mais você entender e simpatizar com seus usuários, mais fácil será o design de UX acessível. Quem sabe? Você pode até mudar o mundo de alguém.