SevirantaOs 10 erros de acessibilidade mais comuns em lojas virtuais (e como corrigi-los)
4 de junho de 2026
Resposta rápida. A maioria das lojas virtuais não falha em centenas de coisas diferentes, mas nos mesmos poucos erros: contraste de cores insuficiente, textos alternativos ausentes, botões e links sem nome, campos sem rótulo, uma estrutura de títulos bagunçada e navegação por teclado deficiente. A boa notícia: é justamente por isso que tem solução — muitas vezes em todo o tema, de modo que uma única correção cobre centenas de páginas de uma vez.
A pesquisa WebAIM Million mostra que ~96% das páginas iniciais têm erros mensuráveis de WCAG, e eles se concentram nos dez abaixo. Quer saber quais o seu site tem? Mais abaixo você escaneia uma página gratuitamente.
1. Contraste de cores insuficiente
De longe o erro mais comum. Texto cinza-claro sobre branco, ou uma cor de botão um pouco apagada demais, é ilegível para pessoas com baixa visão e sob sol forte no celular. A norma exige uma razão de contraste de no mínimo 4,5:1 para texto comum (3:1 para texto grande).
Solução: deixe a cor do texto ou do fundo mais escura ou mais clara até a razão ficar correta. No Shopify você ajusta isso uma única vez nas configurações do tema → cores, e vale imediatamente para a loja inteira. Saiba mais em contraste de cores: a exigência da WCAG e como medir.
2. Imagens sem texto alternativo
Uma foto de produto sem texto alternativo é invisível para um leitor de tela — um cliente cego não sabe o que é o produto. Isso afeta diretamente as suas vendas.
Solução: dê a cada imagem informativa um texto alternativo curto que descreva o
que ela mostra. No Shopify: produto → mídia → "editar texto alternativo". Imagens
puramente decorativas recebem um alt vazio (alt=""). Veja
como escrever textos alternativos que funcionam.
3. Botões sem nome
Um botão que mostra apenas um ícone (carrinho, busca, menu) é lido por um leitor de tela como "botão" — sem que a pessoa saiba o que ele faz.
Solução: dê ao botão um texto, ou um aria-label que descreva a ação, por
exemplo aria-label="Adicionar ao carrinho".
4. Links sem texto claro
Assim como os botões: um link que consiste apenas em um ícone, ou links "saiba mais" sem contexto, não dizem ao usuário de leitor de tela para onde ele vai.
Solução: dê ao link um texto visível e descritivo, ou um aria-label
("Ver carrinho" em vez de um ícone de carrinho isolado).
5. Campos de formulário sem rótulo
Campos de busca, login e checkout sem um rótulo associado são difíceis ou impossíveis de operar com tecnologia assistiva. Justamente no checkout, isso custa clientes.
Solução: associe um <label> visível a cada campo de entrada (via for/id),
ou use um aria-label se não houver espaço para texto visível.
6. Uma estrutura de títulos bagunçada
Usuários de leitor de tela navegam pelos títulos, assim como você usa um sumário. Se você pula de um H1 para um H4, ou usa títulos apenas para a formatação, essa estrutura se quebra.
Solução: use títulos em ordem lógica (H1 → H2 → H3) e resolva a formatação com CSS, não com o nível do título.
7. Atributo de idioma ausente
Sem o atributo de idioma, um leitor de tela não sabe se a sua página está em português ou em inglês, e pronuncia tudo com a pronúncia errada.
Solução: coloque lang="pt-BR" (ou o idioma correto) no elemento <html>. No
Shopify isso fica no theme.liquid — geralmente já presente, mas às vezes vazio.
8. Não operável pelo teclado
Muitas pessoas não usam mouse. Se um menu, slider ou pop-up só funciona com o mouse, ou se você não consegue ver onde está o foco, você exclui esses visitantes.
Solução: garanta que tudo seja alcançável com a tecla Tab, que haja um contorno de foco visível, e que os pop-ups não mantenham o foco "preso".
9. ARIA usado de forma errada
Atributos ARIA podem ajudar a tecnologia assistiva — mas, usados de forma errada ou inválida, eles causam justamente dano. Isso costuma entrar por meio de aplicativos instalados ou componentes do tema.
Solução: use ARIA apenas onde for necessário e com valores válidos. Se vier de um aplicativo ou tema, verifique esse componente.
10. Sem título de página claro
Uma página sem um <title> exclusivo não mostra um nome reconhecível na aba do
navegador nem para leitores de tela — navegar entre abas vira adivinhação.
Solução: dê a cada página um título exclusivo e descritivo. O Shopify geralmente preenche isso automaticamente; verifique seus modelos personalizados.
Qual é o erro de acessibilidade mais comum?
Contraste de cores insuficiente é de longe o erro mais comum — ele lidera com folga em praticamente toda pesquisa de grande escala, porque se infiltra sem ser notado nas cores do tema, nos textos dos botões e nos rótulos de preço. Ao mesmo tempo, é um dos erros mais fáceis de corrigir: basta ajustar bem as cores do seu tema uma vez e vale para a loja inteira.
Dá para corrigir esses erros de uma vez só?
Muitas vezes sim. Como uma loja virtual trabalha com modelos, o mesmo erro normalmente aparece em centenas de páginas ao mesmo tempo — e, portanto, também pode ser reparado em todo o tema. Um único ajuste no seu tema (cores, títulos, rótulos) cobre, então, de uma só vez a sua loja inteira.
Uma varredura gratuita detecta todos esses erros?
Uma varredura automatizada detecta de forma confiável cerca de 57% dos problemas por máquina; o restante exige avaliação humana. Esses 57% incluem justamente os erros acima — contraste, textos alternativos, rótulos, botões, títulos — então uma varredura traz a maior parte à tona imediatamente, já com a correção junto.
Curioso para saber quais destes dez estão no seu site? Cole sua URL e escaneie uma página gratuitamente em profundidade total — sem conta, em menos de 60 segundos.