Checklist WCAG 2.2 AA de acessibilidade para lojas virtuais

Checklist WCAG 2.2 AA para Shopify e WooCommerce por tipo de página: texto alternativo, contraste, rótulos, teclado, foco, tamanho do alvo e novos critérios.

Equipe editorial FixReports12 min de leitura

Um checklist WCAG 2.2 AA para loja virtual começa pelas falhas encontradas na maioria dos templates de loja: falta de texto alternativo, texto com baixo contraste, links e botões sem nome acessível, campos de formulário sem rótulo, armadilhas de teclado e foco invisível. Depois, a WCAG 2.2 acrescenta verificações de nível AA que afetam muito as lojas: elementos em foco escondidos sob barras fixas (2.4.11), alvos de toque menores que 24 × 24 pixels CSS (2.5.8) e logins que obrigam a pessoa a memorizar ou redigitar informações (3.3.8). Teste cada tipo de página (inicial, coleção, produto, carrinho) com o teclado e com um verificador automático e depois corrija os templates do tema, para que todas as páginas herdem a correção.

Pontos principais

  • A WCAG 2.2 se tornou Recomendação do W3C em 5 de outubro de 2023. A edição atual é de 12 de dezembro de 2024 e foi aprovada como ISO/IEC 40500:2025 (abre em uma nova aba).
  • No WebAIM Million 2026 (abre em uma nova aba) (dados de fevereiro de 2026), 95,9% das páginas iniciais do top 1 milhão de sites tinham falhas detectáveis em relação à WCAG 2.
  • As seis falhas mais comuns foram texto com baixo contraste (83,9% das páginas), falta de texto alternativo (53,1%), falta de rótulos em formulários (51%), links vazios (46,3%), botões vazios (30,6%) e falta da indicação do idioma da página (13,5%).
  • As 42.516 páginas iniciais de lojas Shopify dessa amostra tinham em média 75,1 erros detectados, contra 56,1 no conjunto de todas as páginas.
  • A WCAG 2.2 acrescenta quatro critérios AA (2.4.11, 2.5.7, 2.5.8, 3.3.8) e dois critérios de nível A (3.2.6, 3.3.7) e remove o 4.1.1 Parsing.

O que mudou na WCAG 2.2 para lojas virtuais?

A WCAG 2.2 adicionou nove critérios de sucesso, seis deles nos níveis A ou AA, e eliminou o 4.1.1 Parsing por estar obsoleto (W3C WAI (abre em uma nova aba)).

Critério novoNívelO que significa em uma loja
2.4.11 Focus Not Obscured (Minimum)AAUm link ou botão em foco não pode ficar totalmente escondido por um cabeçalho fixo, uma barra fixa de “Adicionar ao carrinho”, um banner de cookies ou um widget de chat
2.5.7 Dragging MovementsAATudo o que exige arrastar, como um controle deslizante de faixa de preço, precisa de uma alternativa que funcione com um único toque
2.5.8 Target Size (Minimum)AAOs alvos de clique e toque têm pelo menos 24 × 24 pixels CSS ou ficam espaçados de forma que um círculo de 24 px em volta de cada um não encoste nos vizinhos
3.2.6 Consistent HelpALinks de ajuda, dados de contato ou chat aparecem na mesma ordem relativa em todas as páginas
3.3.7 Redundant EntryANão peça a mesma informação duas vezes no mesmo processo; preencha automaticamente ou deixe a pessoa selecionar
3.3.8 Accessible Authentication (Minimum)AAO login não pode depender de memorizar ou transcrever algo, a menos que exista uma alternativa ou um recurso de apoio, como colar e usar gerenciadores de senhas

Os outros três (2.4.12, 2.4.13 e 3.3.9) são de nível AAA. Como a 2.2 mantém todos os critérios da 2.1, exceto o 4.1.1, atender à 2.2 AA também cobre a 2.1 AA.

Quais critérios WCAG falham com mais frequência em templates de loja?

Os mesmos poucos aparecem todos os anos: contraste, texto alternativo, rótulos de formulário e nomes de links e botões, além de problemas de teclado e foco que as ferramentas automáticas só detectam em parte.

CritérioO que falha nas lojasComo corrigir
1.1.1 Non-text Content (A)Imagens de produto sem texto alternativo ou com o nome do arquivo como texto alternativo; imagens com link e sem textoDescreva o produto mostrado (cor, estilo, ângulo). Use alt="" só para elementos decorativos. Os temas da Shopify devem gerar image.alt
1.4.3 Contrast (Minimum) (AA)Texto do corpo em cinza-claro, texto de placeholder, selos de promoção, texto sobre imagens de banner4,5:1 para texto normal, 3:1 para texto grande (cerca de 24 px, ou 18,5 px em negrito) (W3C (abre em uma nova aba))
2.4.4 Link Purpose (A), 4.1.2 Name, Role, Value (A)Links de carrinho, busca e redes sociais só com ícone; setas de carrossel; botões “X” de fechar sem nomeDê a cada controle um texto visível ou um aria-label, como “Carrinho, 2 itens”
1.3.1 Info and Relationships (A), 3.3.2 Labels or Instructions (A)Campos de newsletter e de busca só com placeholder; campos de quantidade sem rótuloUse um <label for> que corresponda ao id do campo; agrupe as amostras feitas com botões de opção em um fieldset com legend
2.1.1 Keyboard (A), 2.1.2 No Keyboard Trap (A)Menus que só abrem ao passar o mouse (hover), amostras feitas com divs, pop-ups que não fecham pelo tecladoUse elementos button e a de verdade; a tecla Esc fecha as sobreposições e devolve o foco
2.4.7 Focus Visible (AA)outline: none no CSS do temaAdicione um estilo :focus-visible que se destaque do fundo

O WebAIM também constatou que uma em cada quatro imagens com link não tinha texto alternativo e que 45% das imagens sem texto alternativo eram links (WebAIM (abre em uma nova aba)). Em uma grade de coleção, isso costuma ser o link da imagem do produto.

O que verificar na página inicial?

Verifique o cabeçalho, o banner principal (hero) e tudo o que aparece em pop-up, porque é isso que todo visitante encontra primeiro.

  • Link para pular o conteúdo. Um link “Pular para o conteúdo” como o primeiro item focável (2.4.1 Bypass Blocks, A).
  • Ícones do cabeçalho. Os ícones de busca, conta e carrinho têm nomes acessíveis, e o nome do carrinho inclui a quantidade de itens.
  • Menu. Abre com Enter ou Espaço, os subitens são alcançáveis com Tab, fecha com Esc e não depende de hover (2.1.1). Os requisitos da Theme Store (abre em uma nova aba) da Shopify dizem que todas as partes de uma página, inclusive os menus suspensos, precisam ser acessíveis pelo teclado.
  • Carrossel do banner principal. Se os slides se movem sozinhos por mais de cinco segundos, ofereça um controle de pausa (2.2.2 Pause, Stop, Hide, A).
  • Barra de anúncios e texto sobre imagens. Meça o contraste; as cores da marca muitas vezes não chegam a 4,5:1.
  • Pop-ups e banners de cookies. Leve o foco para dentro do pop-up, coloque um rótulo no campo de e-mail, permita fechar com Esc e garanta que um banner fixo nunca cubra totalmente o elemento em foco (2.4.11). O W3C cita a propriedade CSS scroll-padding como uma forma de manter os elementos em foco longe das barras fixas (W3C (abre em uma nova aba)).
  • Idioma da página. O elemento html tem um atributo lang correto (3.1.1 Language of Page, A).

O que verificar nas páginas de coleção?

As páginas de coleção costumam falhar nos cards de produto, nos filtros e nas amostras de cor.

  • Cards de produto. O link da imagem tem texto alternativo, ou a imagem fica oculta para as tecnologias assistivas e o link do título leva o nome.
  • Filtros. Toda caixa de seleção tem rótulo, e cada grupo tem um título ou uma legenda. O painel de filtros abre, funciona e fecha pelo teclado. Anuncie a contagem atualizada de resultados como mensagem de status (4.1.3 Status Messages, AA).
  • Controles deslizantes de preço. Adicione campos numéricos de preço mínimo e máximo para que o filtro funcione sem arrastar (2.5.7) e sem mouse (2.1.1).
  • Amostras de cor. Cada amostra tem um nome em texto, e “esgotado” não é indicado só pela cor (1.4.1 Use of Color, A). As amostras atendem a 24 × 24 pixels CSS ou à regra de espaçamento (2.5.8).
  • Ordenação e paginação. O menu suspenso de ordenação tem rótulo; os links de página e os botões “Carregar mais” atendem ao tamanho mínimo do alvo.

O que verificar nas páginas de produto?

É na página de produto que acontece a decisão de compra, então teste cada controle entre as fotos e o botão “Adicionar ao carrinho”.

  • Galeria. Cada imagem tem texto alternativo, as miniaturas são botões com nomes como “Mostrar imagem 2”, e as setas funcionam sem arrastar (2.5.7).
  • Seletores de variante. As opções de tamanho e cor ficam em um grupo com rótulo (1.3.1), a opção selecionada é informada aos leitores de tela (4.1.2), e os tamanhos indisponíveis são indicados em texto.
  • Quantidade. O campo tem rótulo, e os botões de menos e mais têm nomes e atendem ao 2.5.8. A Theme Store da Shopify agora exige alvos de toque de pelo menos 24 × 24 pixels CSS, e as boas práticas de acessibilidade (abre em uma nova aba) da Shopify recomendam 44 × 44 para os controles principais.
  • Adicionar ao carrinho. As mensagens de sucesso e de erro são anunciadas (4.1.3). A queixa formal da FTC contra um fornecedor de overlay citou um site em que o leitor de tela não anunciava que um item tinha sido adicionado ao carrinho e em que um gráfico de avaliação de 5 estrelas era lido em voz alta como um botão “previous” (anterior) (queixa da FTC (abre em uma nova aba)).
  • Avaliações, abas e acordeões. As avaliações têm texto como “4,5 de 5 estrelas”. Os acordeões informam se estão expandidos.
  • Barra fixa de “Adicionar ao carrinho”. Ela não pode cobrir totalmente o elemento em foco enquanto um usuário de teclado avança pela página com Tab (2.4.11).
  • Vídeo. Os vídeos de produto com fala têm legendas (1.2.2 Captions (Prerecorded), A).

O que verificar no carrinho e no login?

O carrinho é a última página que a maioria dos temas controla por completo, então teste-o até o botão de finalizar compra e depois verifique se o login na conta não depende de memória nem de redigitação.

  • Carrinho lateral. O foco vai para dentro do carrinho lateral, permanece ali enquanto ele está aberto e volta para o botão do carrinho quando a tecla Esc o fecha, como descrevem as boas práticas da Shopify.
  • Itens do carrinho. Cada campo de quantidade tem como rótulo o nome do produto, e cada botão de remover diz o que remove, como “Remover Camisa de linho, tamanho M”.
  • Campos de cupom de desconto e de observação. Têm rótulo, e os erros são descritos em texto (3.3.1 Error Identification, A).
  • Botão de finalizar compra. Alcançável com Tab, com foco visível e sem ficar escondido atrás de elementos fixos.
  • Login (3.3.8). As contas de cliente da Shopify usam por padrão o login sem senha com código de uso único (abre em uma nova aba). O W3C diz que os códigos precisam poder ser colados ou preenchidos automaticamente e que bloquear a colagem ou os gerenciadores de senhas reprova o critério; CAPTCHAs de reconhecimento de objetos são permitidos no nível AA, mas CAPTCHAs de quebra-cabeça ou de contas matemáticas precisam de outro método (W3C (abre em uma nova aba)).

As diferenças entre as plataformas importam aqui. Na Shopify, o checkout.liquid não é mais suportado (abre em uma nova aba) nas etapas de informações, frete e pagamento, então a maior parte da marcação do checkout é da Shopify, e não do seu tema; teste os apps de checkout e as personalizações que você adicionar. No WooCommerce, o checkout é uma página do seu site WordPress. O WooCommerce afirma que o front-end do seu núcleo está substancialmente em conformidade com a WCAG 2.2 AA (declaração atualizada pela última vez em 1º de abril de 2025), mas o seu tema e os seus plugins ainda podem comprometer isso (WooCommerce (abre em uma nova aba)).

Como testar uma loja com este checklist?

Combine uma análise automática com uma compra feita só pelo teclado e uma verificação rápida com leitor de tela, em cada tipo de página.

  1. Análise automática. Ferramentas como axe, WAVE ou Lighthouse detectam problemas de contraste, texto alternativo, rótulos e links vazios. A Theme Store da Shopify pede uma pontuação média de acessibilidade no Lighthouse de pelo menos 90 nas páginas inicial, de coleção e de produto. Isso é um piso, não conformidade: o W3C diz que as ferramentas não conseguem determinar a acessibilidade sozinhas (abre em uma nova aba).
  2. Compra só pelo teclado. A partir da página inicial, chegue a um produto pelo menu ou pela busca, filtre, escolha uma variante, adicione ao carrinho, abra o carrinho e alcance o botão de finalizar compra sem usar o mouse.
  3. Verificação pontual com leitor de tela. Com o VoiceOver ou o NVDA, ouça o nome do produto, o preço, o estado da variante e a confirmação de que o item foi adicionado ao carrinho.
  4. Teste de novo depois de mudanças. Atualizações do tema e apps novos podem desfazer correções.

A nossa análise gratuita cobre o passo 1 em uma página inicial, uma de coleção, uma de produto, o carrinho e uma página de conteúdo, em Chromium real com axe-core. O Relatório de Acessibilidade testa até 25 páginas, acrescenta o passo 2 como um teste de compra só pelo teclado até o botão de finalizar compra, mostra o código antes e depois e inclui um checklist para o passo 3, que exige uma pessoa com um leitor de tela. Nenhum dos dois garante conformidade com a ADA ou com a WCAG.

Perguntas frequentes

A WCAG 2.2 é obrigatória por lei para lojas virtuais nos EUA?

O Departamento de Justiça dos EUA não tem nenhuma regulamentação da ADA que defina um padrão web para empresas privadas, e as suas orientações sobre acessibilidade web de 2022 (abre em uma nova aba) apontam a WCAG como uma referência útil. As notificações extrajudiciais (demand letters) costumam citar a WCAG 2.1 ou 2.2 AA, então converse com um advogado sobre as suas obrigações específicas.

Atender à WCAG 2.2 AA também atende à WCAG 2.1 AA?

Sim, na prática. A WCAG 2.2 mantém todos os critérios de sucesso da WCAG 2.1, exceto o 4.1.1 Parsing, que o W3C removeu por estar obsoleto.

Qual é o tamanho mínimo do alvo na WCAG 2.2?

Pelo critério 2.5.8, os alvos precisam ter pelo menos 24 × 24 pixels CSS, a menos que um círculo de 24 px centralizado em cada alvo menor não encoste em outros alvos nem nos círculos deles. Ficam isentos os links dentro de frases, os controles do navegador sem estilização, as apresentações essenciais e os alvos que têm um controle equivalente que atende ao critério.

Uma pontuação 100 de acessibilidade no Lighthouse significa que a minha loja está em conformidade?

Não. As ferramentas automáticas detectam só uma parte das falhas, e o WebAIM observa que a ausência de erros detectados não significa que uma página seja acessível ou esteja em conformidade.

Um login com senha reprova o 3.3.8?

Não por si só. Um campo de senha atende ao critério quando as pessoas conseguem colar nele e usar um gerenciador de senhas; o que reprova é bloquear a colagem ou o preenchimento automático.

Com que frequência devo testar a minha loja de novo?

Teste de novo depois de cada atualização do tema, app novo ou mudança grande de template, e verifique o caminho de compra regularmente, já que os apps podem inserir marcação nova sem aviso.

Fontes

Todos os guias