Acessibilidade em sites: como não deixar clientes de fora

Seu Antônio tem 68 anos e queria marcar um horário. Abriu o site da barbearia no celular, no meio da rua, com sol batendo na tela. O telefone estava lá — em cinza clarinho, letra pequena, sobre fundo branco. Ele apertou os olhos, tentou aumentar o zoom, o layout quebrou. Desistiu e ligou para o concorrente.

Ninguém no negócio ficou sabendo. Não aparece relatório nenhum dizendo que um cliente foi embora porque não conseguiu ler. É esse o problema da acessibilidade em sites: quando ela falta, você não perde vendas com barulho, perde no silêncio.

A boa notícia é que a maior parte disso se resolve com decisões simples, tomadas na hora de montar o site — e que não custam nada a mais.

O que é acessibilidade em sites, em português claro

Acessibilidade é a capacidade do seu site de ser usado por qualquer pessoa, do jeito que ela consegue usar. Isso inclui quem enxerga pouco, quem não escuta, quem não usa o mouse, quem tem dificuldade de leitura — e também quem está simplesmente com o celular na mão, no sol, com pressa.

Não é um recurso extra que se instala no fim, tipo um plugin. É um conjunto de escolhas: qual cor de texto, qual tamanho de letra, como o botão é escrito, o que acontece quando alguém usa só o teclado. Feito desde o começo, praticamente não dá trabalho. Feito depois, vira reforma.

Existe um manual internacional para isso, chamado WCAG, que é a referência usada no mundo todo. Você não precisa decorá-lo. Precisa conhecer o punhado de itens que resolve a maior parte dos casos — e é isso que vem a seguir.

Quem ganha com um site acessível (é mais gente do que parece)

Quando se fala em acessibilidade, a primeira imagem que vem à cabeça é a de uma pessoa cega usando leitor de tela. Ela existe, e é importante — mas é a ponta de um grupo bem maior.

• Pessoas idosas, que enxergam menos de perto e têm menos firmeza no toque. É uma parcela enorme do público de qualquer negócio local;
• Quem tem limitação temporária: o braço engessado, a vista cansada depois de um dia inteiro na tela, o ouvido ocupado num ambiente barulhento;
• Quem está numa situação difícil: sol na tela, celular antigo, internet fraca, uma mão só porque a outra segura a criança;
• Quem tem dislexia ou dificuldade de leitura, e se perde em blocos grandes de texto justificado.

Repare que quase todo ajuste de acessibilidade melhora a vida de todo mundo. Letra maior é melhor para qualquer um. Botão bem escrito confunde menos qualquer um. É por isso que acessibilidade e boa experiência acabam sendo a mesma conversa.

Contraste e tamanho de letra: o ajuste que rende mais

Se você só puder mexer em uma coisa, mexa nesta. Contraste é a diferença entre a cor do texto e a cor do fundo. Texto cinza-claro sobre branco é bonito na tela grande do designer e ilegível no celular de quem já não enxerga tão bem.

O padrão recomendado é uma relação de contraste de pelo menos 4,5 para 1 em textos normais. Você não precisa calcular nada: existem verificadores gratuitos onde se cola as duas cores e ele diz se passa. Vale a pena checar as cores do seu site uma vez — a escolha de paleta tem impacto direto na leitura, como comentamos em cores no design e a decisão do cliente.

Sobre tamanho: 16px é o mínimo para texto corrido no corpo do site. Menor que isso, a pessoa dá zoom — e se o site não for bem construído, o layout desmonta. Um site que funciona bem no celular já resolve boa parte disso; se esse ponto ainda é dúvida, vale ler o que é um site responsivo.

Navegação: nem todo mundo usa o mouse

Muita gente navega só pelo teclado — por limitação motora, por leitor de tela ou simplesmente por costume. O teste é fácil: abra seu site no computador e percorra a página apertando a tecla Tab.

Três coisas precisam acontecer:

1. Dá para chegar a tudo. Todo link, botão e campo de formulário deve ser alcançável na sequência;
2. Dá para ver onde você está. O item selecionado precisa de um contorno visível. Muitos sites removem esse contorno por achar feio — e deixam a pessoa navegando às cegas;
3. A ordem faz sentido. De cima para baixo, da esquerda para a direita, sem pular para o rodapé e voltar.

No celular, o equivalente é o tamanho da área de toque. Botões e links precisam ter pelo menos uns 44 pixels de altura e um respiro entre eles. Menu com itens colados é a causa número um de clique errado — e de gente que abandona a página com raiva.

Imagens, vídeos e o famoso texto alternativo

Toda imagem que comunica alguma coisa precisa de um texto alternativo (o atributo alt): uma descrição curta do que ela mostra. É o que o leitor de tela lê em voz alta e o que aparece quando a imagem não carrega, em conexão ruim.

A regra prática: descreva o que a pessoa perderia se não visse a foto. Em vez de "imagem1.jpg", escreva "prato de moqueca capixaba servido na panela de barro". É um detalhe pequeno que também ajuda o Google a entender sua página — e vale para todas as fotos que você escolher, assunto de como escolher as fotos certas para o site.

Para vídeos, o equivalente é a legenda. Além de atender quem não escuta, ela serve para a maioria silenciosa: boa parte das pessoas assiste vídeo sem som, na fila do banco ou na sala com gente dormindo.

Formulários: onde as pessoas mais desistem

O formulário é o momento decisivo do site — é onde o visitante vira contato. E é justamente onde a falta de acessibilidade custa dinheiro na hora.

• Todo campo com rótulo visível, e não só o texto cinza dentro da caixa, que some quando a pessoa começa a digitar e a deixa sem saber o que estava preenchendo;
• Erro explicado em palavras: não basta pintar o campo de vermelho. Escreva o que está errado e como corrigir;
• Não use só a cor para indicar qualquer coisa. Quem não distingue verde de vermelho fica sem a informação;
• Peça o mínimo. Cada campo a mais é uma chance a mais de desistência.

Para facilitar, veja os problemas mais comuns lado a lado com a correção:

De quebra, o Google gosta

Boa parte do que torna um site acessível é exatamente o que os buscadores usam para entender a página: títulos na ordem certa, textos descritivos nos links, imagens identificadas, estrutura limpa. Não é coincidência — o robô do Google navega o site mais ou menos como um leitor de tela, sem enxergar o visual.

Ou seja: ao arrumar o site para as pessoas, você melhora também o desempenho na busca, tema que destrinchamos em o que é SEO. Dois resultados pelo preço de um ajuste.

Um teste de dez minutos para fazer hoje

Sem ferramenta paga e sem conhecimento técnico:

1. Abra o site no celular, na rua, de dia. Consegue ler tudo sem apertar os olhos?
2. Aumente a fonte do navegador para 200%. O texto cresce ou o layout quebra?
3. Percorra a página só com a tecla Tab. Dá para ver onde você está e chegar aos botões?
4. Tire o som de um vídeo seu. A mensagem ainda passa?
5. Peça para alguém acima de 60 anos usar o site sem ajuda e sem dicas. É o teste mais revelador de todos.

Anote o que travar. Essa lista costuma ser curta, e cada item resolvido é gente que passa a conseguir comprar de você.

Por onde começar

Acessibilidade não é um selo que se conquista e acabou. É um jeito de fazer: escolher cores legíveis, escrever botões que dizem o que fazem, descrever as imagens, testar de vez em quando. Nenhum desses passos exige ser programador — exige alguém que se lembre de fazê-los.

Se você prefere não se preocupar com nada disso, a TH Designer já entrega os sites com esses cuidados embutidos: contraste conferido, textos legíveis, navegação por teclado funcionando, imagens descritas e formulários claros. Dá para ver o que fazemos em nossos serviços e mandar uma mensagem com o endereço do seu site — a gente aponta os pontos que estão barrando visitantes hoje, sem compromisso.

Vale lembrar do começo: seu Antônio não reclamou, não mandou e-mail, não deixou avaliação. Ele só foi embora. Um site acessível é, no fim das contas, o site que não deixa isso acontecer.

Perguntas frequentes