1. Introdução 

A 28 de junho de 2025, entra em vigor em Portugal a legislação europeia relativa à acessibilidade digital (Diretiva (UE) 2019/882), que estabelece requisitos obrigatórios para a disponibilização de produtos e serviços acessíveis no espaço da União Europeia. 

Na Cegid PHC, comprometemo-nos com a criação de soluções digitais acessíveis. Este guia foi desenvolvido para apoiar os nossos parceiros e clientes na configuração e personalização de websites e aplicações compatíveis com os requisitos legais e técnicos de acessibilidade. 

Garantir experiências acessíveis não é apenas cumprir uma obrigação legal, é assegurar que todos os utilizadores têm acesso equitativo aos seus produtos e serviços. Com pequenas adaptações e atenção aos detalhes, é possível garantir conformidade com a legislação e melhorar significativamente a qualidade das suas soluções digitais. 

      2. A quem se aplica esta legislação? 

A nova legislação aplica-se a entidades privadas que disponibilizam: 

• Websites, aplicações móveis ou plataformas digitais para clientes finais; 

• Software de gestão, faturação, comércio electrónico, e-learning ou serviços financeiros; 

• Soluções digitais comercializadas no espaço da União Europeia. 

Desde que sejam utilizados por consumidores finais. 

      3. O que é a acessibilidade digital? 

A acessibilidade digital garante que qualquer pessoa (incluindo pessoas com deficiência visual, auditiva, motora ou cognitiva) consegue aceder, navegar e interagir com um serviço digital de forma independente, eficaz e equitativa. 

Além de ser uma obrigação legal, a acessibilidade é um investimento em inclusão, usabilidade e reputação. 

      4. Princípios de acessibilidade (WCAG 2.1 — Nível AA) 

As diretrizes WCAG (Web Content Accessibility Guidelines) são a base técnica adoptada pela legislação europeia. Assegurar conformidade com o nível AA das WCAG 2.1 significa respeitar quatro princípios fundamentais: 

      5. Práticas recomendadas ao configurar o seu website 

5.1 Imagens 

• Utilize o atributo alt para fornecer descrições adequadas às imagens com significado informativo. 
  Exemplo: 
  <img src="campanha.png" alt="Campanha de descontos de verão"> 

Exemplo correto: 

<img src="exportar-faturas.png" alt="Ícone de exportação de faturas em PDF"> 

Exemplo incorreto: 

<img src="exportar-faturas.png"> 

Sem alt — utilizadores com leitor de ecrã não recebem contexto 

Dica Cegid PHC: ícones de ação como “Adicionar ao carrinho”, “Finalizar compra”, “Editar” ou “Eliminar” devem sempre ter alt ou um aria-label, mesmo que sejam apenas imagens. 

5.2 Cores e contraste 

• Garantir um contraste mínimo de 4.5:1 entre texto normal até 17 pt e fundo e 3:1 para texto grande 18 pt e superior ou 14 pt e superior em negrito. 

• Evite transmitir informação apenas por cor (ex: “botão verde para continuar”). 

Exemplo correto: 

Texto azul escuro (#1E3A8A) sobre fundo claro (#F5F5F5) → contraste forte. 

Exemplo incorreto: 

Texto cinzento-claro (#A8A8A8) sobre fundo branco (#FFFFFF) → contraste insuficiente. 

Dica Cegid PHC: Use ferramentas para validar como:  

• Contrast Checker;  

• Adobe Color; 

5.3 Ligações e botões 

• Use textos descritivos nas hiperligações. 
   “Clique aqui para registar” →  “Registar nova conta” 

Contexto (no produto)	Exemplo correto	Exemplo incorreto
Página de produto	Ver detalhes do produto	Ver mais ou Clique aqui
Carrinho de compras	Remover este produto do carrinho	Remover (sem contexto)
Finalização de compra	Continuar para pagamento	Continuar (sem contexto)
Lista de desejos	Adicionar à lista de desejos	Ícone de coração sem rótulo

• Evitar palavras genéricas como “aqui”, “mais”, “ver”, “continuar” sem contexto. 

• Usar sempre botões com aria-label ou alt quando há apenas ícones. 

• Garantir que o texto do botão responde à pergunta: "O que acontece se eu clicar aqui?" 

Aplicação em código: 

 Exemplo correto: 

<button aria-label="Adicionar linha de produto"> 

  <img src="icon-add.svg" alt=""> 

</button> 

 Exemplo incorreto: 

<button><img src="icon-add.svg"></button> 

Sem texto nem aria-label  

5.4 Navegação por teclado 

• Teste o sítio apenas com o teclado (teclas Tab, Enter, Esc). Podemos ver nos atalhos dos navegadores. 

• Certifique-se de que modais, menus e formulários são totalmente acessíveis desta forma. 

• Manter a ordem lógica de leitura por teclado: Tab deve mover-se da esquerda para a direita e de cima para baixo. 

• Evitar conteúdo que apareça apenas com hover do rato (ex: botões de acão escondidos). 

• Permitir navegação por teclado entre linhas e células com setas, quando possível. 

Deve ser possível: 

• Navegar até aos campos; 

• Abrir um modal com Enter; 

• Fechar com Esc; 

• Mover entre botões com Tab e Shift+Tab; 

5.5 Formulários 

• Cada campo deve estar associado a uma etiqueta (<label>). 

 Exemplo correto: 

<label for="data-entrega">Data de Entrega</label> 

<input id="data-entrega" type="date"> 

 Exemplo incorreto: 

<input type="date" placeholder="Data de Entrega"> 

<!-- Apenas placeholder não é acessível --> 
 

5.6 Acessibilidade móvel 

Em aplicações móveis é essencial garantir: 

• Botões com tamanho adequado para toque (mínimo 44x44px); 

• Distância entre elementos interativos; 

• Layout que se adapta a diferentes tamanhos de ecrã (responsivo); 

Exemplo correto: 

Botões com tamanho adequado para toque (mínimo 44x44px); 

 Exemplo incorreto: 

Botão “Eliminar” demasiado pequeno ao lado do botão “Editar”; 

5.7 Componentes personalizados (ex: grelhas, painéis, tabs) 

Seguir as seguintes boas práticas para garantir acessibilidade e usabilidade: 

• Tabs: Use aria-selected e role="tablist" para comunicar qual separador está ativo; 

• Grelhas: Evite que colunas essenciais fiquem escondidas ou sem rótulo; 

• Tooltips: Nunca dependa apenas de hover, garanta foco por teclado e alternativa descritiva. 

5.8 Títulos e estrutura lógica 

A hierarquia correta de títulos é essencial para que utilizadores (e leitores de ecrã) compreendam a estrutura da página, contexto da informação e ordem de leitura. 

• Use os elementos HTML <h1>, <h2>, <h3>, etc., de forma sequencial e lógica. 

• Comece sempre com um único <h1> por página. 

• Use subtítulos como <h2>, <h3>, <h4>... para dividir o conteúdo hierarquicamente. 

• Nunca salte níveis (ex: de <h2> para <h4>). 

 Exemplo correto: 

<h1>Portal do Cliente Cegid PHC</h1> 

<h2>1. Dados da Empresa</h2> 

<h3>1.1 Informações Fiscais</h3> 

<h3>1.2 Contactos Principais</h3> 

<h2>2. Documentos Recentes</h2> 

<h3>2.1 Faturas Emitidas</h3> 

<h3>2.2 Guias de Transporte</h3> 

- Exemplo incorreto: 

<h1>Portal do Cliente Cegid PHC</h1> 

<h2>1. Dados da Empresa</h2> 

<h4>1.1 Informações Fiscais</h4> <!-- Erro: salta <h3> --> 

<h2>2. Documentos</h2> 

<h4>2.1 Faturas</h4> <!-- Salto de nível de novo --> 

Problema: Leitores de ecrã podem interpretar que o conteúdo está fora de ordem ou sem relação hierárquica, prejudica a navegação por headings. 

5.9 Mensagens de erro 

As mensagens de erro devem ser claras, visíveis e compreensíveis para todos os utilizadores, incluindo pessoas que utilizam leitores de ecrã ou navegam apenas com teclado. 

A mensagem deve: 

• Indicar claramente o que aconteceu; 

• Especificar o campo ou ação relacionada; 

• Sugerir uma forma concreta de resolver o problema; 

• Evitar jargões técnicos ou mensagens genéricas; 

Exemplos práticos:

Contexto	Mensagem acessível	Mensagem incorreta
Campo obrigatório	“O campo 'Nome completo' é obrigatório.”	“Campo inválido”
E-mail mal formatado	“Introduza um endereço de e-mail válido, como exemplo@dominio.pt.”	“Erro: input não aceite”
Palavra-passe fraca	“A palavra-passe deve ter pelo menos 8 caracteres, com letras e números.”	“Erro de validação”
Número fora do intervalo	“O valor tem de estar entre 1 e 100.”	“Valor fora do intervalo permitido”
Erro genérico no envio	“Ocorreu um problema ao enviar os dados. Tente novamente ou contacte o suporte.”	“Erro 500”

      6. Ferramentas para verificar acessibilidade

6.1 Cores e contrastes 

• Adobe color – Ferramenta para criar e testar paletas de cores com contraste acessível. 

• Contrast checker – Ferramenta para testar o contraste entre o texto e o fundo cumpre os critérios das WCAG. 

6.2 Análise geral de acessibilidade 

• Silktide – Avaliação automática de acessibilidade com relatórios visuais e sugestões de melhoria. Possui extensão gratuita para Chrome, ideal para testes rápidos em páginas web. Instalar plugin 

• Includia – Plataforma portuguesa que avalia acessibilidade e sugere melhorias com base nas WCAG. Ideal para revisões globais. Possui extensão gratuita para Chrome, ideal para testes rápidos em páginas web. Instalar plugin 

6.3 Leitores de ecrã (screen readers) 

• NVDA – Leitor de ecrã gratuito que permite testar a navegação com teclado e ouvir o conteúdo tal como um utilizador cego. 

• VoiceOver - Leitor de ecrã nativo em dispositivos Apple (macOS e iOS). Ativar em Preferências do Sistema > Acessibilidade. 

6.4 Como usar as ferramentas 

6.4.1 Adobe color 

Passo a passo para testar contraste com Adobe Color 

1. Aceda ao site: 
   https://color.adobe.com/create/color-contrast-analyzer 

2. Selecione o separador “Ferramentas de acessibilidade” 
   É a ferramenta de verificação de contraste entre duas cores (texto e fundo). 

3. Introduza as cores que pretende testar 
   a) Clique nas caixas de cor ou introduza os códigos hexadecimais (ex: #1E3A8A para azul escuro e #FFFFFF para branco).
   b) Pode testar pares diferentes (ex: botões, títulos, texto sobre fundo colorido, etc.) 

4. Verifique o resultado de acessibilidade 
   O Adobe Color indica se a combinação passa ou falha os seguintes critérios: 
   a) Texto normal (WCAG AA e AAA) 
   b) Texto grande (acima de 18px) 
   c) Elementos gráficos e interfaces de utilizador 

5. Faça ajustes conforme necessário 
   a) Se falhar, experimente cores mais escuras para o texto ou fundos mais claros. 
   b) O Adobe Color sugere automaticamente alternativas acessíveis. 

6.4.2 Silktide 

Passo a passo para testar contraste com Silktide 

1. Aceda ao site: 

 https://www.silktide.com 
Ou diretamente à ferramenta gratuita: https://web.dev/accessibility/ (caso esteja a usar o Silktide em integração com ferramentas como Web Vitals) 

2. Introduza o URL da página que pretende analisar 

Na área indicada, insira o endereço completo do site (ex: https://www.seusite.pt) e inicie a análise. 

3. Veja os resultados gerais da avaliação  

O Silktide apresenta uma pontuação geral de acessibilidade com base em múltiplos critérios: 

• Contraste de cores 

• Tamanho e hierarquia de títulos 

• Navegação por teclado 

• Texto alternativo em imagens 

• Compatibilidade com leitores de ecrã 

4. Explore os relatórios interativos 

Silktide apresenta sugestões visuais e orientações para correção diretamente sobre a página ou em relatórios detalhados. 

• Seções de prioridade alta e baixa 

• Recomendações práticas 

• Links diretos para a norma WCAG correspondente a cada problema 

5. Implemente as melhorias sugeridas 

Use os relatórios como guia para ajustar o conteúdo ou o código-fonte. 

6. Reavalie após aplicar as correções 

Volte a testar a página para verificar se os erros foram resolvidos e se a pontuação melhorou 

6.4.3 Includia 

Passo a passo para testar contraste com Includia 

1. Aceda ao site: 
   https://www.includia.pt 

2. Crie uma conta ou inicie sessão 
   O Includia requer autenticação para aceder às ferramentas de análise. O registo é gratuito. 

3. Escolha o tipo de análise que pretende realizar 

A plataforma oferece diferentes tipos de avaliação: 

• Teste automático de acessibilidade 

• Simuladores de deficiências visuais ou motoras 

• Análises orientadas por WCAG 

• Sugestões específicas para setores (educação, serviços públicos, etc.) 

4. Insira o URL do site ou carregue o conteúdo a analisar 
   Pode submeter uma página web, carregar ficheiros ou analisar componentes específicos da interface. 

5. Consulte os resultados e recomendações personalizadas 

O Includia apresenta: 

• Erros críticos e sugestões de correção 

• Comparações com benchmarks nacionais 

• Indicadores de conformidade com a legislação europeia (ex: Diretiva 2019/882) 

6. Implemente melhorias e documente a conformidade 
   A plataforma permite gerar relatórios de conformidade e planos de ação, úteis para justificar auditorias ou processos de certificação. 

7. Volte a testar sempre que fizer alterações significativas 

O ciclo de melhoria contínua é essencial para manter os níveis de acessibilidade. 

      7. Recursos úteis 

• WCAG 2.1 – Conjunto de diretrizes de Acessibilidade Digital para Conteúdo Web internacional, desenvolvidas pelo W3C para tornar conteúdos web mais acessíveis a pessoas com deficiências. Organiza-se em quatro princípios: perceptível, operável, compreensível e robusto. 

• Guia de acessibilidade — W3C – Guia que oferece orientações práticas para avaliar e testar a acessibilidade de sites e aplicações, incluindo ferramentas, métodos e etapas de verificação. 

• Diretiva Europeia 2019/882 – Lei que estabelece obrigações legais sobre acessibilidade em produtos e serviços digitais no espaço europeu, visando garantir inclusão e igualdade de acesso para todos os cidadãos.