O website https://www.defesa.gov.pt/pt etiqueta: não passa nos requisitos mínimos do Selo de Usabilidade e Acessibilidade.
| Tipo de avaliação | Estado |
|---|---|
| Avaliação Automática | etiqueta: NOK |
| Avaliação Manual | etiqueta: NOK |
Das avaliações manuais efetuadas obtiveram-se os resultados que se sintetizam na tabela seguinte.
| Checklist | Conformidade alcançada | Resultado |
|---|---|---|
| 10 aspetos | 51.9% (14/27) | etiqueta: Não passa |
| Conteúdo | 35.3% (6/17) | etiqueta: Não passa |
| Transação | 36.4% (4/11) | etiqueta: Não passa |
Nota: para passar os requisitos do Selo é necessário alcançar um nível de conformidade superior ou igual a 75% em cada uma das 3 checklists.
etiqueta: NOK
Para a produção das evidências do presente capítulo, foram utilizadas ferramentas automatizadas de avaliação de requisitos de acessibilidade de acordo com a norma WCAG 2.1 'AA'. A amostra em análise pelas ferramentas é composta pela Homepage mais todas as páginas diretamente hiperligadas por ela, pertencentes ao domínio.
Lista de evidências recolhidas:
evidência: issue #26 Avaliação Automática - Access Monitor / Observatório (em avaliação)
Analisámos a amostra com o Access Monitor, de acordo com o método Home+, tendo sido avaliadas, no total, 65 páginas.
Destas páginas, 64 páginas têm pontuação abaixo de 9:
Para mais informação sobre os erros de acessibilidade que existem nessas páginas podem consultar o ficheiro .csv:
06052026_defesanacional.csv
A correção desses erros fará aumentar a pontuação.
Nota: A atualização ainda não foi efetuada no ambiente de produção nem no Observatório, pelo que estes valores ainda não se encontram públicos.
Figura 1 - Indicadores e conformidade do sítio web
evidência: issue #2 Existem erros de acessibilidade
Efetuámos também uma análise com o validador Rocket Validator que indica a existência de 75 erros de Acessibilidade e que precisam ser corrigidos:
Figura 1 - Análise automática feita pelo Rocket Validator indica 75 erros de acessibilidade em uma amostra de 72 páginas
Para mais informações partilhamos o relatório da análise automática feita pelo Rocket Validator.
etiqueta: NOK
A avaliação manual é feita por inspeção perícial dos diversos requisitos constantes da:
Sempre que os auditores localizam uma falha grave de um requisito de acessibilidade que, embora não faça parte do esquema de requisitos do Selo, se enquadre no âmbito das violações das WCAG 2.1 'AA' do W3C, tal referência é anotada em "Outras violações" do presente capítulo. Apesar destas violações não se apresentarem com carácter vinculativo no esquema de requisitos do Selo, recomenda-se que as mesmas sejam corrigidas.
etiqueta: NOK
Nível de conformidade:
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #23 O tipo de lista utilizado para estruturar o rodapé é inapropriado
O uso de listas ordenadas ol li é adequado quando a ordem dos elementos é relevante, como em instruções, passos sequenciais ou processos que devem ser seguidos numa determinada sequência.
No rodapé, embora exista um conjunto de links relacionados entre si, cada opção é independente e não segue uma ordem lógica obrigatória. No entanto, está a ser utilizada uma lista ordenada para estruturar estes elementos, o que não é apropriado:
URLs
Sugestão de correção
ul e li do HTML.etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #24 Está sendo utilizado atributos inapropriados no menu
O atributo aria-haspopup é comumente utilizado na construção de menus do tipo aplicação. O menu principal do website corresponde a um menu de navegação e não a um menu de aplicação e verifica-se que está sendo utilizado o atributo aria-haspopup no menu:
URLs
Sugestão de correção
aria-haspopup do menu desktop e mobile. A informação de que a opcão está aberta ou fechada deve ser transmitida pelo atributo aria-expanded.etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #25 As imagens-link do menu principal têm texto alternativo apropriado
O critério está a ser cumprido: a sinalética das opções do menu (▾), e dos ícones de pesquisa e das redes sociais, apresentam texto alternativo apropriado através do atributo aria-label. No entanto, verifica‑se que esse mesmo texto alternativo está duplicado no atributo title, o que gera uma redundância desnecessária:
URLs
Sugestão de correção
aria-label. Neste caso, recomenda‑se remover o atributo title das opções do menu.etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #46 Cabeçalhos marcados com <p>
Foram identificados elementos que funcionam visualmente como cabeçalhos, mas que se encontram marcados incorretamente com <p> em vez de elementos de cabeçalho semanticamente adequados.
Figura 1 - Texto “Atribuições do Ministério da Defesa Nacional” marcado com <p> em vez de um elemento de cabeçalho.
URLs a verificar:
https://www.defesa.gov.pt/pt/defesa/Paginas/mdn.aspx
<p> utilizado como título de secção por um elemento de cabeçalho semanticamente adequado.<h2>, de acordo com a hierarquia da página.evidência: issue #30 Cabeçalhos vazios
Foi identificado um cabeçalho vazio.
Figura 1 - Cabeçalho vazio .
URLs a verificar:
https://www.defesa.gov.pt/pt/pdefesa/mi
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #47 Campo de pesquisa com label não acessível (placeholder a substituir a label)
O campo de pesquisa presente no cabeçalho do site possui um elemento <label> associado ao input através do atributo for="tbPesquisa", contudo esta etiqueta encontra-se oculta através de display: none, deixando de estar disponível para todos os agentes de utilizador.
Nestas circunstâncias verificam-se dois problemas:
Verifica-se ainda que o campo depende visualmente do texto placeholder="Pesquisar..." para identificação. No entanto, o placeholder desaparece quando o utilizador começa a escrever, não devendo substituir uma etiqueta persistente do campo.
Figura 1 - Campo de pesquisa no cabeçalho do site com label oculto (display:none) e utilização de placeholder como único meio de identificação do campo
URL a verificar
Recomenda-se garantir que o campo de pesquisa possui uma etiqueta corretamente associada ao campo através do elemento <label>.
<label> associado explicitamente ao campo através de for e id;display: none;etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #76 Não é possível identificar campos obrigatórios nos formulários em PDF
Verificámos que, no Formulário de Pedido de Pedido de Visita, presente na página Portal da Defesa Nacional, não é possível reconhecer os campos de preenchimento obrigatório. Esta informação não é passada quer visualmente quer para os leitores de ecrã.
Análise do Formulário de Pedido de Pedido de Visita, presente na página Portal da Defesa Nacional, no browser através do leitor de ecrã NVDA.
Uma solução mais acessível seria disponibilizar os formulários diretamente no site, em vez de em formato PDF. Nos formulários web, os campos obrigatórios devem incluir o atributo required para serem identificados pelas tecnologias de apoio como obrigatórios. Adicionalmente, deve também ser apresentada uma indicação visual clara junto ao rótulo — por exemplo, “(Campo obrigatório)” — para que todos os utilizadores consigam identificar facilmente os campos que têm obrigatoriamente de preencher.
evidência: issue #57 Campos obrigatórios sem utilização do atributo HTML nativo required
Verificou-se que os campos obrigatórios do formulário de contacto são identificados programaticamente através do atributo aria-required="true" e visualmente através da indicação textual “(obrigatório)”.
Contudo, não é utilizado o atributo HTML nativo required nos respetivos campos de formulário.
Embora aria-required="true" permita expor informação de obrigatoriedade a tecnologias de apoio, a utilização exclusiva deste atributo reduz a robustez da implementação, uma vez que o atributo nativo required fornece suporte adicional ao nível do navegador, validação do formulário e interoperabilidade entre tecnologias de apoio.
Figura 1 – Campo obrigatório identificado com aria-required="true", sem utilização do atributo HTML nativo required
URL a verificar
required em todos os campos obrigatórios;aria-required="true" quando existe alternativa HTML semântica nativa;etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #63 As mensagens de erro não são apresentadas de forma consistente junto aos campos de origem
No formulário de contacto, após submissão inválida, são apresentadas mensagens de erro na proximidade dos campos obrigatórios (Nome, Email, Assunto e Mensagem).
Contudo, verifica-se que a apresentação destas mensagens não é totalmente consistente entre os diferentes campos, encontrando-se distribuídas por diferentes elementos e containers, o que pode dificultar a sua rápida identificação e leitura durante a navegação pelo formulário.
Embora as mensagens sejam apresentadas visualmente junto aos campos, a sua organização pode dificultar a perceção clara da relação entre erro e campo correspondente, sobretudo quando se utiliza navegação sequencial ou tecnologias de apoio.
Figura 1 - Campo “Mensagem” sem associação programática à respetiva mensagem de erro
URL a verificar
etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #4 (Melhoria) Imagem decorativa com texto alternativo indevido
Ao navegar com leitor de ecrã pela secção de contactos, ao passar pelo ícone associado ao título “Morada”, o leitor anuncia . Como o ícone é apenas decorativo e a informação “MORADA” já está disponível em texto visível, este elemento não deve ser anunciado pelo leitor de ecrã.
Verifica-se que algumas imagens funcionam apenas como apoio visual, encontrando-se a informação relevante já disponibilizada através de título, descrição e links acessíveis em texto. Nestes casos, as imagens podem ser tratadas como decorativas, devendo possuir alt="".
URL:
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #10 Imagem link têm um equivalente alternativo incorreto
O nome acessível do icone de Partilha esta definido por aria-label="Links" não comunica corretamente a função do elemento, e o atributo title="Partilhar" introduz redundância e inconsistência. Recomenda-se utilizar um botão com nome acessível claro e específico para a ação de partilha.
Verifica-se que as imagens-link das redes sociais possuem atributo title para fornecer o seu nome acessível juntamente com aria-label. Nesse caso o equivalente alternativo deve ser disponibilizado no mecanismo acessível principal apenas através do aria-label. Recomenda-se remover o title.
A imagem-link “Denúncia” tem equivalente alternativo através do atributo alt, mas o texto não é totalmente adequado, porque mistura a descrição do destino com uma formulação pouco clara. O texto alternativo nas imagens link deve identificar claramente o destino da hiperligação. Por exemplo: alt="Portal de denúncias de presumíveis atos de corrupção, abre em novo separador".
Também foi verificado que ao navegar com o leitor de ecrã, o equivalente alternativo aparece repetido.
Os links associados às publicações são apresentados apenas através de um emoji de hiperligação, sem um nome acessível descritivo. Uma vez que o ícone é meramente visual e não existe uma alternativa textual equivalente, as pessoas que utilizam tecnologias de apoio não conseguem perceber qual é o destino ou a finalidade da hiperligação.
Ao navegar pelos cards de documentos da homepage, a tecnologia de apoio deve anunciar que o documento a ser acessado é um pdf. Nesse caso deve ser removido o aria-label do elemento <a> e o ícone de PDF deve receber um nome acessível descritivo no elemento que o representa semanticamente, neste caso o div, por exemplo aria-label="Ficheiro PDF".
O texto alternativo das imagens que abrem a janela modal está definido como “Fazer zoom da imagem”, o que não descreve o conteúdo visual nem permite compreender a finalidade da imagem. Recomenda-se alterar o texto alternativo para uma descrição mais clara e contextual.
Além disso, quando a imagem é apresentada em tamanho ampliado dentro da janela modal, esta deve também ter um texto alternativo adequado, que descreva o conteúdo visual da imagem ampliada.
URL:
https://www.defesa.gov.pt/pt
https://www.defesa.gov.pt/pt/comunicacao/agenda/Paginas/default.aspx
https://www.defesa.gov.pt/pt/adefesaeeu/cd/Paginas/default.aspx
https://www.defesa.gov.pt/pt/pdefesa/ac/pub/biblioteca/Paginas/default.aspx
https://www.defesa.gov.pt/pt/pdefesa/cplp/Paginas/default.aspx
Para o icone de Partilha:
aria-label="Partilhar"titlePara o ícone PDF:
<a> <div> envolvente do ícone., por exemplo aria-label="Ficheiro PDF".Para as imagens da modal:
etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #40 Vídeos de dimensão pequena e sem possibilidade de tela cheia
Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado.
– ver requisito 7.1 na lista 10 aspetos
Evidências:
Existem players de vídeo incorporados no website com dimensões reduzidas e sem funcionalidade de visualização em ecrã inteiro. Embora o botão de ecrã inteiro esteja presente, este não se encontra operacional. Esta limitação pode comprometer a perceção e compreensão dos conteúdos multimédia, especialmente por utilizadores com incapacidades visuais ou baixa visão, dificultando um acesso pleno e equitativo à informação.
URL's a verificar:
Recomendações:
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #32 Conteúdo visual sem audiodescrição
O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.
– ver requisito 7.2 na lista 10 aspetos
Evidências:
Existem players multimédia que apresentam mensagens através de elementos visuais, sem disponibilizar audiodescrição. Em vídeos com música de fundo ou sem narração, onde o conteúdo relevante é transmitido apenas por ações visuais, as pessoas com incapacidade visual podem não conseguir compreender a mensagem apresentada.
Para garantir acessibilidade, todos os conteúdos visuais essenciais devem ser acompanhados por audiodescrição ou por uma alternativa equivalente que permita compreender integralmente a informação transmitida no vídeo.
Imagem de vídeo com uma introdução com elementos visuais e música de fundo. Disponível em: https://www.defesa.gov.pt/pt/pdefesa/esdp/Paginas/default.aspx
URL's a verificar:
Recomendações:
evidência: issue #31 Os players não têm legendas audiodescritivas
O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.
– ver requisito 7.2 na lista 10 aspetos
Evidências:
Alguns players não têm legendas, os restantes players no website usam as legendas automáticas do youtube, é recomendado que estas sejam substituídas por legendas audiodescritivas.
URL's a verificar:
Recomendações:
Recomendamos que seja incluído uma legenda para cada vídeo, caso a legenda gerada automaticamente esteja boa ela pode ser reaproveitada para gerar uma nova transcrição do conteúdo.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #75 Links da agenda possuem nomes acessíveis pouco descritivos
Na secção Agenda, os links para os eventos encontram-se associados apenas ao bloco visual da data do evento (dia e mês), sendo o título apresentado fora do elemento .
Desta forma, o nome acessível do link corresponde apenas à data do evento, por exemplo:
Contudo, o título do evento - informação principal para compreensão do destino do link - não integra o nome acessível do controlo.
Esta implementação pode dificultar a navegação por utilizadores de leitores de ecrã, uma vez que, ao navegar por links, o contexto fornecido é insuficiente para compreender o conteúdo ou objetivo de cada ligação.
Figura 1 - Link da agenda estruturado apenas sobre a data do evento, sem incluir programaticamente o título associado
URL a verificar
aria-describedby;<a>, permitindo que data e título façam parte do mesmo nome acessível;evidência: issue #73 Modais sem nome acessível programaticamente determinável
Foi identificado um modal de visualização de imagem que não apresenta um nome programaticamente determinável, dificultando a sua identificação por utilizadores de tecnologias de apoio.
O modal apresenta apenas um botão de fecho com aria-label="Close", mas o próprio conteúdo modal não possui um nome acessível associado (por exemplo através de aria-label, aria-labelledby ou título visível associado). Adicionalmente, a imagem apresentada no modal possui um atributo alt="", não fornecendo contexto ou descrição sobre o conteúdo exibido.
Na prática, utilizadores de leitores de ecrã podem ter dificuldade em compreender:
Figura 1 - Modal de visualização de imagem sem nome programaticamente acessível e imagem sem descrição associada
URL a verificar
aria-label ou aria-labelledby;alt="" em imagens informativas abertas em modal, garantindo descrição adequada quando relevante;role="dialog" ou dialog).evidência: issue #54 Existência de elementos fora de landmarks semânticos
Evidências:
Verificou‑se que o conteúdo apresentado visualmente não está corretamente estruturado dentro das landmarks. Por exemplo, o rodapé está estruturado dentro da tag main. Embora exista uma tag footer a mesma está sendo preenchida pelo texto "© 2024 SGMDN" que é visível apenas para tecnologias de apoio.
Figura 1 – Website estruturado com o rodapé fora do footer
A inexistência de enquadramento destes elementos em regiões semânticas apropriadas (por exemplo, <header>, <main>, <nav>, <aside> ou <footer>) compromete a sua deteção e interpretação por tecnologias de apoio. Em consequência, leitores de ecrã e a navegação por teclado podem não percorrer nem anunciar estes elementos, impossibilitando o acesso por parte de utilizadores com deficiência visual ou motora.
Esta situação cria uma barreira significativa à acessibilidade, uma vez que funcionalidades essenciais ficam inacessíveis a determinados perfis de utilizadores, contrariando os princípios de perceção, operabilidade e robustez.
Recomendações:
Garantir que todos os elementos interativos do website estejam corretamente integrados em landmarks semânticos apropriados, de acordo com a sua função e localização lógica na página.
O conteúdo apresentado no rodapé deve estar contido dentro da tag footer.
evidência: issue #53 Landmarks com o mesmo papel sem nome acessível único
Foram identificadas regiões da página expostas como landmarks com o mesmo papel sem um nome acessível único, dificultando a sua identificação por utilizadores de leitores de ecrã durante a navegação por regiões.
Em particular, foram identificados elementos com role="region" e aria-label="carousel" repetidos na mesma página, originando múltiplas landmarks indistinguíveis entre si.
Quando existem várias landmarks com o mesmo papel (ex.: múltiplas regiões, navegações ou áreas complementares), estas devem possuir nomes acessíveis distintos para permitir aos utilizadores compreender rapidamente o propósito de cada secção ao navegar por landmarks.
Figura 1 - Landmarks do tipo região (role="region") com o mesmo nome acessível, dificultando a distinção entre secções da página
URL a verificar
aria-label ou aria-labelledby para distinguir programaticamente cada região;evidência: issue #27 Listagem de conteúdos sem estrutura semântica adequada
Na página principal, têm várias secções em que cada item é apresentado como um conjunto de conteúdos relacionados (imagem, data, título, descrição e ligação para detalhe), estruturado com múltiplos elementos <div>.
No entanto, estes itens não estão inseridos numa estrutura semântica de lista (<ul> / <li>), apesar de representarem claramente uma listagem de conteúdos homogéneos.
Figura 1 – Listagem de notícias na página inicial estruturada com elementos <div> sem utilização de lista semântica
Figura 2 – Listagem de notícias estruturada com elementos <div> sem utilização de lista semântica
Como consequência, as tecnologias de apoio não conseguem identificar programaticamente que estes elementos pertencem a um conjunto, nem o número total de itens existentes.
Quando os estilos CSS são desativados, os conteúdos passam a ser apresentados como blocos isolados, sem indicação clara da relação entre si, dificultando a compreensão da estrutura da informação.
Notas Gerais
<ul> / <ol> e <li>), de forma a permitir que tecnologias de apoio identifiquem corretamente o agrupamento e o número de itens.<div>) para representar estes conjuntos pode comprometer a perceção da relação entre os conteúdos apresentados.URL a verificar
<ul> ou <ol>), com cada item representado por um <li>.<li>.<div>) para representar agrupamentos de conteúdos.etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #59 Modal inacessível para tecnologias de apoio.
Quando a caixa de diálogo é aberta, o foco (cursor do Browser) move-se para um elemento dentro da caixa de diálogo
– ver requisito 9.1 na lista 10 aspetos
Evidências:
Verificado que ao ampliar a imagem da página "Edição Prémio Defesa Nacional e Ambiente" é aberta uma janela modal/lightbox.
Ao abrir a modal o foco não move-se para dentro da modal. Ao navegar com teclado ou leitor de ecrã, o foco continua a percorrer elementos da página subjacente, não é possivel acessar a modal.
URL:
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/Edi%C3%A7%C3%A3o-31-Exercito-Brigada-Mecanizada-2024.aspx
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/default.aspx (validar em todos os links)
Recomendações:
Observação: Não seria necessário utilizar uma modal para estas imagens; o ideal seria tratar o elemento como uma imagem decorativa. Caso optem por manter a modal, os erros identificados devem ser corrigidos.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #67 Foco não permanece na modal
Verifica-se que quando a modal esta aberta o foco não fica limitado a modal (teclado, leitor de ecrã).
URL:
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/Edi%C3%A7%C3%A3o-31-Exercito-Brigada-Mecanizada-2024.aspx
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/default.aspx (validar em todos os links)
Observação: Não seria necessário utilizar uma modal para estas imagens; o ideal seria tratar o elemento como uma imagem decorativa. Caso optem por manter a modal, os erros identificados devem ser corrigidos.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #69 Quando a caixa de diálogo fecha, o foco não volta ao elemento interativo que o acionou.
Validado que ao fechar a modal o foco não retorna ao elemento que a acionou.
URL:
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/Edi%C3%A7%C3%A3o-31-Exercito-Brigada-Mecanizada-2024.aspx
https://www.defesa.gov.pt/pt/adefesaeeu/premios/pdna/historico/Paginas/default.aspx (validar em todos os links)
Observação: Não seria necessário utilizar uma modal para estas imagens; o ideal seria tratar o elemento como uma imagem decorativa. Caso optem por manter a modal, os erros identificados devem ser corrigidos.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #29 Não foi possível extrair o texto do documento PDF
Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT.
– ver requisito 10.1 na lista 10 aspetos
Evidências:
Foi encontrado em certos PDF's imagens texto ou imagens de gráficos em que o seu conteúdo não pode ser extraido como TXT.
Anuário estatístico da Defesa Nacional 2020: https://www.defesa.gov.pt/pt/defesa/dn/edn/Paginas/default.aspx_
Lei de Programação Militar e Lei das Infraestruturas Militares -> Lei de Programação Militar -> n.º1/2023, de 17 de agosto: https://www.defesa.gov.pt/pt/defesa/dd/Paginas/default.aspx
URL's a verificar:
Recomendações:
Deve ser possível extrair todo o conteúdo de texto dos ficheiros PDF. Uma alternativa seria recorrer a uma solução de Reconhecimento Óptico de Caracteres (OCR), como a disponibilizada pela Adobe, para converter corretamente o conteúdo.
etiqueta: NOK
Nível de conformidade:
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #20 Falta de resumo na página inicial do website
O sítio Web apresenta um resumo breve do seu propósito, visível sem fazer scroll.
– ver requisito 1.1 na lista Conteúdo
Evidências:
A página inicial do website do Portal da Defesa Nacional apresenta uma frase visível no topo esquerdo da página, sem necessidade de scroll. No entanto, esse resumo não descreve de forma adequada o propósito do website, uma vez que este não se limita a divulgações, abrangendo também notícias, legislação, missões, estratégias, entre outros conteúdos. Esta limitação pode dificultar a compreensão imediata da finalidade do site por parte do utilizador.
Imagem da página inicial do Portal da Defesa Nacional sem fazer scroll
Recomendações:
O resumo apresentado na página inicial deve ser revisto de forma a descrever claramente o propósito do website, incluindo os principais tipos de conteúdos e serviços disponibilizados. Esta descrição deve ser concisa, informativa e orientada para ajudar o utilizador a compreender rapidamente a utilidade e abrangência do site.
Como exemplo, pode ser consultado o website acessibilidade.gov.pt, que apresenta um resumo simples e claro logo na página inicial, permitindo compreender rapidamente o seu propósito.
etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #21 Glossário com difícil acesso
Os termos mais complexos têm uma definição agregada.
– ver requisito 1.2 na lista Conteúdo
Evidências:
Embora os termos complexos estejam reunidos num glossário, o acesso a este recurso não é facilmente identificável. Atualmente, o glossário encontra-se na secção “Comunicação” do menu, o que pode dificultar a sua descoberta por parte dos utilizadores durante a navegação.
Recomendações:
Deve ser garantido um acesso mais direto e visível ao glossário, por exemplo através de uma ligação no rodapé, no menu principal ou em destaque nas páginas relevantes. Adicionalmente, sempre que possível, os termos complexos no conteúdo devem incluir ligações diretas para as respetivas definições, facilitando a sua consulta no contexto de utilização.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #8 Informação da Entidade Responsável Não Escrita por Extenso
A informação sobre a entidade responsável pelo conteúdo está em todas as páginas.
– ver requisito 1.4 na lista Conteúdo
Evidências:
Todas as páginas devem apresentar o nome da entidade responsável pelos conteúdos publicados no site. O nome da entidade pode ser apresentado através de um logótipo ou texto, mas deve estar por extenso.
Apesar de existir no rodapé o logótipo da entidade e um acesso rápido aos contactos, verifica-se que o nome da entidade responsável não se encontra indicado de forma completa, sendo apenas apresentada a menção “2026 SGMDN”, o que pode não ser suficientemente claro para todos os utilizadores.
Os direitos da entidade responsável pelo conteúdo está presente em todas as páginas no rodapé do website do Portal da Defesa Nacional.
Imagem do rodapé do Portal da Defesa Nacional com os direitos não escritos por extenso.
Recomendações:
Deve ser adicionado o nome da entidade por extenso em todo o website, como é possível observar no acessibilidade.gov.pt:
Imagem de exemplo do rodapé do acessibilidade.gov.pt
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #11 Informações primárias não possuem tamanho mínimo recomendado
O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos.
– ver requisito 2.1 na lista Conteúdo
Evidências
O website possui informações primárias com tamanho inferior a 12pontos(16px) por exemplo na página Ambiente no menu principal, as opções de segundo nível estão abaixo do valor mínimo recomendado. (Figura 1)
Figura 1 - Verificação do tamanho do texto nas opções de segundo nível do menu com apenas 14px
Na página Glossário há blocos de textos dentro de acordeões com tamanho inferior ao recomendado. (Figura 2)
Figura 2 - Verificação do tamanho de texto no Glossário com apenas 14px
Na página Pesquisar os resultados de pesquisas apresentados possuem blocos de conteúdos com tamanho de 15px, e hiperligações com apenas 14px. (Figura 3)
Figura 3 - Verificação do tamanho de texto com tamanho inferior ao recomendado
URLs a verificar
Recomendação de melhoria
É necessário rever todo website e corrigir os textos de informações primárias, para um tamanho igual ou superior ao recomendado.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #15 Existem blocos de textos com mais de 100 caracteres por linha
Blocos e linhas de texto com largura não superior a 100 caracteres.
– ver requisito 2.3 na lista Conteúdo
Evidências
Verificámos que na página Ciberdefesa os blocos de textos apresentam largura superior ao recomendado por linha. (Figura 1)
Figura 1 - Análise de bloco de texto com ferramenta WordCounter com 140 caracteres
URLs a verificar
Recomendação
Revisar blocos de textos para garantir que não é ultrapassado o número máximo de caracteres por linha. Recomendamos que seja definida uma largura máxima para as caixas de texto (max-width, em CSS), com unidades relativas ao tamanho de fonte (unidades em ou rem).
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #17 O espaçamento entre linhas está abaixo do recomendado
O espaçamento entre linhas não é inferior a 1.5x o tamanho da letra.
– ver requisito 2.4 na lista Conteúdo
Evidências
Na evidência 01, há blocos de textos nas página Inicial, por exemplo na secção “Ligações”, possui uma tabela em que o espaçamento entre linhas do conteúdo é de 22.8px para um tamanho de letra de 16px. (Figura 1)
Figura 1 - Textos com espaçamento inferior ao recomendado.
A evidência 02 revela a página Contactos onde há blocos de textos com espaçamento apenas 20px para um tamanho de letra de 14px. (Figura 2)
Figura 2 - O bloco de conteúdo sobre as “Relações Públicas do Ministério da Defesa Nacional” possui espaçamento inferior ao recomendado
URLs a verificar
Recomendação
Para a evidência 01, o espaçamento deveria ser, no mínimo 24px. Já para evidência 02 o espaçamento deveria ser, no mínimo 21px.
É necessário rever todo website, incluindo informações de formulários para garantir o espaçamento mínimo recomendado, relativo ao tamanho da letra.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #12 Excesso de opções no subnível do menu de navegação
Nenhum nível de navegação tem mais de 9 opções.
– ver requisito 3.1 na lista Conteúdo
Evidências:
O menu principal do website do Portal da Defesa Nacional contém secções como “Política de Defesa”, “A Defesa e Eu” e “Comunicação”, ultrapassando o limite recomendado de 9 opções. Um número excessivo de itens no menu pode dificultar a navegação e a tomada de decisão por parte do utilizador.
Imagem do maior nível de navegação com 17 opções.
Recomendações:
Deve ser revista a estrutura do menu principal, reduzindo o número de opções apresentadas ao utilizador. Sempre que possível, os conteúdos devem ser reorganizados e agrupados de forma lógica em categorias mais abrangentes, promovendo uma navegação mais simples, clara e intuitiva.
Com vista à melhoria da usabilidade e conformidade com os princípios de acessibilidade, recomenda-se:
Reduzir o número de opções no subnível, agrupando conteúdos relacionados sob categorias mais abrangentes.
Reorganizar a arquitetura de informação para garantir uma hierarquia mais simples e intuitiva.
etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #22 O menu secundário desaparece em certos breakpoints
A navegação principal está sempre visível e sempre no mesmo local.
– ver requisito 3.2 na lista Conteúdo
Evidências:
O menu principal do website do Portal da Defesa Nacional está sempre presente no topo da página por todo o domínio.
Figura 01: Imagem da página principal com o menu principal presente no topo da página
Foi identificado que algumas páginas incluem um menu secundário, nomeadamente:
Verificou-se ainda que, na versão mobile, o menu secundário surge com o mesmo aspeto do menu principal e posicionado a meio da página (Ver figura 02), o que pode gerar confusão na navegação.
Figura 02: Imagem do menu secundário na versão mobile.
Recomendações:
Recomenda-se que o menu secundário funcione como um prolongamento coerente do menu principal, garantindo consistência na sua apresentação e comportamento. Nesse sentido, deverá estar presente de forma uniforme em todos os subníveis de navegação ou, em alternativa, ser removido por completo, uma vez que atualmente não surge de forma consistente em todas as páginas do website. Esta correção permitirá evitar discrepâncias na experiência e na perceção do utilizador relativamente à sua navegação.
Adicionalmente, é recomendável rever e corrigir a versão mobile, assegurando uma hierarquia visual clara entre menus, um posicionamento adequado dos elementos e uma distinção inequívoca entre navegação principal e secundária, de forma a melhorar a usabilidade e a experiência do utilizador em dispositivos móveis.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #13 Hiperligações sem indicação visual
As hiperligações de texto não devem ser diferenciadas apenas com base na cor.
– ver requisito 3.3 na lista Conteúdo
Evidências:
As hiperligações de texto não devem depender exclusivamente da cor para a sua identificação, sendo necessário garantir uma indicação visual adicional, como o sublinhado, que esteja presente de forma consistente e não apenas no estado de hover. A ausência desta distinção pode dificultar a identificação de links e comprometer a navegação.
Imagem das hiperligações do rodapé sem indicação visual.
Imagem dos breadcrumbs sem indicação visual de hiperligação
Imagem de hiperligação de texto sem indicação visual. Disponível em: https://www.defesa.gov.pt/pt/comunicacao/agenda/Paginas/default.aspx
Imagem de hiperligação de texto sem indicação visual na página de grandes celebrações.
Outros exemplos de blocos de navegação com a hiperligação sem indicação visual:
Recomendações:
Deve ser assegurado que todas as hiperligações de texto incluem uma indicação visual clara e permanente (como o sublinhado), independentemente da interação do utilizador. Esta abordagem melhora a perceção dos elementos clicáveis, facilita a navegação e contribui para o cumprimento das boas práticas de acessibilidade.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #34 Páginas extensas sem índice de navegação interna entre secções
Os documentos longos têm um índice no topo com hiperligações internas para o mesmo.
– ver requisito 4.1 na lista Conteúdo
Evidências:
Ponto 01
Página: https://www.defesa.gov.pt/pt/defesa/organizacao/forcasarmadas/emgfa/Paginas/default.aspx
A página apresenta um volume de conteúdo extenso (superior a três ecrãs de altura) sem disponibilizar um índice no topo com hiperligações internas para as diferentes secções e subsecções.
Figura 01 — Página extensa sem índice de navegação interno.
Outros exemplos (NOK):
Ponto 02
Página: https://www.defesa.gov.pt/pt/pdefesa/cplp/destaques/Paginas/default.aspx
A página “Destaques” apresenta um volume elevado de conteúdos, imagens e blocos informativos distribuídos ao longo de uma navegação extensa, sem disponibilizar um índice no topo com hiperligações internas para acesso rápido às diferentes secções ou destaques apresentados.
Esta situação dificulta a exploração e localização eficiente da informação, especialmente em dispositivos móveis e em páginas com navegação prolongada.
Figura 02 — Página “Destaques” sem índice de navegação interno.
Outro exemplo (NOK):
Recomendações:
Adicionar índices de navegação internos nas páginas com conteúdo extenso, permitindo o acesso rápido às diferentes secções através de hiperligações no topo da página.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #35 Inconsistências de adaptação responsiva e apresentação de conteúdos em dispositivos móveis
O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal.
– ver requisito 4.2 na lista Conteúdo
Evidências:
Ponto 01
Página: https://www.defesa.gov.pt/pt
Na página inicial foram identificados alguns problemas de adaptação a dispositivos móveis, nomeadamente:
Figura 01 — Problemas de adaptação em dispositivos móveis.
Outro exemplo (NOK):
Ponto 02
Página: https://www.defesa.gov.pt/pt/defesa/organizacao/Paginas/default.aspx
Em alguns dispositivos móveis, a informação “Última atualização: 29 de outubro de 2020” não se mantém totalmente visível, ficando parcialmente sobreposta ou cortada por elementos adjacentes da interface.
Esta situação compromete a legibilidade e a correta perceção da informação apresentada.
Figura 02 — Informação “Última atualização” parcialmente cortada em dispositivos móveis.
Outro exemplo (NOK):
Ponto 03
Página: https://www.defesa.gov.pt/pt/defesa/organizacao/forcasarmadas/emgfa/Paginas/default.aspx
Em dispositivos móveis, a imagem da estrutura orgânica não se adapta corretamente ao ecrã, apresentando deformação/distorção visual.
Esta situação compromete a perceção e legibilidade do conteúdo gráfico apresentado.
Figura 03 — Imagem da estrutura orgânica com distorção em dispositivos móveis.
Outros exemplos (NOK):
Ponto 04
Página: https://www.defesa.gov.pt/pt/pdefesa/ciberdefesa/enquadramento/Paginas/default.aspx
Em alguns dispositivos móveis, o conteúdo textual dos cartões da timeline não se adapta corretamente à largura disponível, ultrapassando visualmente os limites do componente.
Esta situação compromete a legibilidade e a apresentação do conteúdo em resoluções mais reduzidas.
Figura 04 — Conteúdo textual dos cartões ultrapassa os limites do componente em mobile.
Ponto 05
Página: https://www.defesa.gov.pt/pt/comunicacao/contactosImprensa/Paginas/default.aspx
Na página “Contactos de Imprensa”, os botões “Enviar” e “Limpar” sobrepõem-se ao texto “Enviar uma cópia desta mensagem para o meu email” em alguns dispositivos móveis.
Esta situação compromete a legibilidade e a correta apresentação dos elementos da interface em resoluções mais reduzidas.
Figura 05 — Botões “Enviar” e “Limpar” sobrepostos ao conteúdo em dispositivos móveis.
Recomendações:
Ajustar o comportamento responsivo do website para garantir uma adaptação correta dos conteúdos e componentes em diferentes resoluções e dispositivos móveis, evitando cortes, sobreposições, distorções visuais ou problemas de legibilidade.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #33 Elementos interativos com área clicável inferior à dimensão mínima recomendada de 44px CSS (44 pontos), vertical e horizontal.
Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos), vertical e horizontal.
– ver requisito 5.2 na lista Conteúdo
Evidências:
Ponto 01
Página: https://www.defesa.gov.pt/pt/comunicacao/noticias/Paginas/Novo-CIPO-ja-desobstruiu-10mil-kms-de-caminhos-florestais.aspx
O botão de navegação do menu mobile apresenta dimensão inferior ao mínimo recomendado para elementos interativos.
Foi identificada uma dimensão de 44x34px, abaixo do valor mínimo recomendado de 44x44px, dificultando a interação em dispositivos de toque.
Figura 01 — Botão do menu mobile com dimensão inferior ao recomendado.
Ponto 02
Página: https://www.defesa.gov.pt/pt/defesa/organizacao/forcasarmadas/emgfa/Paginas/default.aspx
Os ícones de redes sociais apresentam dimensão inferior ao mínimo recomendado para elementos interativos.
Foi identificado um tamanho de 17px, abaixo da dimensão mínima recomendada de 44x44px para interação em dispositivos de toque, dificultando a utilização dos elementos clicáveis.
Figura 02 — Ícones de redes sociais com dimensão inferior ao recomendado.
Outros exemplos (NOK):
Ponto 03
Página: https://www.defesa.gov.pt/pt/comunicacao/intervencoes/Paginas/default.aspx
Na página “Intervenções”, os filtros por ano e meses apresentam dimensão inferior ao mínimo recomendado para elementos interativos.
Foi identificada uma altura de 21.58px, abaixo da dimensão mínima recomendada de 44x44px para interação em dispositivos de toque, dificultando a seleção dos elementos.
Figura 03 — Radio buttons com dimensão inferior ao recomendado.
Outro exemplo (NOK):
Ponto 04
Página: https://www.defesa.gov.pt/pt/adefesaeeu/ac/direitos/iac/Paginas/default.aspx
Na página do Instituto de Ação Social das Forças Armadas, o checkbox e o botão “Enviar” apresentam dimensão inferior ao mínimo recomendado para elementos interativos.
Foi identificada uma altura de 40px no checkbox e de 31.84px no botão “Enviar”, abaixo da dimensão mínima recomendada de 44x44px para interação em dispositivos de toque, dificultando a utilização dos elementos.
Figura 04 — Checkbox com dimensão inferior ao recomendado.
Figura 05 — Botão “Enviar” com dimensão inferior ao recomendado.
Outro exemplo (NOK):
Ponto 05
Página: https://www.defesa.gov.pt/pt/comunicacao/noticias/Paginas/default.aspx
Na página de notícias, os botões da paginação apresentam dimensão inferior ao mínimo recomendado para elementos interativos.
Foi identificado um tamanho de 30x30px nos controlos de navegação da paginação, abaixo da dimensão mínima recomendada de 44x44px para interação em dispositivos de toque, dificultando a utilização dos elementos clicáveis.
Figura 06 — Botões de paginação com dimensão inferior ao recomendado.
Recomendações:
Ajustar os elementos interativos do website para garantir uma dimensão mínima de 44x44px CSS, tanto na vertical como na horizontal, facilitando a utilização em dispositivos táteis.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #38 Elementos interativos sem diferenciação visual clara ou comportamento consistente de interação
Elementos gráficos interativos têm de aparentar ser clicáveis.
– ver requisito 5.4 na lista Conteúdo
Evidências:
Ponto 01
Página: https://www.defesa.gov.pt/pt/defesa/dn/edn/Paginas/default_.aspx
Os cartões dos anuários apresentados não possuem indicação visual clara de interatividade.
Apesar de serem elementos clicáveis, os cartões não apresentam feedback visual, alteração no hover ou outros indicadores que permitam identificar facilmente a sua funcionalidade interativa
Figura 01 — Cartões dos anuários sem indicação visual de interatividade.
Ponto 02
Página: https://www.defesa.gov.pt/pt/pdefesa/CAIH/pt/caih/infraestruturas/Paginas/default.aspx
Na galeria de imagens da página Infraestruturas, as imagens apresentadas não possuem feedback visual, alterações com hover, ícone de expansão ou outros indicadores que permitam identificar facilmente que são elementos clicáveis e que direcionam para conteúdos adicionais.
Figura 02 — Imagens da galeria sem indicação visual de interatividade.
Outros exemplos (NOK):
Recomendações:
Garantir que os elementos gráficos interativos do website apresentam indicadores visuais claros de interatividade, permitindo perceber facilmente que são clicáveis e que direcionam para conteúdos adicionais.
evidência: issue #37 Elementos interativos com contraste insuficiente relativamente ao fundo
Elementos gráficos interativos têm de aparentar ser clicáveis.
– ver requisito 5.4 na lista Conteúdo
Evidências:
Ponto 01
Página: https://www.defesa.gov.pt/pt
Na página inicial, os pins interativos do mapa apresentam contraste insuficiente relativamente ao fundo envolvente, tendo sido identificado um rácio de contraste de 1.93:1.
Esta situação dificulta a identificação e perceção dos elementos interativos.
Figura 01 — Pins interativos com contraste insuficiente relativamente ao fundo.
Ponto 02
Página: https://www.defesa.gov.pt/pt
Na página inicial, os controlos de navegação do carrossel do banner principal apresentam contraste visual insuficiente relativamente a algumas imagens de fundo utilizadas nos slides.
Em determinados banners, as setas de navegação deixam de se destacar visualmente, tendo sido identificado um rácio de contraste de 1.08:1, dificultando a perceção e identificação dos elementos interativos.
Adicionalmente, os controlos de navegação do carrossel da secção “Notícias da Defesa Nacional” também apresentam contraste inferior ao mínimo recomendado, tendo sido identificado um rácio de contraste de 1.01:1.
Figura 02 — Controlos do carrossel com reduzido destaque visual.
Figura 02 — Controlos do carrossel com contraste insuficiente.
Ponto 02
Página: https://www.defesa.gov.pt/pt/defesa/organizacao/membrosgov/Paginas/MDN.aspx
Na página “Intervenções”, os botões de expansão identificados com o símbolo “+” apresentam contraste insuficiente relativamente ao fundo envolvente.
Foi identificado um rácio de contraste de 1.57:1, abaixo do mínimo recomendado para componentes gráficos interativos, dificultando a perceção e identificação dos elementos clicáveis.
Figura 03 — Botões de expansão com contraste insuficiente.
Outros exemplos (NOK):
Recomendações:
Garantir que todos os elementos gráficos interativos do website apresentam contraste e destaque visual suficientes relativamente ao fundo envolvente, permitindo a sua fácil identificação como elementos clicáveis.
etiqueta: NOK
Nível de conformidade:
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #70 A sequência de tabulação não segue a sequência de preenchimento nos documentos PDF
Validado o ficheiro PDF Formulário de Pedido de Pedido de Visita presente na página Forte de são Julião da Barra, através do browser e do Adobe Acrobat Reader, e foi verificado que não é possível navegar por todos os campos do formulário através do leitor de ecrã.
Figura - Análise do formulário na página Forte de são Julião da Barra através de navegação por teclado (Tab e Shift+Tab) e do leitor de ecrã.
URLs a verificar
https://www.defesa.gov.pt/pt/adefesaeeu/fsjb/Paginas/default.aspx
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #83 Formulários PDF inacessíveis para tecnologias de apoio
Validado o ficheiro PDF Formulário de Pedido de Pedido de Visita presente na página Forte de são Julião da Barra, através do browser e do Adobe Acrobat Reader, e foi verificado que é um formulário longo cujo conteúdo está distribuído por 2 e 3 páginas, respetivamente.
No entanto, como este formulário PDF não está acessível, os utilizadores que dependem de leitores de ecrã não conseguem aceder devidamente ao seu conteúdo.
Nos casos dos formulários PDF, uma solução mais acessível seria disponibilizar os formulários diretamente no site, em vez de em formato PDF.
Figura - Análise do formulário na página Forte de são Julião da Barra através de navegação por teclado (Tab e Shift+Tab) e do leitor de ecrã.
URLs a verificar
https://www.defesa.gov.pt/pt/adefesaeeu/fsjb/Paginas/default.aspx
evidência: issue #71 Existem formulários longos sem divisão por passos
Verifica-se que existem formulários no website muito longos, nos quais é solicitada ao utilizador toda a informação de uma só vez.
Figura - Análise do formulário da página Insígnia do Antigo Combatente através de navegação por teclado (Tab e Shift+Tab) e do leitor de ecrã.
URL:
https://www.defesa.gov.pt/pt/adefesaeeu/ac/direitos/iac/Paginas/default.aspx
etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #72 R 1.3 - Transação -(Melhoria) Formulários PDF inacessíveis para leitores de ecrã
Validado o ficheiro PDF Formulário de Pedido de Pedido de Visita presente na página Forte de são Julião da Barra, através do browser e do Adobe Acrobat Reader, o formulário possui uma sequência de passos ilustrada (“1. Entidade Requerente”, “2. Visitantes”, etc.).
No entanto, como este formulário PDF não está acessível, os utilizadores que dependem de leitores de ecrã não conseguem aceder devidamente ao seu conteúdo.
Figura - Análise do formulário na página Forte de são Julião da Barra através de navegação por teclado (Tab e Shift+Tab) e do leitor de ecrã.
URLs a verificar
https://www.defesa.gov.pt/pt/adefesaeeu/fsjb/Paginas/default.aspx
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #81 Campos do formulário PDF apresentam dimensões adequadas ao tipo de dados esperado
O tamanho dos campos deve refletir o tamanho previsível dos dados.
– ver requisito 2.1 na lista Transação
Evidências:
Verificou-se que os campos do formulário PDF da página Pedido de visita apresentam dimensões adequadas ao tipo de informação esperado, permitindo uma relação coerente entre o tamanho dos campos e os dados a introduzir.
Os diferentes campos apresentam larguras ajustadas ao conteúdo previsível, facilitando o preenchimento e compreensão do formulário.
Contudo, apesar das dimensões adequadas dos campos, o formulário PDF apresenta limitações de acessibilidade na utilização com tecnologias de apoio, dificultando a navegação, identificação e preenchimento correto dos elementos do formulário por utilizadores de leitores de ecrã.
Figura 01 — Formulário PDF com dimensões adequadas dos campos, mas com limitações de acessibilidade na utilização com tecnologias de apoio.
Recomendação
Recomenda-se que, sempre que possível, os formulários sejam disponibilizados diretamente em páginas web, garantindo melhor compatibilidade com tecnologias de apoio e uma experiência de preenchimento mais acessível para todos os utilizadores.
evidência: issue #50 Campos de formulário apresentam dimensões desadequadas ao tipo de dados esperado
O tamanho dos campos deve refletir o tamanho previsível dos dados.
– ver requisito 2.1 na lista Transação
Evidências:
Na página Contactos para a Imprensa, o campo de seleção “Para” apresenta uma largura desadequada relativamente ao conteúdo previsível apresentado no interior do componente.
O texto da opção disponível surge visualmente comprimido dentro do campo de seleção, dificultando a leitura e perceção integral da informação apresentada.
Figura 01 — Campo de seleção “Para” com largura desadequada ao conteúdo.
Na página Insígnia do Antigo Combatente, alguns campos apresentam largura excessiva relativamente ao tamanho previsível dos dados a introduzir.
Esta situação verifica-se, por exemplo, nos campos:
Figura 02 — Campos com largura excessiva relativamente ao conteúdo esperado.
Na página Formulario UPA o campo de seleção “Telefone” apresenta largura excessiva relativamente ao tamanho previsível dos dados a introduzir.
Figura 03 — Campo “Telefone” com largura excessiva relativamente ao conteúdo esperado.
Recomendações:
Recomendamos que os campos dos formulários sejam ajustados de acordo com o tamanho previsível dos dados esperados, garantindo maior coerência visual e melhor perceção da informação a introduzir.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #82 Legendas dos campos do formulário PDF apresentam-se de forma breve e clara
As legendas dos campos são breves e claras.
– ver requisito 2.3 na lista Transação
Evidências:
Verificamos que o formulário PDF da página Pedido de visita apresenta limitações de acessibilidade na utilização com leitores de ecrã.
Durante os testes realizados com tecnologia de apoio (NVDA) , não foi possível navegar e preencher corretamente os campos do formulário, não sendo igualmente anunciados de forma adequada os respetivos rótulos e elementos de formulário.
Esta situação dificulta a utilização autónoma do formulário por utilizadores de leitores de ecrã. (Figura 01)
Figura 01 — Formulário PDF com limitações de acessibilidade na utilização com leitores de ecrã.
Adicionalmente, ainda no formulário PDF da página Pedido de visita verificamos que alguns campos do formulário PDF apresentam legendas pouco claras relativamente à informação que deve ser introduzida.
Esta situação verifica-se, por exemplo, nos campos:
As designações utilizadas podem gerar dúvidas quanto ao tipo de informação esperada no preenchimento dos campos.
(Figura 02)
Figura 02 — Campos do formulário PDF com legendas pouco claras relativamente à informação solicitada.
URL a verificar:
Recomendações:
Recomenda-se a revisão das legendas dos campos do formulário, utilizando designações mais claras e objetivas relativamente à informação que deve ser introduzida.
Adicionalmente, recomenda-se que os formulários sejam disponibilizados diretamente em páginas web, em vez de exclusivamente em formato PDF, garantindo melhor compatibilidade com leitores de ecrã e restantes tecnologias de apoio.
evidência: issue #48 O texto do placeholder está a substituir o rótulo
As legendas dos campos são breves e claras.
– ver requisito 2.3 na lista Transação
Evidências:
No campo de pesquisa do website, o título associado ao campo não se encontra visível na interface gráfica, estando apenas disponível através de uma label oculta no código display:none.
O campo apresenta apenas o placeholder “Pesquisar”, que não substitui adequadamente uma legenda visível e permanentemente associada ao campo.
Esta situação pode dificultar a identificação clara da finalidade do campo, especialmente em contextos de usabilidade e acessibilidade.
Figura 01 — Análise do campo de pesquisa geral através do Google Inspector, com etiqueta oculta e utilização exclusiva de texto placeholder.
Na página Formulário UPA, alguns campos utilizam apenas texto placeholder no interior dos inputs como forma de identificação do campo, sem apresentação de etiqueta visível associada.
Esta situação verifica-se, por exemplo, nos campos:
O placeholder acaba por substituir visualmente o rótulo do campo, deixando de estar visível após o início da introdução de dados.
Figura 02 — Campos do formulário identificados apenas através de texto placeholder, sem etiqueta visível associada.
Recomendações:
Recomendamos que os campos de formulário e pesquisa sejam revistos para garantir que as respetivas legendas/rótulos permanecem sempre visíveis na interface gráfica.
Adicionalmente, os placeholders não devem ser utilizados como substitutos de rótulos visíveis, devendo existir uma associação clara e permanente entre o campo e a sua legenda.
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #77 Não é possível identificar campos obrigatórios nos formulários em PDF
Campos obrigatórios devem ser claramente indicados como tal.
– ver requisito 2.4 na lista Transação
Evidências:
Verificámos que, no formulário Pedido de Visita, os campos de preenchimento obrigatório não se encontram identificados de forma clara.
A obrigatoriedade dos campos não é comunicada visualmente de forma evidente nem transmitida corretamente às tecnologias de apoio, como leitores de ecrã.
Sempre que possível, recomenda-se a disponibilização destes formulários diretamente em páginas web, em vez de exclusivamente em formato PDF. Em formulários web, os campos obrigatórios devem ser corretamente identificados através de atributos como required ou aria-required="true", garantindo a sua perceção por tecnologias de apoio.
Adicionalmente, deve também ser apresentada uma indicação visual clara junto ao rótulo — por exemplo, “(Campo obrigatório)” — para que todos os utilizadores consigam identificar facilmente os campos que têm obrigatoriamente de preencher.
Figura 01 — Formulário “Pedido de Visita” sem identificação clara dos campos de preenchimento obrigatório, quer visualmente quer através de tecnologias de apoio.
Recomendações:
Recomenda-se que os campos obrigatórios dos formulários PDF sejam identificados de forma clara e consistente, tanto visualmente como para tecnologias de apoio, permitindo a sua correta perceção por todos os utilizadores.
Uma sugestão é ser disponibilizar os formulários diretamente em páginas web, garantindo melhor compatibilidade com leitores de ecrã e restantes requisitos de acessibilidade.
etiqueta: N/A
Lista de evidências recolhidas:
evidência: issue #1 Inexistência de ações longas
Em ações longas, o sistema deve indicar o que está a acontecer.
– ver requisito 3.1 na lista Transação
Na análise realizada, não foram identificadas ações longas que exijam comunicação de estado ao utilizador.
Desta forma, considera-se que o critério é não aplicável.
etiqueta: N/A
Lista de evidências recolhidas:
evidência: issue #78 Não existem formulários que permitam ações destrutivas pelo utilizador
Não identificamos formulários que permitem o utilizador fazer ações destrutivas e por esse motivo, consideramos esse critério como "Não aplicável".
No response
etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #79 Formulário em PDF não apresenta mensagens de erro junto aos campos de preenchimento
Verificou-se que no Formulário de Pedido de Pedido de Visita, presente na página Portal da Defesa Nacional em formato PDF, não apresenta mecanismos claros de validação nem mensagens de erro associadas aos campos de preenchimento.
Na prática, quando um campo é preenchido incorretamente ou omitido, não existem mensagens de erro junto aos respetivos campos que permitam ao utilizador identificar claramente o problema e a sua origem.
Esta limitação dificulta particularmente a utilização por pessoas com deficiência visual, cognitiva ou utilizadores de tecnologias de apoio, uma vez que não existe feedback contextual próximo do campo que necessita de correção.
Figura 1 - Formulário PDF sem mensagens de erro apresentadas junto aos campos de preenchimento
evidência: issue #64 Mensagens de erro não estão corretamente associadas a todos os campos
No formulário de contacto, os campos obrigatórios (Nome, Email, Assunto e Mensagem) apresentam mensagens de erro no DOM, sendo que em alguns casos estas mensagens estão parcialmente associadas ao campo através de atributos como aria-errormessage e aria-invalid.
Contudo, verifica-se um problema de consistência na associação programática das mensagens de erro:
O campo “Mensagem” (tbContactosMessage) apresenta aria-invalid="true", mas não possui associação explícita à mensagem de erro através de aria-errormessage ou aria-describedby.
Embora exista um elemento com a mensagem de erro (rfvContactosMessage), este não está corretamente referenciado pelo campo.
Em alguns campos, a associação entre input e mensagem de erro não é consistente ou completa, o que pode impedir leitores de ecrã de anunciar corretamente o erro associado ao respetivo campo.
As mensagens de erro são apresentadas visualmente, mas a sua relação programática com os campos não é garantida em todos os casos.
Figura 1 - Campo “Mensagem” sem associação programática à respetiva mensagem de erro
URL a verificar
aria-describedby ou aria-errormessage;aria-invalid="true" em todos os campos inválidos;evidência: issue #61 Mensagem de erro global não identifica nem direciona os erros do formulário
No formulário de contacto, após submissão inválida, são apresentadas mensagens de erro na vizinhança dos campos obrigatórios (Nome, Email, Assunto e Mensagem).
Contudo, verifica-se que as mensagens de erro encontram-se distribuídas por diferentes elementos e containers, não existindo uma estrutura consistente que permita associar programaticamente cada campo à totalidade da respetiva mensagem de erro.
Por exemplo:
Esta abordagem pode dificultar que utilizadores de leitores de ecrã compreendam integralmente o erro associado a cada campo, bem como os passos necessários para a sua correção.
Figura 1 - Mensagens de erro apresentadas na vizinhança dos campos, mas distribuídas por diferentes elementos e sem associação programática consistente
URL a verificar
aria-describedby ou aria-errormessage de forma consistente para associar cada campo à sua mensagem de erro;aria-invalid="true" é aplicado corretamente aos campos inválidos;etiqueta: NOK
Lista de evidências recolhidas:
evidência: issue #80 R 4.4 - Transação -Formulário em PDF não apresenta instruções para resolução dos erros de preenchimento
Verificou-se que no Formulário de Pedido de Pedido de Visita, presente na página Portal da Defesa Nacional em formato PDF, não fornece mensagens de erro nem instruções concretas que auxiliem o utilizador na correção de erros de preenchimento.
Quando um campo é preenchido incorretamente, ou quando informação obrigatória é omitida, não existem orientações claras que expliquem os passos necessários para resolver o problema.
A ausência de feedback orientador pode levar os utilizadores a processos de tentativa e erro, dificultando a conclusão eficaz da tarefa.
Figura 1 - Formulário PDF sem mensagens de erro ou instruções de correção dos campos preenchidos incorretamente
evidência: issue #65 Instruções para correção do campo Email não são apresentadas de forma consistente ao utilizador
No formulário Contactos para a Imprensa, o campo Email apresenta uma mensagem de validação visível no DOM:
“Formato de email inválido, o formato deve ser o seguinte, nome@dominio.pt”
Contudo, verifica-se que esta mensagem:
rfvContactosEmail, regexEmailValid);visibility: hidden, não sendo expostos a tecnologias de apoio;Apesar de a mensagem estar visualmente presente após erro, a sua estrutura fragmentada e dependente de diferentes containers compromete a sua perceção consistente em contexto de tecnologias de apoio.
Figura 1 - Campo Email com mensagem de erro visualmente apresentada, mas não anunciada ao leitor de ecrã
URL a verificar
aria-describedby ou aria-errormessage;etiqueta: OK (no entanto contém 5 melhorias que se recomenda efetuar)
Lista de evidências recolhidas:
evidência: issue #62 Outras violações - Pedido de Login de admin ao navegar no website
Durante a navegação em determinadas páginas do website, é apresentado um alerta que aparenta corresponder a um pedido de autenticação administrativa do “SharePoint”. Quando o utilizador cancela esse pedido, surge posteriormente uma barra/tab adicional sob o header do “SharePoint”, identificada com o nome de uma conta (“Patrícia Joana M. F. Pereira”).
Após a ocorrência deste comportamento, a interface permanece alterada apenas nessa página específica até que o utilizador limpe o cache do navegador. Em pelo menos um dos casos observados, o utilizador ficou impossibilitado de aceder corretamente à página (ver figura 01), sem indicação clara de como resolver a situação.
Esta ocorrência representa um potencial risco de segurança e de exposição indevida de componentes administrativos ou internos do sistema. A apresentação de elementos associados a autenticação administrativa pode incentivar tentativas indevidas de acesso por parte de utilizadores mal-intencionados ou gerar desconfiança relativamente à segurança da plataforma.
Além disso, o comportamento observado cria uma experiência inconsistente e confusa para utilizadores comuns, que poderão não compreender a origem do problema nem saber como recuperar o funcionamento normal do website.
Figura 01: Incapacidade de acessar o website devido ao pedido de autenticação.
Figura 02: Pedido de autenticação ao navegar no website. Acontecimento na página: https://www.defesa.gov.pt/pt/adefesaeeu/asc/Paginas/default.aspx
Figura 03: Após cancelar o pedido de autenticação a tab do "SharePoint" aparece debaixo do header permanentemente. Acontecimento na página: https://www.defesa.gov.pt/pt/pdefesa/ac/CMS
Recomendações:
Recomenda-se a análise técnica urgente da integração entre os sistemas envolvidos (SharePoint e mecanismos de autenticação), de forma a identificar a origem da exposição indevida de componentes administrativos e prevenir que conteúdos ou sessões internas sejam apresentados a utilizadores públicos.
evidência: issue #60 Outras violações - Foco não está visível na navegação por teclado e leitor de ecrã
Ao navegar pelo website utilizando o teclado ou leitor de ecrã, nem sempre o indicador de foco se encontra visível, dificultando significativamente a navegação, em particular para utilizadores que dependem exclusivamente deste meio de interação.
Durante a navegação sequencial através da tecla TAB, em alguns momentos o foco não é apresentado de forma perceptível, sendo apenas possível inferir a sua existência através da barra de estado do navegador, o que não constitui uma solução acessível nem adequada. Como por exemplo nos links da página de destaques (Ver figura 01).
Figura 01: Utilizando o teclado o foco está no link: "XII Fórum de Saúde Militar da CPLP" mas não existe highlight.É possível ver pelo indicador no canto inferior esquerdo da página que o foco está no link Disponível em: https://www.defesa.gov.pt/pt/pdefesa/cplp/destaques/Paginas/default.aspx#linkScroll
URL's a verificar:
Recomendações:
Garantir que todos os elementos interativos do website apresentam um indicador de foco visível, suficientemente contrastante e consistente, sempre que recebem foco através da navegação por teclado.
O estilo de foco deverá:
Esta melhoria é essencial para assegurar uma navegação acessível a utilizadores com deficiência visual, motora ou cognitiva
evidência: issue #58 Outras violações - Website em baixa repetidamente
Evidências:
Durante a utilização do website, ocorre frequentemente a apresentação de mensagens de erro “502 Bad Gateway”. Para além da recorrência do erro indicar possíveis problemas de estabilidade ou comunicação com o servidor, a mensagem é apresentada exclusivamente em inglês.
Considerando que o website pertence à Defesa Nacional Portuguesa e que uma grande parte dos seus utilizadores terá o português como língua principal, esta situação pode dificultar a compreensão do problema e gerar confusão ou insegurança relativamente ao estado da plataforma.
A apresentação de mensagens técnicas não traduzidas compromete a clareza da comunicação com o utilizador e prejudica a experiência de utilização, sobretudo para utilizadores com menor literacia digital ou menor conhecimento de línguas estrangeiras.
Imagem de erro do lado do servidor 502.
Recomendações:
Recomenda-se a análise e correção das causas técnicas que originam os erros “502 Bad Gateway”, de forma a reduzir a frequência destas ocorrências e melhorar a estabilidade geral da plataforma.
Adicionalmente, as mensagens de erro apresentadas ao utilizador devem:
evidência: issue #56 Outras violações - O botão “Limpar” remove os dados do formulário sem confirmação ou possibilidade de recuperação
** Evidências **
No formulário de contacto, o botão “Limpar” remove imediatamente todos os dados introduzidos pelo utilizador, sem apresentar qualquer pedido de confirmação nem permitir desfazer a ação.
Esta operação pode levar à perda acidental de informação já preenchida, obrigando o utilizador a repetir o preenchimento integral do formulário.
O problema pode impactar particularmente utilizadores com limitações cognitivas, motoras ou utilizadores de tecnologias de apoio, aumentando o risco de perda involuntária de conteúdo durante a interação.
Figura 1 - Botão “Limpar” elimina os dados do formulário sem confirmação prévia ou possibilidade de recuperação
URL a verificar
** Recomendações **
evidência: issue #55 Outras violações - Duplicação da componente de paginação
Evidências:
Na secção de notícias, quando é aplicado um filtro que devolve resultados suficientes apenas para uma única página, continuam a ser apresentadas duas componentes de paginação na interface (uma no topo e outra no fundo da lista de resultados), apesar de não existir navegação entre páginas.
Esta situação cria ruído visual e pode induzir os utilizadores em erro, levando-os a acreditar que existem páginas adicionais de conteúdo disponíveis. Além disso, a presença de controlos de paginação sem utilidade funcional reduz a clareza da interface e afeta a consistência da experiência de utilização.
Do ponto de vista programático, a duplicação destas componentes resulta também na existência de duas landmarks com a mesma designação (“Paginação das Notícias”), o que pode comprometer a navegação assistida e gerar ambiguidades para utilizadores de tecnologias de apoio.
Imagem da página de notícias com o filtro de "IDN" ativado.
URL's a verificar:
Recomendações:
Implementar uma validação lógica que verifique o número total de páginas disponíveis após a aplicação dos filtros.
Caso exista apenas uma página de resultados: