Acessibilidade do website e conformidade com a ADA para lojas online

Torna a tua loja online acessível a clientes com deficiência e cumpre os requisitos legais da ADA. Conhece as normas WCAG 2.1 e as boas práticas.

Rascunho

De cada vez que um cliente com deficiência não consegue navegar no teu processo de checkout, usar um filtro de produtos ou ler as tuas descrições, acabaste de perder uma venda. Mais de 1 em cada 4 adultos nos EUA tem algum tipo de deficiência. Não é um segmento de mercado pequeno. É o teu mercado.

A acessibilidade do website não é só uma questão ética. É um requisito legal. A Lei dos Americanos com Deficiência (ADA) exige que as empresas tornem os seus serviços acessíveis a pessoas com deficiência. Isto inclui lojas online. Milhares de websites recebem notificações legais todos os anos por violações de acessibilidade, e os sites de e-commerce são os mais visados. Este artigo explica o que significa acessibilidade, porque importa para a tua loja, o que a lei exige e como a implementar sem ferramentas especializadas caras.

O que é a acessibilidade de um website?

A acessibilidade de um website significa que o teu site pode ser usado por todos, incluindo pessoas com deficiência. Isto inclui pessoas cegas ou com baixa visão, surdas ou com dificuldades de audição, com deficiências motoras que tornam difícil usar o rato, com deficiências cognitivas ou de aprendizagem, ou com outras condições que afetam a forma como usam a web.

Os websites acessíveis funcionam com tecnologias de apoio, como leitores de ecrã (software que lê o texto em voz alta), navegação apenas com teclado (para quem não consegue usar o rato) e ferramentas de ampliação. Um site acessível usa também linguagem clara, contraste de cor suficiente, uma estrutura de títulos adequada e etiquetas de formulário que os leitores de ecrã conseguem interpretar.

O princípio essencial: os teus clientes devem conseguir fazer o que vieram fazer. Devem poder navegar, filtrar, ler descrições, adicionar ao carrinho e concluir o checkout, seja qual for a tecnologia de apoio ou as adaptações que usem.

O que é a ADA e porque se aplica à tua loja?

A Lei dos Americanos com Deficiência (ADA), aprovada em 1990, é uma lei federal dos EUA que proíbe a discriminação contra pessoas com deficiência. O Título III da ADA exige que todas as empresas abertas ao público garantam acesso igual a pessoas com deficiência. Isto inclui websites e serviços online. A lei não prevê isenções para pequenas empresas nem para retalhistas online.

A tua loja online conta como espaço de acesso público para efeitos da ADA. Isso significa que o teu website tem de ser acessível. Não podes argumentar que a tua loja é demasiado pequena, demasiado nova ou que a acessibilidade é demasiado cara. A lei aplica-se. Os tribunais decidiram de forma consistente que a ADA se aplica a websites, e o Departamento de Justiça dos EUA afirmou que a acessibilidade dos websites é uma questão de direitos civis, não opcional.

WCAG 2.1 Nível AA: a norma de acessibilidade

A norma de acessibilidade web usada em casos legais e requisitos de conformidade chama-se WCAG (Web Content Accessibility Guidelines) 2.1 Nível AA. A WCAG é mantida pelo World Wide Web Consortium (W3C), uma organização sem fins lucrativos que define normas para a web.

A WCAG 2.1 Nível AA inclui diretrizes em quatro áreas principais:

Percetível: os utilizadores conseguem ver ou ouvir o teu conteúdo

O teu conteúdo tem de ser apresentado de formas que os clientes consigam perceber. Isto significa dar descrições em texto (texto alternativo) a todas as imagens de produto, acrescentar legendas aos vídeos, garantir que o texto e os botões têm contraste de cor suficiente (rácio mínimo de 4,5:1 para texto normal) e evitar conteúdo que pisque mais de 3 vezes por segundo, o que pode causar convulsões.

Operável: os utilizadores conseguem navegar e interagir com a tua loja

Os utilizadores têm de conseguir navegar na tua loja usando apenas o teclado (sem precisar de rato). Os links e os botões têm de ser acessíveis por teclado. Os formulários têm de ter etiquetas claras que os leitores de ecrã consigam interpretar. A tua loja não deve prender os utilizadores de teclado em ciclos infinitos nem exigir interações com tempo limite que os utilizadores não possam ajustar. Os itens de menu e os campos de formulário têm de ser fáceis de encontrar e de usar.

Compreensível: os utilizadores percebem o que a tua loja diz e faz

A tua loja tem de ser fácil de compreender. Usa linguagem clara e frases curtas. Define o jargão na primeira vez que o usas. Organiza as páginas de forma lógica, com estruturas de títulos adequadas (um H1 por página, seguido de H2 e H3 por ordem). Explica com clareza os erros de validação dos formulários. Torna o teu site consistente, para os utilizadores poderem prever como funcionam a navegação e as interações.

Robusto: a tua loja funciona com tecnologias de apoio

O teu código tem de estar escrito corretamente para que os leitores de ecrã e outras ferramentas de apoio o consigam interpretar. Isto significa usar marcação HTML semântica adequada (os botões são mesmo elementos de botão, não divs com aspeto de botão), uma hierarquia de títulos correta e etiquetas ARIA onde forem precisas para descrever elementos interativos complexos. A tua loja deve funcionar em vários navegadores e dispositivos.

Barreiras de acessibilidade comuns nas lojas online

Estes são os problemas de acessibilidade mais frequentes nas lojas de e-commerce:

Texto alternativo em falta ou fraco nas imagens de produto

Muitas lojas online não têm texto alternativo nas imagens de produto, ou têm texto vago como "imagem" ou "foto do produto". Os utilizadores de leitores de ecrã não veem as imagens. O texto alternativo tem de descrever o que é importante na imagem. Para uma t-shirt vermelha, um bom texto alternativo é "t-shirt vermelha de algodão com gola redonda e bolso frontal" e não "camisa" ou "foto de camisa vermelha". Num seletor de variantes de produto, o texto alternativo pode descrever com clareza a amostra de cor ou a opção de estilo. Todas as imagens de produto precisam de texto alternativo exato e descritivo.

Formulários sem etiquetas adequadas

Quando um campo de formulário (caixa de email, de telefone, de morada) não tem uma etiqueta associada, ou a etiqueta é só um texto de exemplo visual, os utilizadores de leitores de ecrã não sabem o que introduzir. Os formulários bem etiquetados têm elementos de etiqueta invisíveis mas acessíveis, que dizem aos leitores de ecrã para que serve cada campo.

Sem navegação por teclado

Alguns sites exigem um rato para navegar ou concluir uma compra. Os utilizadores apenas de teclado não conseguem usar menus pendentes, não veem que item está em foco ou não conseguem percorrer os campos do formulário com Tab por uma ordem lógica. Todas as funções devem ser acessíveis por teclado. O foco do teclado deve ser visível na página, para os utilizadores saberem onde estão.

Mau contraste de cor

Texto cinzento-claro sobre fundo branco pode ser legível para ti. Não é legível para pessoas com baixa visão. O nível AA da WCAG exige um rácio de contraste de pelo menos 4,5:1 para texto normal. Os botões, os links e qualquer texto que os utilizadores precisem de ler têm de cumprir esta norma. Verifica o contraste com uma ferramenta gratuita de verificação de contraste.

Estrutura de títulos confusa

Os utilizadores de leitores de ecrã navegam muitas vezes nas páginas saltando entre títulos. Se a tua página salta de H1 para H3 e depois para H2, ou usa títulos apenas para estilo, os leitores de ecrã criam uma experiência confusa. Usa os títulos por ordem lógica para estruturar a página. Um H1 por página, depois H2 para as secções principais e H3 para as subsecções. Nunca saltes níveis de título.

Botões e links sem finalidade clara

Um botão que diz "clica aqui" não diz nada aos utilizadores de leitores de ecrã sobre o que acontece ao clicar. Usa texto de botão descritivo: "Adicionar ao carrinho", "Ver avaliações", "Avançar para o checkout". Se precisares de um botão com um ícone, inclui texto ou uma etiqueta ARIA que descreva a ação. Todos os elementos interativos têm de ter uma etiqueta clara e descritiva.

Menus pendentes e filtros inacessíveis

Menus de filtro de produtos, listas pendentes de categorias e opções de ordenação que só funcionam com rato são barreiras comuns. Os utilizadores de teclado precisam de os usar da mesma forma. Os componentes interativos complexos precisam de funções ARIA e de suporte de teclado para funcionarem com tecnologias de apoio.

Como tornar a tua loja acessível

A acessibilidade não exige contratar um consultor caro nem comprar software especializado. Começa pelo essencial:

1. Escreve texto alternativo para todas as imagens de produto

É a mudança com maior impacto. Percorre os teus produtos e escreve texto alternativo descritivo para cada imagem. Descreve o produto, a cor, o material, o estado e as características distintivas. Testa o texto alternativo lendo-o em voz alta. Alguém que não vê a imagem percebe o produto? Se não, melhora-o.

2. Garante que todos os formulários têm etiquetas adequadas

Todos os campos de formulário têm de ter um elemento de etiqueta associado no código. Não dependas do texto de exemplo. Remove o texto de exemplo quando o campo ganha foco, ou mantém-no mas acrescenta uma etiqueta real. Nos grupos de caixas de seleção e de botões de opção, agrupa-os e etiqueta-os com clareza. Os erros de validação do formulário devem ser específicos e dizer aos utilizadores exatamente o que corrigir.

3. Garante que a navegação por teclado funciona

Testa toda a tua loja usando apenas o teclado. Prime Tab para navegar. Consegues chegar a todos os botões, links e formulários? Consegues ver onde está o foco? A ordem do Tab é lógica (da esquerda para a direita, de cima para baixo)? Se os utilizadores de teclado ficam presos ou não chegam a algo, corrige. A maioria das barreiras de acessibilidade são barreiras de teclado.

4. Verifica e melhora o contraste de cor

Usa uma ferramenta gratuita de verificação de contraste na página de produto, nos botões, nos links e nas etiquetas dos formulários. Garante que o texto cumpre um contraste de 4,5:1 para texto normal e de 3:1 para texto grande (18 pt ou mais). Não dependas só da cor para transmitir informação (por exemplo, "os artigos vermelhos estão em promoção"). Acrescenta etiquetas de texto ou ícones para reforçar o significado.

5. Corrige a estrutura de títulos

Faz uma auditoria à estrutura das tuas páginas. Deves ter um H1 (o título principal da página), depois H2 para as secções principais e H3 para as subsecções. Nunca saltes níveis de título. Usa os títulos para estruturar o conteúdo de forma lógica, não para estilo. Se precisares de texto estilizado que não seja um título a sério, usa uma div e CSS, não uma etiqueta de título.

6. Escreve texto claro nos links e botões

Os utilizadores de leitores de ecrã abrem muitas vezes uma lista com todos os links de uma página. Os links devem fazer sentido fora de contexto. "Saber mais sobre as opções de envio" é melhor do que "saber mais". "Ver avaliações do produto" é melhor do que "ler avaliações". Os botões devem descrever com clareza a ação: "Adicionar ao carrinho", "Avançar para o checkout", "Guardar para depois".

7. Testa com tecnologia de apoio

Descarrega um leitor de ecrã gratuito para Windows ou usa as ferramentas de acessibilidade integradas no Mac e no iPhone. Ouve como o teu site soa. Consegues concluir uma compra usando apenas o teclado e o leitor de ecrã? Este é o teste real da acessibilidade. Muitas barreiras tornam-se óbvias quando tentas usar a tua própria loja como utilizador cego ou apenas de teclado.

Testes e auditorias de acessibilidade

Depois de fazeres alterações, testa a acessibilidade da tua loja. Começa por estas ferramentas:

Ferramentas de teste automático

Ferramentas gratuitas de teste de acessibilidade, como o Lighthouse (integrado no Chrome), analisam as tuas páginas e assinalam problemas comuns, como texto alternativo em falta, contraste baixo e má estrutura de títulos. Estas ferramentas apanham talvez 30% dos problemas de acessibilidade, por isso são um ponto de partida, não a resposta completa. Usa-as para uma análise rápida, mas não assumas que a ausência de alertas significa que o teu site é totalmente acessível.

Teste com teclado

Navega no teu site usando apenas Tab, Shift+Tab, Enter e as setas. Sem rato. É o teste mais importante. Consegues concluir todas as tarefas? Ficas preso? O foco está visível? A ordem do Tab faz sentido? Se a navegação por teclado estiver avariada, a tua loja não cumpre a norma de acessibilidade, independentemente do que dizem as ferramentas automáticas.

Teste com leitor de ecrã

Ouve o teu site com um leitor de ecrã gratuito (no Windows) ou com o leitor de ecrã integrado no Mac. O leitor de ecrã descreve as imagens de produto com clareza? Consegues perceber as etiquetas dos formulários? A navegação faz sentido? Há botões ou links sem explicação? As auditorias profissionais de acessibilidade contratam muitas vezes testadores cegos para usarem o teu site, mas podes apanhar os problemas principais fazendo tu mesmo testes básicos com um leitor de ecrã.

Revisão manual do código

Verifica se o teu código HTML tem marcação semântica adequada. Os botões devem ser elementos de botão, não divs estilizadas. Os links devem ser etiquetas de âncora. Os campos de formulário precisam de elementos de etiqueta. Os títulos devem ser etiquetas h1, h2, h3 por ordem, não h1, h3, h2. Um bom HTML semântico é a base da acessibilidade.

Como a WEMASY ajuda na acessibilidade

O criador de websites da WEMASY foi construído a pensar na acessibilidade. A plataforma inclui estrutura HTML semântica, tratamento adequado de formulários com etiquetas acessíveis, menus e funções de carrinho navegáveis por teclado e ferramentas para acrescentar texto alternativo às imagens com facilidade. Quando usas a WEMASY para construir a tua loja, o HTML de base já está estruturado para a acessibilidade. Não herdas código inacessível da plataforma.

Isto não significa que o teu site seja automaticamente totalmente acessível: continuas a precisar de dar bom texto alternativo, usar linguagem clara e testar com utilizadores reais. Mas a base da WEMASY elimina muitas das barreiras comuns que afetam outras plataformas de e-commerce. Vê o que está incluído em cada plano na nossa página de preços.

O argumento de negócio para a acessibilidade

Para além do cumprimento legal, a acessibilidade é bom negócio. Os sites acessíveis são mais fáceis de usar para toda a gente, não só para pessoas com deficiência. Linguagem clara, bom contraste, estrutura lógica e navegação por teclado beneficiam utilizadores mais velhos, utilizadores de dispositivos móveis, utilizadores em ambientes ruidosos e utilizadores com internet lenta. Um site acessível a pessoas com deficiência é um site melhor para todos os utilizadores.

De forma mais direta: 1 em cada 4 adultos nos EUA tem uma deficiência. São cerca de 65 milhões de pessoas. Se a tua loja não for acessível, estás a excluir um mercado enorme. Estás também a deixar dinheiro em cima da mesa. Os compradores cegos e com baixa visão gastam milhares de milhões online. Querem comprar na tua loja. Torna isso possível.

Do lado legal, o risco é real. Foram apresentadas mais de 5000 ações judiciais sobre acessibilidade de websites em 2025. Os sites de e-commerce representam 70% desses casos. Uma notificação por violações de acessibilidade custa tempo e honorários jurídicos para a defender. Fazer um acordo sem corrigir os problemas de fundo só convida a mais reclamações. A abordagem mais inteligente é corrigir o teu site agora, documentar os teus esforços e evitar o problema por completo.

Para começar

Se a tua loja não for acessível, não entres em pânico. Começa pelas correções de maior impacto: texto alternativo, navegação por teclado e contraste. Estas três alterações resolvem a maioria das barreiras de acessibilidade. Testa com navegação por teclado e com um leitor de ecrã. Corrige os problemas que encontrares. Documenta o teu trabalho. Volta a testar com regularidade, sobretudo depois de fazeres alterações ao site. A acessibilidade não é um projeto pontual: é uma prática contínua de construir de forma inclusiva.

Perguntas frequentes

A minha loja pequena está mesmo sujeita à ADA?

Sim. A ADA aplica-se a todas as empresas abertas ao público, independentemente da dimensão. Não há isenção para pequenas empresas. Se vendes online, o teu website está abrangido.

Qual é a diferença entre acessível e conforme?

Acessível significa que o teu site pode realmente ser usado por pessoas com deficiência. Conforme significa que cumpre uma norma técnica, como a WCAG 2.1 Nível AA. Um site pode cumprir tecnicamente a norma e continuar difícil de usar, ou pode ser muito fácil de usar e não ser tecnicamente perfeito. O objetivo é ter as duas coisas: acessível na prática e conforme com a norma.

Preciso de contratar alguém para tornar a minha loja acessível?

Não necessariamente. Se a tua loja tem problemas fundamentais (texto alternativo em falta, mau contraste, navegação por teclado avariada), podes corrigir muitos deles tu mesmo. Escreve texto alternativo, verifica o contraste com uma ferramenta gratuita, testa com o teclado e com um leitor de ecrã. Se o teu site foi construído numa plataforma moderna com estrutura HTML adequada, corrigir a acessibilidade é muitas vezes simples. Sites maiores, com funcionalidades complexas, podem beneficiar de uma auditoria profissional, mas as lojas pequenas conseguem muitas vezes corrigir as maiores barreiras internamente.

E se eu receber uma notificação por falta de acessibilidade?

Leva-a a sério. Não a ignores. As notificações costumam dar-te um prazo para corrigir os problemas. Trabalha com o teu programador ou com o apoio da plataforma para resolver as violações específicas mencionadas. Documenta tudo o que fizeres. Podes também querer consultar um advogado que conheça a lei da acessibilidade. Fazer um acordo sem corrigir os problemas de fundo não é uma solução a longo prazo: corrige o site.

Tornar o meu site acessível vai atrasar o tempo de carregamento?

Não. Acessibilidade e desempenho são coisas separadas. Um site pode ser rápido e inacessível, ou lento e acessível. O HTML semântico (a estrutura de código necessária para a acessibilidade) é muitas vezes mais leve e mais rápido do que código mal escrito. Muitas melhorias de acessibilidade, como uma estrutura de títulos adequada e linguagem clara, não têm qualquer impacto na velocidade.

A WCAG 2.1 Nível AA cobre tudo o que preciso para estar em conformidade legal?

A WCAG 2.1 Nível AA é a norma referida na maioria dos casos legais de acessibilidade. É o critério que os tribunais usaram para avaliar se um website é acessível. Cumprir a WCAG 2.1 Nível AA é a melhor forma de demonstrar que levaste a acessibilidade a sério e cumpriste a norma legal.

Leitura relacionada: Política de privacidade, consentimento de cookies e RGPD para a tua loja e Como proteger a tua marca e os teus produtos contra cópias.

Põe isto em prática
no teu próprio site.

Começa grátis com a WEMASY e cria o teu site em poucos minutos.