E-commerceArtigo
Acessibilidade na loja virtual: checklist de 15 itens, da navegação ao pagamento
Em resumo
Acessibilidade na loja virtual é a condição para que uma pessoa com deficiência consiga achar o produto e concluir a compra sem ajuda. O ConnectWeek reúne um checklist de 15 itens, organizado pelo caminho da compra. Cada item traz um teste e o critério das diretrizes internacionais de acessibilidade (WCAG 2.2) em que se apoia. O texto mostra também o que a Lei Brasileira de Inclusão diz sobre sites de empresas.
Acessibilidade na loja virtual é a condição para que uma pessoa com deficiência consiga achar o produto, entender a oferta e concluir a compra sem ajuda de outra pessoa. No Brasil, a acessibilidade dos sites de empresas é obrigação prevista na Lei Brasileira de Inclusão. Este texto traz um checklist de 15 itens, organizado pelo caminho da compra, da navegação ao pagamento. Cada item indica o critério das diretrizes internacionais de acessibilidade em que se apoia e um teste rápido, quase sempre feito pelo próprio dono da loja. O conteúdo é informativo e não substitui uma auditoria técnica nem a orientação de um advogado.
Loja virtual é obrigada a ser acessível?
A Lei nº 13.146, de 2015, a Lei Brasileira de Inclusão da Pessoa com Deficiência, trata do assunto no artigo 63. O artigo diz que a acessibilidade é obrigatória nos sites de empresas que têm sede ou representação comercial no Brasil, para uso da pessoa com deficiência. O site deve garantir a essa pessoa o acesso às informações que publica. A referência indicada pela lei são as melhores práticas e as diretrizes internacionais de acessibilidade. O parágrafo 1º acrescenta que os sites devem trazer o símbolo de acessibilidade em destaque. O ConnectWeek leu o artigo em 8 de outubro de 2026 no texto do Planalto e conferiu a redação na publicação original da lei no portal da Câmara dos Deputados.
A lei não cita uma norma técnica pelo nome. Na leitura do ConnectWeek, a referência internacional mais usada são as Diretrizes de Acessibilidade para Conteúdo Web, conhecidas pela sigla em inglês WCAG. Elas são publicadas pelo W3C, o consórcio que define os padrões técnicos da web. A versão 2.2 é uma recomendação do W3C de 5 de outubro de 2023. Em 27 de março de 2025, saiu a tradução autorizada para o português do Brasil.
As WCAG organizam as exigências em critérios de sucesso, cada um com um número e um nível. Os níveis são três: o A é o básico, o AAA é o mais exigente e o AA fica entre os dois. Os 15 itens deste checklist usam só critérios dos níveis A e AA. A escolha dos itens e a ordem são do ConnectWeek, e o checklist não cobre todos os critérios das diretrizes.
Navegação: cinco itens que valem para a loja inteira
- 1. Tudo funciona pelo teclado. O critério 2.1.1 (nível A) pede que toda a funcionalidade possa ser operada por teclado. Teste: largue o mouse e percorra a loja com a tecla Tab. Menu, busca, filtros e botão de comprar precisam ser alcançados e acionados com Enter ou com a barra de espaço.
- 2. Dá para ver onde o teclado está. O critério 2.4.7 (nível AA) pede um indicador de foco visível, o contorno que mostra qual elemento está selecionado. O critério 2.4.11 (nível AA), novo na versão 2.2, pede que o elemento em foco não fique totalmente escondido por outro conteúdo da página. Teste: aperte Tab várias vezes e veja se um contorno mostra onde você está. Depois, com o aviso de cookies e o botão de atendimento abertos, veja se algum deles cobre o item selecionado.
- 3. O texto tem contraste suficiente com o fundo. O critério 1.4.3 (nível AA) fixa a relação de contraste mínima em 4,5 para 1 no texto comum e em 3 para 1 no texto grande. As diretrizes chamam de texto grande o que tem pelo menos 18 pontos, ou 14 pontos em negrito. Teste: use um verificador de contraste, ferramenta que compara a cor do texto com a cor do fundo e devolve a relação entre as duas. Comece pelo preço, pelo texto em cinza claro e pelo texto sobre fotos.
- 4. A página aguenta o zoom. O critério 1.4.4 (nível AA) pede que o texto possa ser ampliado até 200% sem perda de conteúdo ou de função. O critério 1.4.10 (nível AA) pede que o conteúdo caiba em uma largura de 320 pixels CSS sem exigir rolagem para os lados. Segundo uma nota do critério, essa largura equivale a uma janela de 1.280 pixels com zoom de 400%. Ficam de fora as partes que precisam de duas dimensões, como as tabelas de dados, caso da tabela de medidas. Teste: amplie o navegador até 200% e veja se o botão de comprar some ou se o texto fica cortado. Depois, vá até 400% e veja se a página passa a exigir rolagem para os lados.
- 5. O link diz para onde leva. O critério 2.4.4 (nível A) pede que a finalidade de cada link possa ser entendida pelo texto do link ou pelo contexto dele. Teste: procure links com o texto “saiba mais” ou “veja aqui” repetidos na mesma página. Quem navega com leitor de tela, o programa que lê a página em voz alta, costuma ouvir a lista de links fora do contexto.
Página de produto: cinco itens
- 6. A foto tem descrição em texto. O critério 1.1.1 (nível A) pede uma alternativa em texto para o conteúdo que não é texto. Na foto de produto, é o texto alternativo, que o leitor de tela lê no lugar da imagem. Teste: confira se o texto alternativo descreve o que a foto mostra, como “tênis de corrida azul visto de lado”, e não repete só o nome do arquivo. O modelo de descrição do artigo sobre descrição de produto ajuda a escrever esses textos.
- 7. A cor não é a única pista. O critério 1.4.1 (nível A) diz que a cor não pode ser o único meio visual de passar uma informação. Teste: nas opções de cor do produto, veja se cada quadradinho colorido tem o nome da cor. No tamanho esgotado, veja se há a palavra “esgotado” além do botão acinzentado.
- 8. Os botões têm tamanho mínimo para o dedo. O critério 2.5.8 (nível AA), novo na versão 2.2, pede que o alvo, a área que a pessoa toca ou clica para acionar um botão ou um link, tenha pelo menos 24 por 24 pixels CSS, a unidade de medida usada no código das páginas. Há exceções, como a do alvo menor que tem espaço livre em volta. Teste: no celular, toque nos botões de tamanho, de quantidade e de fechar. Se o dedo aciona o vizinho, o alvo está pequeno ou apertado.
- 9. O vídeo tem legenda. O critério 1.2.2 (nível A) pede legendas para o áudio de vídeos gravados. Teste: assista ao vídeo do produto sem som e veja se a informação falada aparece escrita.
- 10. A estrutura da página está no código. O critério 1.3.1 (nível A) pede que a estrutura mostrada na tela, como títulos e tabelas, possa ser identificada pelo programa que lê a página. Teste: confira com quem cuida do site se o nome do produto é um título de verdade e se a tabela de medidas é uma tabela, e não uma imagem.
Carrinho, cadastro e pagamento: cinco itens
- 11. Todo campo tem rótulo. O critério 3.3.2 (nível A) pede rótulos, o nome do campo que fica sempre visível, ou instruções quando a página exige que a pessoa digite algo. Teste: clique em um campo do cadastro. Se a única indicação do que digitar era o texto cinza de exemplo e ele sumiu, falta o rótulo.
- 12. O erro é explicado em texto. O critério 3.3.1 (nível A) pede que o campo com erro seja identificado e que o erro seja descrito em texto. O critério 3.3.3 (nível AA) pede a sugestão de correção quando ela é conhecida. Teste: envie o formulário com o CEP incompleto. A mensagem precisa dizer qual campo está errado e como corrigir. Só pintar a borda de vermelho não basta.
- 13. A loja não pede duas vezes o mesmo dado. O critério 3.3.7 (nível A), novo na versão 2.2, pede que a informação já fornecida no mesmo processo venha preenchida ou possa ser selecionada. Teste: veja se o endereço de cobrança pode repetir o de entrega com um toque.
- 14. O login não depende de memória nem de quebra-cabeça. O critério 3.3.8 (nível AA), novo na versão 2.2, trata dos testes de função cognitiva, como lembrar uma senha ou resolver um quebra-cabeça. Esse tipo de teste só é admitido se a etapa oferecer outro método de autenticação ou um mecanismo de ajuda, ou se o teste consistir em reconhecer objetos ou em identificar conteúdo que a própria pessoa forneceu ao site. O texto do critério cita como exemplos de mecanismo o preenchimento por gerenciador de senhas e o copiar e colar. Teste: veja se o campo de senha aceita colar e se o gerenciador de senhas do navegador preenche o login.
- 15. O tempo não acaba sem aviso. O critério 2.2.1 (nível A) trata dos limites de tempo. Em regra, a pessoa precisa poder desligar, ajustar ou prolongar o prazo. Na opção de prolongar, ela é avisada antes do fim e tem pelo menos 20 segundos para pedir mais tempo. O critério admite exceções, como o prazo que é essencial para a atividade. Teste: deixe o carrinho ou a tela de pagamento parados e veja se a loja avisa antes de desconectar o cliente ou esvaziar o carrinho.
Como fazer a primeira conferência em uma hora
O roteiro abaixo é uma sugestão do ConnectWeek para a primeira passada. Ele usa o navegador, o celular e um verificador de contraste.
| Passo | O que fazer | Itens do checklist que ele cobre |
|---|---|---|
| Compra só com o teclado | Da página inicial ao pagamento, com login, sem tocar no mouse | 1, 2, 11, 12, 13 e 14 |
| Zoom em 200% e em 400% | Rever a página de produto e o carrinho com a tela ampliada | 4 |
| Conferência de contraste | Medir com um verificador de contraste o preço, o texto em cinza claro e o texto sobre fotos | 3 |
| Compra pelo celular com uma mão | Escolher cor, tamanho e quantidade e fechar os avisos | 7 e 8 |
| Leitor de tela do celular ligado | Ouvir a página de produto e o formulário de cadastro | 5, 6, 10 e 11 |
| Vídeo e espera | Ver o vídeo do produto sem som e deixar o carrinho e a tela de pagamento parados | 9 e 15 |
Anote cada falha com a página, o item e uma captura de tela. Essa lista é o que a loja leva à plataforma, à agência ou ao desenvolvedor.
Na avaliação do ConnectWeek, a ordem de correção mais útil começa pelo que impede a compra. Vêm primeiro as falhas dos itens 1, 11 e 12, porque quem não alcança o botão, não sabe o que digitar no campo ou não entende o erro do formulário não conclui o pedido. Depois vêm as falhas da página de produto. Parte dos ajustes depende do tema, o modelo visual da loja, ou da plataforma, e não do lojista. Nesses casos, o caminho é abrir um chamado com o item e o critério das WCAG correspondente.
O que o checklist não resolve
Três limites precisam ficar claros.
- Não é auditoria. As WCAG 2.2 têm mais critérios do que os 15 itens deste texto. Passar no checklist não quer dizer que a loja está em conformidade com as diretrizes nem que cumpre a lei.
- Não substitui o teste com pessoas. Quem usa leitor de tela todos os dias encontra barreiras que o dono da loja não percebe. Na avaliação do ConnectWeek, vale convidar clientes com deficiência para testar a compra e ouvir o que travou.
- Não acaba. Cada banner novo, cada troca de tema e cada aplicativo instalado pode trazer um problema que não existia. Convém repetir a conferência depois de mudanças grandes no site, junto com a revisão de velocidade descrita no artigo sobre Core Web Vitals para loja virtual.
O formulário de compra é o ponto em que a acessibilidade e a venda mais se encontram. Campo sem rótulo e erro mal explicado atrapalham qualquer cliente, com ou sem deficiência. Os outros pontos de atrito dessa etapa estão no artigo sobre checkout, a etapa de fechamento do pedido.
Comece por aqui Novo no assunto? Leia primeiro o que é e-commerce, o texto-base desta cobertura.
Fonte: W3C: Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.2, tradução autorizada
Perguntas frequentes
A lei brasileira exige acessibilidade em loja virtual?
O artigo 63 da Lei nº 13.146, de 2015, a Lei Brasileira de Inclusão, diz que a acessibilidade é obrigatória nos sites de empresas que têm sede ou representação comercial no Brasil, para uso da pessoa com deficiência. A referência indicada são as melhores práticas e as diretrizes internacionais de acessibilidade. A lei não cita uma norma técnica pelo nome.
O que são as WCAG?
São as Diretrizes de Acessibilidade para Conteúdo Web, publicadas pelo W3C, o consórcio que define os padrões técnicos da web. A versão 2.2 é uma recomendação de 5 de outubro de 2023 e tem tradução autorizada em português do Brasil. As exigências são organizadas em critérios de sucesso, classificados nos níveis A, AA e AAA.
Qual é o contraste mínimo entre o texto e o fundo da página nas WCAG?
O critério 1.4.3 das WCAG 2.2, de nível AA, pede relação de contraste de pelo menos 4,5 para 1 no texto comum e de pelo menos 3 para 1 no texto grande. O critério traz exceções, como o texto de um componente inativo ou meramente decorativo.
Como testar a acessibilidade da loja virtual sem contratar ninguém?
O ConnectWeek sugere uma primeira conferência com passos simples: fazer uma compra só com o teclado, rever a página de produto e o carrinho com zoom de 200% e de 400%, medir o contraste do texto com um verificador de contraste, comprar pelo celular com uma mão, ouvir a página de produto com o leitor de tela do celular, ver o vídeo do produto sem som e deixar o carrinho parado para ver se a loja avisa antes de desconectar o cliente. O roteiro não substitui uma auditoria.