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.

Esta diretiva foi transposta para a legislação portuguesa através do Decreto-Lei n.º 82/2022, que define as normas a cumprir por empresas que desenvolvem ou comercializam soluções digitais em território nacional.

 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? 

O software de gestão, enquanto produto de software disponibilizado no mercado, pode estar abrangido pelo Decreto-Lei n.º 82/2022 caso se enquadre nas categorias previstas no diploma:

• Equipamento informático com sistemas operativos;
• Serviços de comércio eletrónico;
• Serviços bancários;
• Serviços relacionados com transportes;
• Serviços de comunicações eletrónicas;
• Livros eletrónicos e serviços de leitura digital.

Se o software de gestão for:

• Comercializado ao público em geral, ou
• Utilizado como plataforma de acesso a serviços abrangidos (por exemplo, comércio eletrónico, faturação online, gestão de encomendas, etc.), então poderá estar sujeito aos requisitos de acessibilidade definidos na legislação.

Por outro lado, softwares utilizados exclusivamente em ambiente empresarial interno (B2B), sem interface com o público ou utilizadores finais abrangidos, poderão não estar abrangidos diretamente pelo diploma, embora seja sempre recomendado seguir boas práticas de acessibilidade.

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. Uma página web construída com boas práticas de HTML e em conformidade com os princípios de acessibilidade é, naturalmente, mais bem estruturada, mais fácil de manter e melhor indexada pelos motores de busca, o que contribui positivamente para o desempenho em SEO.

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 no HTML 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”

5.10 Zoom até 200% sem perda de conteúdo

É obrigatório garantir que o utilizador consegue aumentar o zoom da página até 200%, sem que haja corte de texto, sobreposição de elementos, campos de input inacessíveis ou quebra na estrutura visual que impossibilite o entendimento do conteúdo. 

Esta prática é fundamental para utilizadores com baixa visão que navegam com zoom nativo do browser ou ferramentas de ampliação. 

Boas práticas: 

• Use layouts responsivos baseados em percentagens ou unidades relativas (em, rem) 

• Evite conteúdos fixos em px que não se ajustam 

• Teste com Ctrl + (Windows) ou Cmd + (Mac) até 200% 

• Valide se todos os botões, campos e textos continuam funcionais e legíveis 

5.11 Conteúdo audiovisual: controlo de reprodução e leitores de ecrã

Para garantir uma experiência acessível, vídeos, áudios ou animações automáticas devem permitir que o utilizador possa: 

• Parar 

• Colocar em pausa 

• Silenciar 

Esses controlos devem ser: 

• Visíveis e intuitivos 

• Acessíveis por teclado 

• Compatíveis com leitores de ecrã 

Ou seja, botões como “Pausa” ou “Silenciar” devem ter texto visível ou estar devidamente identificados com um aria-label, para que possam ser reconhecidos por utilizadores que dependem de tecnologias de apoio (ex: leitores de ecrã ou comandos de voz).

Boas práticas adicionais para navegação assistida 

Evite botões com apenas ícones 

O utilizador pode não saber como referir-se a esse botão por voz ou não o reconhecer com um leitor de ecrã. 

Caso o botão tenha apenas ícone, a melhor solução é: 
 

Agrupe campos de formulário com <fieldset> e <legend> 

Facilita a identificação de grupos de campos por comandos de voz e tecnologias assistivas. 

Exemplo de comando de voz: 

“Preencher campo Nome” 

Evite nomes genéricos como "aqui", "ver", "mais" 

Prefira: 

• “Ver detalhes da fatura” 

• “Aceder ao histórico de encomendas” 

• “Atualizar dados do cliente” 

Dica Cegid PHC: 

• Evite conteúdos que se reproduzem automaticamente por mais de 5 segundos sem controlo manual. 

• Assegure que não há sobreposição de áudio que interfira com leitores de ecrã. 

• Utilize aria-live="off" em zonas que não precisam de ser anunciadas para evitar distrações desnecessárias. 

      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: 

   
   
4. Teste automático de acessibilidade 
5. Simuladores de deficiências visuais ou motoras 
6. Análises orientadas por WCAG 
7. 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. 
• Diretiva Portuguesa 82/2022 - Lei que estabelece obrigações legais sobre acessibilidade em produtos e serviços digitais no espaço português, visando garantir inclusão e igualdade de acesso para todos os cidadãos