Check-list de 10 pontos para cumprir a acessibilidade web

Ter um site com boa acessibilidade web é uma forma de garantir que cada visitante consegue chegar à parte do "Obrigado pela sua encomenda" do processo de venda de forma fácil e eficiente. Os verdadeiros benefícios da acessibilidade podem traduzir-se em mais visitantes, mais interação e um caminho mais suave até à finalização da compra.

Este guia abrange tudo o que precisa de saber sobre acessibilidade de sites, incluindo por que razão é importante e o que pode fazer para o garantir.

O que é a conformidade com a acessibilidade web?

A conformidade com a acessibilidade web segue regras que garantem que as pessoas com deficiência conseguem utilizar sites, lojas online, aplicações móveis e outros serviços digitais em condições de igualdade. Em Portugal, este dever assenta sobretudo na Lei n.º 46/2006, de 28 de agosto, que proíbe e pune a discriminação em razão da deficiência, incluindo no acesso a bens, serviços, transportes e novas tecnologias.

O Decreto-Lei n.º 82/2022, de 6 de dezembro transpôs a Diretiva (UE) 2019/882 (European Accessibility Act) para a legislação portuguesa. Este diploma define requisitos de acessibilidade para determinados produtos e serviços disponibilizados aos consumidores, tais como serviços de e-commerce, aplicações móveis, serviços bancários, comunicações eletrónicas e e-books.

Quais são as diretrizes de acessibilidade do conteúdo web?

Em Portugal e na União Europeia, a referência técnica mais utilizada para a acessibilidade de sites são as Web Content Accessibility Guidelines (WCAG), desenvolvidas pelo W3C. A versão mais recente, WCAG 2.2, organiza os critérios em três níveis: A, AA e AAA.

O Nível A é o requisito mais básico de acessibilidade, como tornar o conteúdo navegável por teclado. O Nível AA é o que a maioria dos sites procura alcançar. Inclui aspetos como o contraste de cor e o texto alternativo. A Shopify, por exemplo, testa continuamente conteúdos e funcionalidades para que fiquem em conformidade com o Nível AA e oferece recursos de formação para programadores (apenas em inglês) dirigidos a comerciantes e parceiros. Por fim, a conformidade com o nível AAA é a mais rigorosa e tem diretrizes que reforçam ainda mais a acessibilidade, como a interpretação em língua gestual para todos os conteúdos de vídeo pré-gravados, um rácio de contraste de pelo menos 7:1 e um nível de leitura mais acessível para o conteúdo.

Adicionalmente, as WCAG dão um enquadramento para a acessibilidade de sites, que contém 4 princípios fundamentais:

• Percetível: atribua um texto alternativo a cada imagem relevante, para que os visitantes que utilizam tecnologia de apoio, como leitores de ecrã, compreendam o que está no ecrã.
• Operável: evite designs que pressupõem navegação apenas com o rato; certifique-se de que a navegação, os menus pendentes e os formulários online funcionam tanto com o teclado como com o rato.
• Compreensível: mantenha as etiquetas e as mensagens de erro claras e dê pistas não visuais para que os visitantes saibam sempre o que fazer a seguir.
• Robusto: use HTML semântico ao programar, para que as ferramentas de apoio e os futuros navegadores consigam interpretar o seu conteúdo web sem falhas.

Qual o porquê da importância da acessibilidade web

Tornar o site acessível é importante por razões que vão além da conformidade legal. A Sara Mote, diretora criativa da agência de design digital Studio Mote, diz que, embora a acessibilidade seja uma questão legal que recomenda aos clientes discutirem com os seus advogados, também é, em resumo, um bom design.

"Certos designs são boas práticas não só para a acessibilidade, mas também para a experiência global do utilizador, porque há muita sobreposição", afirma. "O design tem o poder de cativar um público, transmitir informação e evocar emoções, o que influencia diretamente a decisão de compra do consumidor. Em suma, um bom design aumenta a qualidade destas conversas.".

Algumas razões adicionais pelas quais a acessibilidade de um site é importante:

• Ética: remover barreiras digitais (como falta de contraste, navegação apenas por rato ou ausência de texto alternativo) faz com que mais pessoas utilizem um site de forma autónoma e participem plenamente na vida digital.
• Potencial de receita: ter um design inclusivo pode aumentar o público de uma loja online. Código limpo, texto alternativo descritivo, navegação por teclado e bom contraste de cores melhoram a experiência de compra e podem contribuir para o aumento das conversões e vendas.
• Reputação: se um site for difícil de utilizar por pessoas com deficiência, pode ser percecionado como pouco inclusivo, tal irá afetar a marca e fazer com que os potenciais clientes escolham concorrentes mais acessíveis.
• Responsabilidade: em Portugal, o Decreto-Lei n.º 82/2022, que transpõe a Diretiva (UE) 2019/882, estabelece requisitos de acessibilidade para serviços como o e-commerce, com aplicação desde 28 de junho de 2025. Seguir as WCAG é a forma mais prática de conseguir a conformidade digital.

"A acessibilidade é algo que remete para a facilidade cognitiva", diz a Sara. "É verdadeiramente vantajoso ter isto em conta no design e fazer escolhas que permitam ao utilizador navegar pelo site sem obstáculos.".

Check-list de acessibilidade web

Veja exemplos práticos das medidas de acessibilidade web que pode aplicar no seu site, reunidos a partir dos critérios WCAG (apenas em inglês), das boas práticas da Shopify e das check-lists da WebAIM (apenas em inglês) que traduzem as WCAG em linguagem simples:

1. Coloque legendas e descrições de áudio em todos os vídeos
2. Use o rácio de contraste correto
3. Permita aos utilizadores redimensionar ou mudar para tipos de letra acessíveis
4. Adicione etiquetas ARIA a botões, ícones e campos de formulário
5. Inclua uma ligação "saltar para o conteúdo principal" no topo de cada página web
6. Mantenha os elementos intermitentes abaixo dos limiares seguros para prevenir convulsões
7. Garanta que as janelas pop-up retêm o foco e ofereça sempre um botão de fecho acessível por teclado
8. Mostre os erros de formulário em texto e ligue-os através do programa aos campos corretos
9. Escreva CTAs descritivos
10. Combine análises automáticas com verificações manuais

1. Coloque legendas e descrições de áudio em todos os vídeos

Colocar legendas em vídeos pré-gravados é uma das diretrizes AAA das WCAG. Além disso, os motores de pesquisa conseguem indexar o texto das legendas, o que melhora a descoberta dos vídeos nas pesquisas.

Por exemplo, o site da Gymshark inclui vídeos incorporados com legendas.

2. Use o rácio de contraste correto

Mantenha um rácio de contraste de cor de, pelo menos, 4,5:1 para o texto e elementos interativos. Um rácio de contraste de cor de pelo menos 4,5:1 faz com que o texto e os elementos visuais importantes se destaquem claramente dos fundos. Ou seja, ficam legíveis para pessoas com deficiências visuais, incluindo para aquelas que têm baixa visão e daltonismo. Pode usar ferramentas como o Verificador de Contraste da WebAIM (apenas em inglês) para testar as suas combinações de cores e o respetivo rácio de contraste.

A ColourPop, por exemplo, usa um rácio de contraste de 4,5:1 para garantir uma legibilidade consistente.

3. Permita aos utilizadores redimensionar ou mudar para tipos de letra acessíveis

Dar aos utilizadores a possibilidade de redimensionar o texto ou mudar para tipos de letra mais acessíveis pode ajudar as pessoas com baixa visão, utilizadores com dislexia e adultos mais velhos que têm dificuldade em ler textos pequenos ou densos. É uma forma de ajudar na concentração, reduzir o cansaço visual e aumentar a compreensão desse texto.

A Good Good Golf tem um conjunto completo de opções de acessibilidade, incluindo ajustes do tipo de letra, em todas as páginas do site.

4. Adicione etiquetas ARIA a botões, ícones e campos de formulário

As etiquetas ARIA garantem que a tecnologia de apoio consegue anunciar cada elemento interativo ao utilizador e o que faz. Por exemplo, a marca de vestuário Taylor Stitch adiciona etiquetas ARIA ao código do site para que os leitores de ecrã possam informar os utilizadores sobre para que serve cada funcionalidade.

5. Inclua uma ligação "saltar para o conteúdo principal" no topo de cada página web

Um botão ou ligação para saltar para o conteúdo principal faz com que os utilizadores de teclado e de leitores de ecrã consigam passar à frente dos menus e cabeçalhos para chegar diretamente ao conteúdo principal. Isto poupa tempo e reduz a frustração de todos os que querem um acesso mais rápido, sem terem de usar a tecla Tab ou de fazer scroll em excesso.

Os sites podem adicionar uma ligação oculta no topo da página que apenas fica visível quando selecionada, normalmente, antes do código de navegação no HTML, para que os utilizadores de teclado a encontrem primeiro. O código CSS faz com que apareça apenas quando se pressiona a tecla Tab após o carregamento da página.

A Taylor Stitch é um exemplo de um site que faz isto. Um botão "Saltar para o conteúdo" aparece quando os utilizadores pressionam a tecla Tab ao carregar a página.

6. Mantenha os elementos intermitentes abaixo dos limiares seguros para prevenir convulsões

Se uma animação tiver menos de três intermitências por segundo, está dentro das diretrizes das WCAG. Os programadores podem conseguir isto com estilos CSS que garantem que a transição se mantém abaixo desse limiar. É o que acontece na página inicial da MVMT, que usa o código CSS de opacidade para manter as animações abaixo do limiar que pode provocar convulsões.

O efeito "ease-in" ajuda a fazer surgir a animação de forma suave. Isto beneficia, de um modo geral, todos os utilizadores, ao proporcionar um layout mais fluido e visualmente mais apelativo, ao mesmo tempo que reduz o caos visual para pessoas com deficiências cognitivas. Os utilizadores sensíveis ao movimento e as pessoas com risco de convulsões também são tidos em conta, pelo que mais pessoas conseguem aceder ao conteúdo em segurança.

7. Garanta que as janelas pop-up retêm o foco e ofereça sempre um botão de fecho acessível por teclado

Quando a página carrega, garantir que o foco do teclado se move automaticamente para o primeiro elemento selecionável, por exemplo, para um botão de fecho ou um campo de entrada, evita que os utilizadores de teclado e de leitores de ecrã fiquem presos atrás de uma janela modal. A retenção do foco agiliza o fecho de janelas pop-up sem recurso ao rato.

No site da Brooklinen, por exemplo, o botão de fecho no canto superior direito é acessível por teclado para utilizadores que usam leitores de ecrã e/ou sistemas de navegação apenas por teclado.

8. Mostre os erros de formulário em texto e ligue-os através do programa aos campos corretos

Ao tratar de erros relacionados com informação em falta ou incorreta que os utilizadores submetem num formulário web, é melhor incluir um erro claro em texto a que os leitores de ecrã, as pessoas com deficiências cognitivas e os utilizadores cegos ou com baixa visão consigam aceder.

Na imagem abaixo, o campo de entrada do tema Dawn da Shopify inclui uma saída de texto para um erro de "sem endereço de e-mail" quando um utilizador clica no botão cinzento para descarregar um tema.

9. Escreva CTAs descritivos

Um texto de botão claro e descritivo e um texto-âncora adequado para as ligações podem ajudar os utilizadores cegos e com baixa visão que dependem de leitores de ecrã a saber o que faz um botão antes de o ativarem. Também pode ajudar pessoas com deficiências cognitivas que beneficiam de linguagem clara, bem como todas as outras, já que usar uma linguagem específica nos botões torna uma página mais fácil de examinar e utilizar.

No site da Brooklinen, o botão azul no centro direito da página está claramente identificado com "Find Your Store" (Tradução livre “Encontre a sua loja”). Os utilizadores sabem o que faz sem terem de passar o cursor por cima ou de o ativar.

10. Combine análises automáticas com verificações manuais

As equipas de sites podem usar ferramentas automáticas como o Axe ou o Lighthouse para encontrar problemas de acessibilidade. Também pode usar aplicações de acessibilidade da Shopify especializadas para verificar a acessibilidade do site. "A Shopify tem todo um conjunto de ferramentas integradas para algumas das melhores práticas de acessibilidade", diz a Sara. "Muitos dos nossos clientes usam uma aplicação que garante que estão em conformidade com as diretrizes, ou optam por pagar uma auditoria completamente externa com uma equipa de acessibilidade altamente especializada.".

Testar manualmente os problemas, de preferência com pessoas que usam leitores de ecrã ou têm outras deficiências, pode detetar problemas que as ferramentas automáticas não captam. Isto permite-lhe identificar lacunas de acessibilidade e resolver problemas quando lança o site e antes de cada atualização.