Os erros de acessibilidade mais comuns em lojas online e como corrigi-los

Textos alt ausentes, baixo contraste de cor, formulários inacessíveis — estes são os erros que as verificações automáticas detetam com mais frequência. Visão geral e guia de correção.

Publicado:

Exemplo de loja online com quatro erros de acessibilidade destacados: texto alt ausente, baixo contraste, campo de formulário sem rótulo e indicador de foco ausente

Por que as verificações automáticas revelam mais do que o esperado

A maioria dos proprietários de lojas online pressupõe que o seu site é acessível. A realidade é frequentemente diferente. Uma verificação automática revela tipicamente dezenas a centenas de resultados mesmo numa loja aparentemente normal.

A automatização cobre aproximadamente 30–50 % das regras do WCAG 2.1 AA. Quais são os problemas mais comuns?

Textos alt ausentes

O resultado mais generalizado. As imagens sem descrição textual (o atributo alt) são completamente inacessíveis para os utilizadores com leitores de ecrã.

Como corrigir:

  • Imagens funcionais (produtos, ilustrações, logótipos): uma descrição significativa do que a imagem mostra ou do que o botão faz
  • Imagens decorativas (fundos, ornamentos): atributo alt vazio para que os leitores de ecrã as ignorem corretamente
  • Imagens que contêm texto: o texto deve estar presente no atributo alt

Contraste de cor insuficiente

O segundo problema mais comum. O WCAG 2.1 AA exige uma relação de contraste mínima de 4,5:1 para texto normal e de 3:1 para texto grande (18 pt ou 14 pt a negrito). O contraste fraco afeta as pessoas com baixa visão.

Elementos tipicamente problemáticos: um botão claro «Adicionar ao carrinho» sobre fundo branco, texto descritivo em cinzento, mensagens de erro em cor pálida, texto em banners com imagem.

Como corrigir: ferramentas como o Colour Contrast Analyser ou uma análise automática mostram-lhe imediatamente quais as áreas que não cumprem o padrão.

Formulários inacessíveis

Os formulários são um ponto crítico em qualquer loja online. Os problemas mais frequentes:

  • Label ausente num campo: um campo de E-mail sem label associado programaticamente é irreconhecível para um leitor de ecrã
  • Mensagens de erro não anunciadas via ARIA: um utilizador com leitor de ecrã não vê que ocorreu um erro
  • Campos obrigatórios sem indicação: um asterisco (*) sem explicação textual não é suficiente
  • Botões sem texto significativo: «Confirmar» é melhor do que apenas um ícone sem descrição

Problemas de navegação por teclado

A lei nacional que implementa a EAA exige que toda a loja online seja operável sem rato. Os problemas mais frequentes:

  • Focus ring visível ausente: quando um utilizador navega com a tecla Tab, deve sempre poder ver onde se encontra
  • Keyboard trap: o utilizador fica preso numa janela modal ou menu e não consegue sair usando o teclado
  • Ordem de foco incorreta: Tab salta pela página de forma não natural

Elementos interativos inacessíveis

Os botões e as ligações devem ter um nome acessível para que as tecnologias de apoio os anunciem corretamente. Padrões problemáticos:

  • Botão com apenas um ícone sem texto ou aria-label
  • Ligação «Clique aqui» ou «Mais» sem contexto
  • div ou span interativo sem role='button' e sem suporte de teclado

Como começar a corrigir

Abordagem recomendada:

  1. Execute uma análise automática — identifique rapidamente e gratuitamente os problemas mais impactantes
  2. Priorize por gravidade: resolva primeiro os resultados críticos (critical) e graves (serious)
  3. Corrija os erros técnicos: textos alt, contraste e labels de formulários são correções relativamente simples
  4. Encomende uma auditoria manual: as restantes regras (legibilidade, comportamento com leitores de ecrã) requerem julgamento humano

Lembre-se: as verificações automáticas detetam aproximadamente 30–50 % das regras do WCAG. Corrigir os erros detetados automaticamente é um passo necessário, mas não suficiente, para cumprir a lei nacional que implementa a EAA.

A verificação automática de acessibilidade (como esta no Inkluzo) cobre aproximadamente 30–50% das regras WCAG 2.1 AA. Verifica erros detetáveis automaticamente — textos alternativos, contraste, estrutura de cabeçalhos e formulários, atributos ARIA. Os restantes 50–70% dos critérios requerem avaliação manual.

Mais artigos do guia

Perguntas frequentes

Quantos erros são normais?
A maioria das lojas online tem dezenas a centenas de resultados detetáveis automaticamente. Mais importante do que a quantidade é a gravidade — corrija primeiro os erros críticos e graves.
Como sei o que corrigir primeiro?
Concentre-se nos resultados marcados como críticos (critical) e graves (serious) — são os que têm maior impacto nos utilizadores com deficiência.
É suficiente corrigir os erros detetados automaticamente?
Não. A automatização deteta aproximadamente 30–50 % das regras do WCAG 2.1 AA. Para uma visão completa — e para cumprir a lei nacional que implementa a EAA — é necessária uma auditoria manual.

Quer testar a acessibilidade do seu site agora?

Iniciar verificação de acessibilidade