Acessibilidade em site profissional não é pauta de grande corporação — é um conjunto de configurações técnicas que a maioria dos sites ignora e que afeta tanto a experiência de usuários reais quanto a forma como o Google rastreia e pontua a página. Já revisei centenas de projetos ao longo de mais de 170 sites entregues e posso dizer com precisão: os erros se repetem sempre nos mesmos pontos. Contraste insuficiente, imagens sem texto alternativo e nenhum suporte a navegação por teclado. São três problemas simples de corrigir — e os três aparecem na auditoria do Lighthouse como penalizações diretas de acessibilidade e SEO.
Por que acessibilidade e SEO são a mesma conversa técnica
O rastreador do Google não enxerga imagens, não passa o mouse sobre elementos e não processa CSS de cor. Ele lê o HTML da página de forma muito parecida com o que faz um leitor de tela para pessoas com deficiência visual. Isso significa que tudo que dificulta a navegação de um usuário com deficiência também dificulta a indexação do seu site.
Não é coincidência que os critérios do SEO técnico que configuro por padrão em todo projeto se sobrepõem quase integralmente com os critérios do WCAG (Web Content Accessibility Guidelines). Semântica HTML correta, hierarquia de títulos, atributos descritivos — tudo isso serve a ambos os propósitos ao mesmo tempo.
A diferença prática: um site que acerta acessibilidade em site profissional tende a ter estrutura de código mais limpa, carregamento mais leve e rastreamento mais eficiente. Não é teoria — é o que os dados do Lighthouse e do PageSpeed mostram em toda auditoria que realizo.
Contraste de cores: o erro mais fácil de cometer e de medir
Contraste insuficiente é a falha de acessibilidade mais comum em sites profissionais — e a mais silenciosa, porque quase ninguém que tem visão perfeita percebe.
O WCAG define uma proporção mínima de contraste de 4,5:1 entre texto e fundo para texto de tamanho normal, e 3:1 para textos grandes (acima de 18px regular ou 14px negrito). Na prática, o que vejo com frequência é texto cinza claro sobre fundo branco, subtítulos em cor da marca sem verificação de contraste, e botões de CTA com texto que “some” na cor escolhida pelo designer.
Como verificar: existe uma ferramenta gratuita chamada Colour Contrast Checker (WebAIM) onde você insere as duas cores em hexadecimal e recebe a proporção exata com indicação de aprovação ou reprovação. No Elementor, isso pode ser verificado antes mesmo de publicar — basta abrir o inspetor do navegador com o seletor de cores aberto.
O impacto no SEO é indireto mas real: o Google usa sinais de UX (como taxa de rejeição e tempo na página) para avaliar a qualidade do conteúdo. Um texto difícil de ler aumenta a saída rápida, principalmente em mobile — e falando em mobile, esse ponto se torna ainda mais crítico em telas com brilho reduzido ou luz solar direta.
Texto alternativo em imagens: não é legenda, é dado estruturado
O atributo alt existe desde o HTML 2.0 e ainda é sistematicamente mal usado. Texto alternativo em imagens é a descrição textual que o navegador entrega ao leitor de tela quando a imagem não pode ser visualizada — seja por deficiência do usuário, seja por falha de carregamento.
O erro mais comum que vejo: imagens sem nenhum atributo alt, ou com alt genérico como “imagem”, “foto”, “banner”. Isso não serve ao usuário com deficiência e não serve ao Google Images.
Como fazer certo:
- Imagens informativas (foto do produto, foto da equipe, gráfico): descrever o que está na imagem de forma concisa e objetiva. Exemplo:
alt="Consultório da Dra. Helena, sala de atendimento com mesa de madeira e diplomas na parede". - Imagens decorativas (textura de fundo, ícone puramente visual): usar
alt=""(string vazia) — isso instrui o leitor de tela a ignorar a imagem, o que é o comportamento correto. - Imagens de botão ou link: o alt deve descrever a ação, não a imagem. Exemplo:
alt="Falar com Leonardo pelo WhatsApp".
No Elementor, o campo de texto alternativo fica nas configurações de cada widget de imagem. Em imagens inseridas via biblioteca de mídia do WordPress, o campo alt pode ser preenchido diretamente na biblioteca e reaproveita em todos os lugares onde aquela imagem é usada.
Para sites com portfólio visual — como os que construo para arquitetos e designers de interiores ou para fotógrafos —, o alt bem escrito é especialmente relevante porque o conteúdo principal da página é visual. Sem alt, o Google simplesmente não sabe o que está sendo mostrado.
Navegação por teclado: quem usa e por que o Google se importa
Navegação por teclado é a capacidade de percorrer todos os elementos interativos de uma página (links, botões, campos de formulário) usando apenas a tecla Tab — sem mouse ou toque na tela.
Quem depende disso na prática: pessoas com deficiência motora que não conseguem usar mouse, usuários de tecnologia assistiva, e também pessoas que simplesmente preferem navegar pelo teclado (mais comum do que parece em ambientes corporativos). O Google, por sua vez, avalia se os elementos focáveis da página têm indicador visual de foco visível — esse é um dos critérios da auditoria de acessibilidade do Lighthouse.
Os erros mais comuns que encontro:
- CSS que remove o
outlinepadrão dos elementos focados sem substituir por outro indicador visual — geralmente feito comoutline: nonepor motivos estéticos. - Menus dropdown que só funcionam via hover, sem nenhum suporte a teclado.
- Modais (popups) que abrem mas não transferem o foco para dentro deles, fazendo o usuário de teclado “perder” o elemento na página.
- Formulários com campos sem
labelassociado via atributofor— o que também quebra a experiência de leitor de tela.
No Elementor, o controle sobre foco é feito via CSS customizado. A regra mínima que adiciono em todo projeto é garantir que :focus-visible tenha um contorno de pelo menos 2px em cor contrastante com o fundo. Simples, eficaz e invisível para quem usa mouse.
Como a acessibilidade impacta a pontuação do PageSpeed
O Lighthouse — ferramenta que o Google usa e que também embasa o PageSpeed Insights — tem uma aba dedicada exclusivamente a acessibilidade. A pontuação dessa aba não afeta diretamente o score de performance, mas aparece no mesmo relatório e é usada pelo Google como sinal de qualidade da página.
Já escrevi sobre o custo real de um site lento em conversão e o mesmo raciocínio se aplica aqui: um site que falha em acessibilidade está deixando sinais negativos espalhados pela auditoria técnica. Cada imagem sem alt, cada contraste reprovado e cada campo sem label é um ponto a menos numa pontuação que o Google consegue medir de forma automatizada.
A boa notícia é que corrigir esses pontos não exige refazer o site. A maioria das correções de acessibilidade em site profissional é feita em nível de configuração — alt text, CSS de foco, label de formulário — sem alterar o visual da página para quem usa o site normalmente.
O que eu verifico em todo projeto antes de ir ao ar
Antes de entregar qualquer site, passo por um checklist técnico que inclui, entre outros pontos:
- Verificação de contraste de todos os textos principais e botões de CTA via ferramenta WebAIM.
- Revisão de alt text em todas as imagens com conteúdo (decorativas com alt vazio).
- Teste de navegação por teclado cobrindo menu, formulário e botões de conversão.
- Verificação de labels em todos os campos de formulário.
- Auditoria de acessibilidade no Lighthouse com meta de 90+ na aba de acessibilidade.
Esse nível de atenção técnica é o que diferencia um Elementor bem feito de um Elementor genérico. A aparência pode ser parecida na tela, mas o código por baixo — e a pontuação nas ferramentas do Google — contam uma história diferente.
Fale comigo sobre acessibilidade em site profissional no seu projeto
Se você tem um site no ar e nunca rodou uma auditoria de acessibilidade, existe uma chance alta de que ele esteja falhando em pontos básicos que afetam tanto usuários reais quanto o posicionamento no Google. E se está contratando um site novo, vale exigir que esses critérios façam parte da entrega — não como extra, mas como padrão.
Me chame no WhatsApp e posso avaliar o que precisa ser ajustado ou já incluir tudo isso no escopo do seu projeto desde o briefing.
→ Falar com Leonardo sobre o meu site
Perguntas frequentes sobre acessibilidade em site profissional
O que é acessibilidade em site profissional?
Acessibilidade em site profissional é o conjunto de configurações técnicas que garantem que a página possa ser usada por qualquer pessoa — incluindo quem depende de leitores de tela, navegação por teclado ou tem limitações visuais. Os três pontos mais críticos e mais ignorados são: contraste de cores adequado, texto alternativo em imagens e suporte à navegação por teclado.
Acessibilidade afeta o SEO do meu site?
Sim. O rastreador do Google lê o HTML de forma similar a um leitor de tela: não enxerga imagens, não passa o mouse sobre elementos e não processa cores via CSS. Imagens sem atributo alt, campos de formulário sem label e contraste insuficiente são penalizações diretas na auditoria do Lighthouse — ferramenta que o Google usa para avaliar a qualidade técnica das páginas.
Qual é a proporção mínima de contraste exigida pelo WCAG?
O WCAG (Web Content Accessibility Guidelines) define 4,5:1 como proporção mínima de contraste entre texto e fundo para textos de tamanho normal, e 3:1 para textos grandes (acima de 18px regular ou 14px negrito). É possível verificar qualquer par de cores gratuitamente com o Colour Contrast Checker da WebAIM.
Preciso refazer o meu site para corrigir os problemas de acessibilidade?
Não. A maioria das correções de acessibilidade é feita em nível de configuração — preenchimento de alt text, ajuste de CSS para indicador de foco e associação de labels a campos de formulário — sem nenhuma alteração visível para quem usa o site normalmente. Em plataformas como Elementor e WordPress, boa parte dessas correções é feita diretamente nas configurações dos elementos existentes.