O checklist de acessibilidade da landing page

Uma landing page acessível é aquela que a pessoa consegue ler, percorrer com o Tab e enviar sem mouse e sem visão perfeita. Este checklist de acessibilidade de landing page começa pelas quatro checagens que pegam a maioria das falhas: contraste de texto de pelo menos 4,5 para 1, controles interativos de pelo menos 24 por 24 pixels CSS, um estado de foco visível em todo controle e um rótulo de verdade em todo campo de formulário. As quatro são baratas de resolver no design e caras de remendar depois.

O contraste é onde a maioria das landing pages falha

A WCAG define o contraste mínimo do texto normal em 4,5 para 1 contra o fundo, no nível AA. Texto grande fica em 3 para 1. Grande quer dizer pelo menos 18 pontos, ou 14 pontos em negrito, o que dá mais ou menos 24px, ou 18.5px em negrito, no CSS. Os valores não são arredondados, então 4,499 para 1 reprova. Texto de corpo em cinza claro sobre branco é o suspeito de sempre. Depois vem texto branco sobre foto, onde o contraste segura no topo da imagem e desmonta embaixo.

Botões e ícones também precisam de contraste

Texto é metade da história. A WCAG pede 3 para 1 em componentes de interface e em objetos gráficos com significado, contra as cores que estão do lado, também no nível AA. Isso cobre a borda de um input, o contorno de um botão, uma caixa de seleção, uma estrela de avaliação e qualquer ícone que carregue sentido sozinho. Contorno de input em cinza clarinho num card branco é o erro mais comum numa landing page. E é exatamente o elemento que a pessoa precisa enxergar antes de converter.

Dê 24 por 24 pixels a cada área de toque

A WCAG 2.2 acrescentou uma regra de tamanho de alvo no nível AA. Os alvos interativos devem ter pelo menos 24 por 24 pixels CSS. Alvos menores são permitidos quando ficam afastados o bastante para um círculo de 24 pixels centrado em cada um não encostar em outro alvo. Links dentro de uma frase são exceção. Na prática isso pega botões de ícone, o botão de fechar de um modal, os ícones sociais do rodapé e os links espremidos da linha de termos no pé da página.

Acesso pelo teclado é um teste de cinco minutos

Solte o mouse e aperte Tab a partir do topo da página. Todo link, botão, campo e controle de menu deve receber foco numa ordem que combina com o layout visual, e você deve sempre conseguir ver onde está. Componentes personalizados falham aqui com mais frequência. Um slider feito de divs te prende. Um modal de vídeo segura o foco. Um cabeçalho fixo esconde o elemento que você acabou de alcançar com o Tab. Se você não consegue chegar no botão principal e acionar ele pelo teclado, a página está quebrada.

Dê um rótulo de verdade a cada campo de formulário

O placeholder some no segundo em que a pessoa digita, então quem se perde fica sem nada para conferir. Leitores de tela tratam o texto de placeholder de jeitos diferentes. Coloque um rótulo visível acima de cada campo. Guarde o placeholder para um exemplo de formato, se quiser um, e conecte o rótulo ao campo do jeito certo, para tocar no rótulo colocar o foco no campo. As mensagens de erro têm que dizer em palavras o que deu errado. Cor sozinha não pode ser o que marca um campo como inválido.

As regras da União Europeia que entraram em 2025

O European Accessibility Act entrou em vigor em 28 de junho de 2025. Ele vale para serviços vendidos a consumidores na União Europeia, incluindo ecommerce, bancos e venda de passagens. Ele usa a EN 301 549, que é construída em cima do nível AA da WCAG. Se você vende para consumidores europeus, acessibilidade passou de boa prática a exigência legal. A fiscalização passa pelos países membros, e não por um órgão único, o que deixa o risco mais difícil de prever, e não menor.

Rode este checklist de acessibilidade de landing page em vinte minutos

Comece por um verificador automático e depois ignore a nota, porque as ferramentas automáticas pegam só uma parte do que importa. Percorra a página inteira com o Tab. Meça cada cor de texto e de botão com um verificador de contraste. Dê zoom de 200% no navegador e confirme que nada se sobrepõe nem fica cortado. Ligue o leitor de tela do seu sistema operacional e escute o hero e o formulário. Corrija os valores de contraste nos seus design tokens, em vez de página por página, ou a mesma falha vai ao ar de novo na próxima página.