Acessibilidade em landing page é legibilidade, não selo

O ângulo que faz acessibilidade valer a pena

Acessibilidade é quase sempre vendida como conformidade: uma norma para cumprir, um risco para evitar, um selo para exibir. Apresentada assim, ela entra na página como enfeite e sai no primeiro corte de orçamento.

Existe um enquadramento melhor, e ele é mais verdadeiro: acessibilidade é legibilidade em condição ruim. E condição ruim é a condição normal de uso.

Pense em quem realmente abre a sua página. Alguém de 55 anos que já não enxerga de perto como antes. Alguém no sol, com o brilho no máximo e mesmo assim mal vendo. Alguém com uma mão ocupada e a outra segurando o celular. Alguém com a tela trincada. Alguém com o dedo frio, no inverno, errando o botão. Nenhuma dessas pessoas se considera com deficiência, e todas se beneficiam exatamente das mesmas correções.

É por isso que este texto não segue a estrutura de uma norma. Ele segue a ordem do que mais aparece em página real, do que mais custa contato e do que dá para você mesmo conferir hoje.

Contraste: o único critério que tem número

Quase tudo em design se discute com adjetivo. Contraste, não. Contraste é uma razão entre a luminância da cor do texto e a do fundo, vai de 1:1 (invisível) a 21:1 (preto no branco), e tem limiares definidos:

Duas leituras práticas desses números. A primeira: o cinza claro sobre branco, que é a estética dominante da última década, raramente passa em 4,5:1. Muita página bonita tem o texto de apoio em cinza que some no celular, e o texto de apoio costuma ser justamente onde está o preço, o horário e a área de atendimento.

A segunda: o limiar mais folgado para texto grande explica por que título gigante em cor clara pode funcionar enquanto o parágrafo abaixo dele não funciona. Não é impressão sua, são dois critérios diferentes.

Vale a honestidade sobre o limite do modelo: essa fórmula é uma aproximação e recebe crítica técnica legítima, principalmente para texto claro sobre fundo escuro. Ela não é perfeita. Ainda assim, é o melhor instrumento objetivo disponível, e uma página que passa nela quase nunca tem problema grave de legibilidade.

Como medir contraste em dois minutos

Medir é mais rápido do que discutir se está bom. Três caminhos, do mais rápido ao mais completo:

1. No navegador. Clique com o botão direito sobre o texto, escolha inspecionar, e no painel de estilos clique no quadradinho de cor da propriedade color. O seletor de cor mostra a razão de contraste calculada com o fundo real e indica se passa. É a forma mais rápida, e usa a cor computada, não a que você imagina que está lá.
2. Com um verificador. O Contrast Checker do WebAIM recebe as duas cores em hexadecimal e devolve a razão, separando texto normal de texto grande. Serve para decidir a paleta antes de escrever código.
3. Com auditoria automática. O Lighthouse, embutido no Chrome, tem uma seção de acessibilidade que percorre a página inteira e lista os elementos reprovados. Ele não pega tudo, mas pega contraste insuficiente de uma vez só, e é o jeito mais rápido de saber se existe problema.

Quatro armadilhas que fazem gente medir e mesmo assim errar. Vale conferir cada uma:

• Opacidade. Um texto preto com 60% de opacidade não é preto. A cor efetiva é a mistura com o fundo, e é ela que precisa ser medida.
• Estados. Texto de dica dentro do campo, campo desabilitado, link visitado e botão em hover têm cores próprias, e são justamente as que ninguém confere.
• Modo escuro. Se a página tem tema escuro, ele é uma segunda paleta e precisa ser medido inteiro, não por amostragem.
• Fundo em degradê. Meça nos dois extremos, não no meio. O ponto pior é o que vale.

Eu meço contraste nas páginas que faço, e o motivo é bem menos nobre do que parece: sem medir, todo mundo aprova cinza claro. No monitor do escritório, com brilho alto e ambiente controlado, ele parece ótimo. O número é o que protege a decisão de quem está na rua.

O caso difícil: texto em cima de foto

Aqui a régua não fecha sozinha, porque não existe uma cor de fundo. Existe uma foto, com áreas claras e escuras, e ela muda de enquadramento quando a tela muda de tamanho. O trecho que estava sobre a parte escura no desktop pode cair sobre o céu branco no celular.

O que funciona, em ordem de confiabilidade:

• Camada de cor sobre a imagem inteira. Uma sobreposição escura suficiente para o texto passar no pior ponto. É previsível, e previsível é o que se quer aqui.
• Degradê preso ao lado do texto. Escurece só a região onde o texto fica e preserva o resto da foto.
• Caixa sólida atrás do texto. Menos elegante, absolutamente confiável.
• Tratar a imagem antes. Escolher ou produzir uma foto que já tenha uma área calma para receber texto.

O que não funciona: sombra no texto. Ela cria a impressão de contraste sem criar contraste, e é a primeira coisa a falhar no sol. Se o texto só é legível por causa da sombra, ele já não é legível.

Alvo de toque: acessibilidade motora sem nome técnico

Alvo pequeno não afeta só quem tem tremor ou limitação de coordenação. Afeta quem está no ônibus, quem tem a mão grande, quem está com pressa e quem está com o dedo molhado. É a mesma correção servindo a públicos que ninguém agruparia junto.

A WCAG 2.2 estabelece 24 por 24 pixels CSS como piso, e as diretrizes de Apple e Google recomendam bem mais que isso. O detalhe que a norma acrescenta e a maioria dos textos esquece é o espaçamento: alvos pequenos passam a ser aceitáveis quando existe folga suficiente entre eles. Colar é pior do que ser pequeno. Os números e o contexto de uso estão em landing page no celular.

Alt que serve para alguma coisa

Texto alternativo é o campo mais preenchido de forma inútil da web. "imagem", "foto1", "banner-final-v3.jpg" e o nome do arquivo aparecem em toda auditoria. Tecnicamente o atributo está lá, e ele não faz nada por ninguém.

A regra que resolve: descreva a função da imagem naquele lugar, não a aparência dela. Pergunte o que a pessoa perderia se a imagem não carregasse, e escreva isso.

Duas consequências práticas que vão além de acessibilidade. Imagem decorativa com alt descritivo faz o leitor de tela narrar lixo, então alt vazio é a resposta certa, e não uma omissão. E texto importante dentro de imagem, como preço ou promoção, é invisível para leitor de tela, para busca e para quem quer copiar. Se é texto, seja texto.

Teclado e foco visível

Teste, agora, na sua página: tire a mão do mouse e tente chegar ao formulário e enviá-lo usando só Tab, Shift+Tab e Enter. Se você se perder, alguém que depende de teclado também se perde, e nesse grupo entram pessoas com limitação motora, usuários de leitor de tela e gente que só prefere teclado.

Três coisas costumam quebrar:

• Foco invisível. Alguém removeu o contorno do foco porque achou feio e não colocou nada no lugar. A navegação continua funcionando, mas ninguém enxerga onde está.
• Ordem estranha. Quando a ordem visual e a ordem do código discordam, o foco pula pela tela sem lógica aparente.
• Armadilha de foco. Uma janela sobreposta que abre e não deixa sair pelo teclado, nem com Esc.

O foco visível não precisa ser feio. Precisa ser visível: um contorno com espessura e contraste suficientes, que funcione tanto sobre fundo claro quanto escuro. É uma decisão de design, e deve ser tratada como parte da identidade da página, não como padrão do navegador que alguém apagou.

Formulário: rótulo, erro e cor

O formulário é onde acessibilidade e conversão são exatamente a mesma coisa. Quatro correções:

1. Rótulo de verdade, associado ao campo. Texto de dica dentro do campo não é rótulo: ele some quando a pessoa começa a digitar, e a partir daí ninguém mais sabe o que aquele campo pedia. Além disso, costuma ter contraste baixo por padrão.
2. Erro em texto, não só em cor. Borda vermelha sozinha não comunica nada para quem não distingue vermelho de verde, e não comunica nada em tela sob sol. Escreva o que está errado, ao lado do campo.
3. Área clicável do rótulo. Rótulo associado corretamente coloca o foco no campo quando é tocado, o que aumenta bastante o alvo real de caixas de seleção.
4. Mensagem de sucesso perceptível. Trocar o formulário por uma frase, no mesmo lugar, com foco levado até ela.

Repare que nenhuma dessas quatro é sobre deficiência. Todas são sobre alguém conseguir mandar mensagem para você, que é o motivo de a página existir. Esse é o argumento que sustenta a agenda inteira, e ele está detalhado em UX de landing page.

O que não resolve

Existe uma categoria de produto que promete acessibilidade instalando uma linha de código: uma barra flutuante com botões de aumentar fonte, inverter cores e modo de leitura.

O problema é conceitual, não de marca. Essas barras adicionam controles por cima da página sem corrigir o que está embaixo. O contraste continua o mesmo até alguém apertar um botão que a maioria nunca aperta, o alt continua vazio, o alvo de toque continua pequeno e o foco continua invisível. Além disso, boa parte do público que a barra diz atender já usa as próprias ferramentas do sistema, que funcionam melhor e em todos os sites.

Aumentar o corpo do texto, medir contraste, escrever alt útil e devolver o foco visível custa menos, funciona sempre e não depende de ninguém apertar nada.