Como tornar a sua loja WooCommerce acessível: um guia prático

9 de junho de 2026

Resposta curta. O WooCommerce em si segue razoavelmente as diretrizes de acessibilidade do WordPress, mas a sua loja herda, sobretudo, a acessibilidade do seu tema, dos seus plugins e do seu conteúdo — e é aí que normalmente dá errado. Percorra os seis pontos abaixo (contraste, textos alternativos, títulos, plugins e page builders, teclado, idioma) e preste atenção especial ao seu checkout em blocos e aos seus filtros de produto; assim você já terá resolvido a maior parte.

Por que só o WooCommerce não basta?

O WooCommerce é um plugin em cima do WordPress. Se a sua loja atende ao WCAG depende de como o seu tema foi construído, de quais cores você escolheu, de quais plugins e page builder você usa e de como preencheu os seus produtos. Duas lojas na mesma versão do WooCommerce podem, portanto, ter pontuações totalmente diferentes. A boa notícia: como muita coisa volta através do seu tema e dos seus templates, uma única correção costuma cobrir centenas de páginas.

1. Verifique o contraste das suas cores

O erro mais comum. Num tema de blocos (Full Site Editing) você vai em Aparência → Editor → Estilos → Cores; num tema clássico, em Aparência → Personalizar → Cores. Garanta que texto e fundo tenham no mínimo 4,5:1 de contraste (3:1 para texto grande). Preste atenção especial ao texto sobre o seu botão Adicionar ao carrinho, às etiquetas de preço e de promoção, e aos links. Configurar uma vez certo vale para a loja toda. Veja contraste de cores: a exigência do WCAG e como medi-lo.

2. Dê textos alternativos às suas fotos de produto

Abra um produto em Produtos, clique em Imagem do produto (e Galeria do produto) na imagem → preencha na biblioteca de mídia o campo Texto alternativo. Descreva de forma curta e factual o que aparece nela (ex.: "Sapato masculino de camurça preta com cadarços"), sem linguagem de marketing. Comece pelos seus produtos mais vendidos e pelos banners da sua página inicial. Imagens decorativas recebem um alt vazio (alt=""). Mais sobre isso em escrever textos alternativos que funcionam.

3. Verifique a estrutura dos seus títulos

Use títulos em ordem lógica (H1 → H2 → H3) e não apenas para formatação. No editor de blocos (Gutenberg) você vê em cada bloco de título o nível; não pule níveis. Atenção a page builders como Elementor ou Divi: eles deixam você formatar qualquer texto em tamanho grande sem que ele se torne um título de verdade — escolha ali conscientemente o nível de título correto.

4. Atenção aos seus plugins e ao page builder

Essa costuma ser a maior fonte de problemas. Plugins de avaliações, chat, pop-ups, sliders e filtros — e page builders pesados — injetam o próprio código no seu tema, e esse código costuma conter botões sem nome, ARIA incorreto ou elementos que não dá para operar com o teclado. Por isso, não instale cegamente cada plugin, e teste sempre o seu site com tudo ativo. Se um plugin se mostrar inacessível, troque por uma alternativa que de fato respeite as normas do WCAG. Escolha, onde possível, os novos blocos do WooCommerce para carrinho e checkout (veja o ponto 6).

5. Teste com o teclado

Experimente percorrer o seu site totalmente sem o mouse: só com a tecla Tab e Enter. Você consegue chegar a tudo — menu, filtros de produto, escolhas de variação, carrinho, checkout — e enxerga sempre onde está o foco? No WooCommerce, preste atenção especificamente aos dropdowns de variação, ao stepper de quantidade (+/−) e aos widgets de filtro na sua barra lateral; são os lugares onde o teclado costuma travar.

6. Verifique a sua configuração de idioma e o seu checkout

Garanta que o seu tema defina o atributo de idioma correto, para que um leitor de tela escolha a pronúncia certa. Num tema clássico, em header.php está a linha <html <?php language_attributes(); ?>> — ela deve conter o atributo de idioma. Se você usa WPML ou Polylang para vários idiomas, verifique então que cada versão de idioma receba o atributo lang correto. De preferência, migre para os blocos de Cart e Checkout baseados em blocos do WooCommerce: eles são mais acessíveis do que o antigo checkout por shortcode e são mantidos ativamente em termos de acessibilidade.

Erros comuns no WooCommerce e como corrigi-los

Elemento do WooCommerce	Erro comum	A correção
Botão "Adicionar ao carrinho"	fonte clara demais / baixo contraste	contraste nos estilos do tema para no mínimo 4,5:1
Fotos de produto	nome do arquivo como descrição (`IMG_2043.jpg`)	texto alternativo funcional na biblioteca de mídia
Stepper de quantidade (`+`/`−`)	botões sem rótulo, não operáveis com o teclado	adicionar rótulo/`aria-label` ou usar uma variante acessível
Widget de filtro de produto	filtros utilizáveis apenas com o mouse	plugin de filtro acessível ou os blocos de filtro do WooCommerce
Plugin de acessibilidade	instalar um widget de overlay	evitar — não repara o seu código e não protege contra processos

Um plugin de acessibilidade do diretório de plugins do WordPress ajuda?

Não. Se você pesquisar "accessibility", vai encontrar dezenas de plugins que prometem deixar a sua loja em conformidade com um clique, via widget. Não caia nessa: eles não reparam o seu tema e os seus templates, e os órgãos fiscalizadores verificam o código-fonte bruto da sua loja. Resolver de forma estrutural no seu tema e conteúdo é a única rota que resiste — e ainda lhe rende melhor SEO e um tempo de carregamento mais rápido. Mais sobre isso em por que um widget de overlay não protege você.

Com isso a minha loja WooCommerce atende à lei?

Esses seis pontos cobrem a maior parte do que um teste automatizado constata, mas "atender" vai além: depende do seu tema inteiro, dos seus plugins e do seu conteúdo em conjunto. Se a European Accessibility Act se aplica a você, veja na nossa checklist. Você também trabalha com Shopify? Então o nosso guia da Shopify ajuda você a seguir adiante.

Como sei onde a minha loja WooCommerce está agora?

A forma mais rápida: faça uma varredura gratuita de uma página. Você verá, em cada achado, o que está errado e como resolver — e, como muita coisa passa pelo seu tema e pelos seus templates, você muitas vezes resolve de uma só vez para a loja inteira. Em menos de 60 segundos, sem conta.