Acessibilidade Web em E-commerce: Obrigação Legal desde 2025

O e-commerce e a nova obrigação de acessibilidade

Desde 28 de junho de 2025, o European Accessibility Act (EAA) tornou obrigatória a acessibilidade digital para serviços de comércio eletrónico na União Europeia. Isto significa que a sua loja online — seja uma pequena loja de artesanato ou uma grande plataforma de e-commerce — deve ser acessível a pessoas com deficiência.

Em Portugal, o Decreto-Lei n.º 82/2022 transpõe esta diretiva, com coimas que podem atingir os 50.000€ para empresas. Mais do que uma obrigação legal, a acessibilidade é uma oportunidade: expande o seu mercado potencial a mais de 1 milhão de portugueses com deficiência e melhora a experiência para todos os utilizadores.

O que o EAA exige especificamente ao e-commerce

O EAA é particularmente detalhado quanto aos requisitos para comércio eletrónico. As lojas online devem garantir acessibilidade em todo o percurso de compra:

Navegação e pesquisa de produtos

• Menu de navegação acessível por teclado
• Pesquisa funcional com leitores de ecrã
• Filtros (preço, tamanho, cor) operáveis sem rato
• Breadcrumbs com semântica correta para orientação

Páginas de produto

• Imagens de produto com texto alternativo descritivo
• Galerias de imagens navegáveis por teclado
• Informação de preço em texto real (não em imagem)
• Disponibilidade e variantes (tamanho, cor) com labels claros
• Avaliações e reviews acessíveis por tecnologias de apoio

Carrinho de compras

• Resumo do carrinho estruturado semanticamente
• Quantidades editáveis por teclado
• Remoção de itens com confirmação clara
• Totais atualizados anunciados por aria-live

Checkout: a parte mais crítica

O processo de checkout é onde a maioria das lojas online falha em acessibilidade. Os requisitos incluem:

Formulários acessíveis: cada campo com associado, agrupamentos com

e

Validação de erros: mensagens de erro em texto (não apenas a cor vermelha), associadas ao campo com aria-describedby

Autocomplete: atributos autocomplete nos campos de morada, email, telefone e cartão

Progresso: indicação clara do passo atual (ex: "Passo 2 de 4: Morada de envio")

Seleção de pagamento: métodos de pagamento selecionáveis por teclado

Confirmação de encomenda: página de confirmação acessível com resumo completo

Emails transacionais

Os emails enviados pela loja (confirmação de encomenda, envio, fatura) também devem ser acessíveis:

• HTML semântico nos emails
• Texto alternativo em imagens
• Links descritivos
• Versão em texto simples disponível

Problemas comuns de acessibilidade em lojas online

1. Carrosséis e sliders de produto

Os carrosséis são o problema n.º 1 de acessibilidade em e-commerce:

Problemas típicos:

• Navegação apenas por arrastar (inacessível por teclado)
• Autoplay sem botão de pausa
• Pontos de navegação sem texto acessível
• Conteúdo que desaparece antes de ser lido

Solução:

• Botões "Anterior" e "Seguinte" com texto acessível
• Pausa automática no hover e no foco
• Indicação do slide atual ("Slide 2 de 5")
• Alternativa: grid de produtos em vez de carrossel

2. Seletores de variante (cor, tamanho)

Problemas típicos:

• Cores mostradas apenas visualmente (quadrado vermelho sem texto)
• Tamanhos como imagens não textuais
• Sem indicação de "selecionado" para leitores de ecrã

Solução:

• Labels de texto em cada opção ("Azul marinho", "Tamanho M")
• aria-selected="true" no item selecionado
• Anúncio de "esgotado" no texto, não apenas a cinzento

3. Popups e modais

Problemas típicos:

• Popup de newsletter que não é anunciado por leitores de ecrã
• Foco não é movido para o modal quando abre
• Impossível fechar o modal por teclado (Escape)
• Conteúdo por trás do modal continua navegável

Solução:

• role="dialog" e aria-modal="true"
• Foco movido para o modal ao abrir
• Foco preso dentro do modal (focus trap)
• Fechar com Escape e botão acessível

4. Quickview / Vista rápida

O quickview de produto é frequentemente inacessível:

• Abre sem anúncio para leitores de ecrã
• Botão "Adicionar ao carrinho" não funciona por teclado
• Galeria de imagens dentro do quickview sem navegação por teclado

Recomendação: Considere eliminar o quickview e redirecionar diretamente para a página de produto, que é mais fácil de tornar acessível.

Impacto no negócio: para além da conformidade

Números que importam

• 15-20% da população mundial tem alguma forma de deficiência (OMS)
• Em Portugal: mais de 1 milhão de pessoas (10,9% da população, Censos 2021)
• 71% dos utilizadores com deficiência abandonam websites que não são acessíveis
• Poder de compra estimado em 490 mil milhões de euros na UE

SEO e acessibilidade: a relação direta

Muitas práticas de acessibilidade beneficiam diretamente o SEO:

• Texto alternativo em imagens = melhor indexação pelo Google
• Estrutura de headings = melhor compreensão do conteúdo
• Links descritivos = melhor contextualização para crawlers
• HTML semântico = dados estruturados implícitos
• Performance = sites acessíveis tendem a ser mais leves e rápidos

Para mais informações sobre como otimizar o SEO da sua loja, consulte o nosso artigo sobre SEO técnico.

Plataformas de e-commerce e acessibilidade

Shopify, WooCommerce, PrestaShop

As grandes plataformas de e-commerce estão a melhorar a acessibilidade dos seus temas, mas:

• Temas padrão são geralmente mais acessíveis do que temas premium/customizados
• Plugins e extensões podem introduzir problemas de acessibilidade
• Personalizações frequentemente quebram a acessibilidade

Recomendação

Independentemente da plataforma, faça uma auditoria de acessibilidade:

Teste automático com axe DevTools ou Lighthouse

Teste de teclado em todo o fluxo de compra

Teste com leitor de ecrã (NVDA ou VoiceOver) no checkout

Auditoria profissional com o EAAPass para um relatório completo e conformidade documentada

Checklist rápida para e-commerce acessível

• [ ] Todas as imagens de produto têm alt descritivo
• [ ] Navegação funciona inteiramente por teclado
• [ ] Contraste mínimo de 4.5:1 em todo o texto
• [ ] Formulário de checkout com labels e validação de erros
• [ ] Carrinho atualizável por teclado
• [ ] Modais e popups com focus trap e Escape para fechar
• [ ] Preços e disponibilidade em texto real
• [ ] Seletores de variante com labels de texto
• [ ] Vídeos com legendas
• [ ] Declaração de acessibilidade publicada

Para consultar todos os critérios WCAG em detalhe, veja a nossa checklist completa de WCAG 2.1 AA.

---

A sua loja online cumpre os requisitos de acessibilidade do EAA? Faça uma auditoria agora com o EAAPass e evite multas até 50.000€.