Relatório Avaliação da Candidatura da Sítio Autárquico - Câmara Municipal de Alcobaça

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #9 Outras melhorias - O componente de paginação não está estruturado como <nav> e não tem aria-label

  etiqueta: R 1.1etiqueta: chk 10 webetiqueta: melhoria

  Problema

  O elemento de paginação em páginas como Marcas Identitárias ou Avisos é anunciado pelo leitor de ecrã apenas como “lista de 7 opções”, sendo também indicada a posição de cada link dentro da lista.

  

  Figura 1 - Paginação na página Marcas Identitárias.

  No entanto, não é fornecido pelo leitor de ecrã qualquer contexto adicional que identifique este componente como um elemento de navegação, o que dificulta a compreensão da sua finalidade.

  Recomendação

  Rever o elemento de página em todas as páginas:

  • Estruturar o elemento de paginação como <nav>.

  • Adicionar um aria-label para distinguir esse <nav> do <nav> principal. Por exemplo: <nav aria-label="Paginação"

• evidência: issue #4 R 1.1 - Subopções do menu de mobile não estão estruturadas como listas

  etiqueta: R 1.1etiqueta: chk 10 webetiqueta: NOK

  Problema

  • Os elementos dos menus e submenus deverão estar todos estruturados como lista, recorrendo aos elementos <ul> e <li>.
    Nas subpopções de menu em mobile foram encontradas listas estruturadas como <div>. O leitor de ecrã não comunica que é uma lista, nem quantos elementos existem.

  

  Figura 1 - Inspect das subopções do menu em mobile revela que as opções estão apenas estruturadas como divs.

  • O botão que aparece como título desta subopção está a ser lido pelo leitor de ecrã como “Município, botão”. No entanto, a sua função é permitir a ação Voltar, saindo da secção Município, o que pode induzir o utilizador em erro.

  

  Figura 2 - Inspect do botão "Município" do menu de mobile revela que o texto está dentro do botão.

  Recomendação

  • Devem verificar que todas opções de menu em desktop e mobile estão estruturados como lista, com elementos <ul><li>.
  • Além disso, o botão de voltar deve ter o aria-label ="Voltar" ou aria-label="Sair de Município"-
  • Devem também garantir que as subopções de nível 2 em mobile só são apenas lidas quando a subopção é aberta.

  (Ver thread do issue para os erros ainda a corrigir)

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #10 R 3.1 - Não existem tabelas no site, por isso não é aplicável a estrutura de cabeçalhos com <th>

  etiqueta: chk 10 webetiqueta: R 3.1etiqueta: N/A

  Problema

  No ficheiro Excel das evidências, consideram que a página Boletim contém tabelas, mas apresenta apenas uma lista, não uma estrutura de <table> nem conteúdo que necessite dessa estrutura.

  Resolução

  Colocar como "Não aplicável" no Excel dos 10 aspectos funcionais da candidatura, uma vez que parece não existem tabelas no site.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #11 R 3.2 - Não existem tabelas no site, por isso não é aplicável a legenda estar marcado com o <caption>

  etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 3.2

  Problema

  No ficheiro Excel das evidências, consideram que a página Boletim contém tabelas, mas apresenta apenas uma lista, não uma estrutura de <table> nem conteúdo que necessite dessa estrutura.

  Resolução

  Colocar como "Não aplicável" no Excel dos 10 aspectos funcionais da candidatura, uma vez que parece não existem tabelas no site.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #14 R 4.1 - Campos de input sem etiqueta (label) e estruturados como outros elementos

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

  Problema

  Existem campos de input que não estão estruturados como tal e sem label associada:

  Na página inicial

  • Campo da pesquisa não tem label associada ao campo, e o leitor de ecrã lê a informação do aria-label do input, não do <span> visualmente escondido.

  

  Figura 1 - HTML do campo da pesquisa

  • Campo do email para receber newsletter não tem label associada ao campo, e o leitor de ecrã lê a informação do aria-label do input, não do span visualmente escondido.

  

  Figura 2 - HTML do campo do email para receber newsletter

  • Checkbox dos termos e condições não tem a label associada ao input, porque a label encontra-se numa <div> e o input noutra <div>, quebrando a ligação adjacente do HTML nativo.

  

  Figura 3 - HTML da checkbox dos termos e condições

  • Campo de intervalo de datas não está estruturado como campo de input, nem tem uma etiqueta (<label>) associado. Não é possível interagir com esse campo através do teclado e leitor de ecrã.

  

  Figura 4 - HTML do campo de data picker da página inicial

  • Campo da categoria não está estruturado como uma combobox, mas como botão, não sendo possível navegar corretamente com o leitor de ecrã pela dropdown e compreender as opções que foram selecionadas.

  

  Figura 5 - HTML do campo da categoria da página inicial

  Na página Eventos, os mesmos problemas são encontrados no campo da categoria e intervalo de datas.

  

  Figura 6 - HTML do campo da categoria da página Eventos

  

  Figura 7 - HTML do campo de intervalo de datas da página Eventos

  Resolução

  • Devem garantir que todos os campos de edição, dropdowns, pesquisa, date pickers, são estruturados como <input> e com uma <label>. Oforda <label> deve ter o mesmo valor que o id do <input>, para que o leitor de ecrã consiga comunicar a informação da label do campo quando foca no componente, assim como o cursor surgir no respectivo campo de edição quando se clica na etiqueta.

  • No caso do campo de categoria devem estruturar como uma multi-select combobox.

  • No caso do campo de intervalo de datas devem estruturar como um date picker combobox, com uma label associada. Podem seguir o exemplo do elemento Date Picker Combobox Example da W3C. como referência.

  • No caso da checkbox, devem garantir que o input está associado à label. Podem consultar a página Labeling Controls - Checkbox da W3C como referência.

  • A label de todos os campos mencionados deve ficar visível e não ser escondida do leitor de ecrã através de <span> ou ser atribuída através de um aria-label. A label estar constantemente visível permite relembrar cognitivamente o que as pessoas estão a inserir nos campos.

  • Não é necessário a label estar fora do campo, quando o campo ainda não tem input inserido, mas quando o input é inserido, a deve mover para cima para ficar visível.

  • Não devem utilizar o placeholder do campo como substituto da label.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #35 R 5.2 - 10 Aspetos

  etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 5.2

  O gráfico é acompanhado de uma descrição longa.
  – ver requisito 5.2 na lista 10 aspetos

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #38 R 7.1 - 10 Aspetos

  etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 7.1

  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

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #39 R 7.2 - 10 Aspetos

  etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 7.2

  O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.
  – ver requisito 7.2 na lista 10 aspetos

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #17 R 8.4 - Quando se retira a CSS, a informação relevante não permanece visível

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.4

  Problema

  Quando se retira a CSS, não aparece visível nenhuma informação sobre o botão das redes sociais, incluindo o seu texto alternativo.

  

  Figura 1 - Botões das redes sociais do topo da página sem CSS

  

  Figura 2 - Botões das redes sociais abaixo do campo da pesquisa sem CSS

  Acontece que o HTML dessas imagens-link estão mal estruturadas, estando uma <div> dentro de um link (<a>).

  

  Figura 3 - HTML das imagens - links das redes sociais

  Resolução

  Remover a <div>, um elemento block, dentro do link (<a>), um elemento inline. Seguir a construção nativa HTML de um link que contém uma imagem.

  Além disso, garantir que os estilos CSS não estão aplicados a uma <div>, mas à imagem.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #20 R 10.1 - Existem PDFs onde não é possível extrair o conteúdo textual para formato TXT

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 10.1

  Problema

  Foram encontrados ficheiros em formato PDF em que não é possível extrair os conteúdos.

  Por exemplo:

  • na página Ordens de Trabalho / 2026 , o PDF Ordem Trabalhos - 12-02-2026.
  • na página Ordens de Trabalho / 2025, o PDF Ordem Trabalhos - 12-12-2025.
  • na página Prevenção e Corrupção, o PDF "Relatório Intercalar do Plano de Gestão de Riscos de Corrupção e Infrações Conexas do Município de Alcobaça - outubro 2025"

  Resolução

  Devem garantir que os ficheiros PDF são otimizados para que seja possível extrair a informação para um processador de texto. Desta forma, garante-se que o texto pode ser lido por leitores de ecrã na ordem correta. No caso de documentos que são fotocópias, contendo apenas imagens, é possível converter os documentos para texto através do Reconhecimento Óptico de Caracteres (OCR) da Adobe.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #21 R 1.1 - O sítio Web não apresenta um resumo breve do seu propósito

  etiqueta: R 1.1etiqueta: chk conteúdoetiqueta: NOK

  Problema

  Não existe qualquer resumo do propósito, pelo que deve ser adicionado.

  

  Figura 1 - Página inicial da CM Alcobaça

  Resolução

  Como referência de uma boa prática, é possível verificar no website acessibilidade.gov ou da Câmara Municipal de Valongo que o seu propósito está escrito no topo da página.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #46 R 1.2 - Conteúdo

  etiqueta: chk conteúdoetiqueta: N/Aetiqueta: R 1.2

  Os termos mais complexos têm uma definição agregada.
  – ver requisito 1.2 na lista Conteúdo

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #23 R 4.1 - Os documentos longos não têm um índice no topo com hiperligações internas para o mesmo

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 4.1

  Problema

  Nas páginas consideradas longas, como a Exposições temporárias não existem um índice com hiperligações para cada secção interna dessa página.

  

  Figura 1 - Página Exposições temporárias é uma página longa.

  Resolução

  Para facilitar a navegação em páginas longas, com várias secções de conteúdos, deve existir um índice no topo da página. Esse índice deve conter hiperligações para as várias seções que existem.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #65 A sequência de tabulação no campo das datas e no botão de pesquisa não segue a sequência de preenchimento

  etiqueta: R 1.1etiqueta: NOKetiqueta: chk transação

  A sequência de tabulação entre campos segue a sequência de preenchimento.
  – ver requisito 1.1 na lista Transação

  Problema

  O critério não cumpre porque:

  • Campo de pesquisa no topo do ecrã: a ordem de navegação entre os elementos não é intuitiva, pois ao clicar no botão da lupa é necessário usar Shift + Tab para retroceder e aceder ao campo de input.

  

  • Campo de input das datas: não é possível abrir o calendário com o teclado e leitor de ecrã. Se forçarmos o foco no calendário com o rato, a navegação fica restringida apenas aos dois botões de avançar e recuar no mês.

  

  Resolução

  • Após o clique no botão da Pesquisa, mover o foco programaticamente para o input.
  • No caso dos campos de intervalo de datas devem estruturar como um date picker combobox, com uma label associada. Podem seguir o exemplo do elemento Date Picker Combobox Example da W3C. como referência.

  Se optaram por não corrigir este issue, devem evidenciar estes problemas na checklist de Transação na Declaração de Acessibilidade.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #66 R 1.2 - Transação

  etiqueta: chk transaçãoetiqueta: N/Aetiqueta: R 1.2

  Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas.
  – ver requisito 1.2 na lista Transação

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #67 R 1.3 - Transação

  etiqueta: R 1.3etiqueta: chk transaçãoetiqueta: N/A

  Os formulários com mais de uma página têm a sequência de passos ilustrada.
  – ver requisito 1.3 na lista Transação

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #69 R 2.2 - Transação

  etiqueta: chk transaçãoetiqueta: R 2.2etiqueta: N/A

  É usada revelação progressiva em vez de campos inativos.
  – ver requisito 2.2 na lista Transação

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #72 R 3.1 - Transação

  etiqueta: NOKetiqueta: chk transaçãoetiqueta: R 3.1

  Em ações longas, o sistema deve indicar o que está a acontecer.
  – ver requisito 3.1 na lista Transação

  Problema

  Corrigir a evidência da checklist a afirmar que não é aplicável.

  

  Em ações longas, o sistema apresenta um loader circle, no entanto, o leitor de ecrã não comunica nada quando o círculo aparece visualmente. Por exemplo, o caso do loader que aparece antes dos resultados da pesquisa serem apresentados.

  Resolução

  Devem garantir que esse loader:

  • tem um role="status"
  • aria-live="polite" que anuncia a mensagem assim que o utilizador terminar o que está a fazer.
  • aria-label ou texto interno que fornece a mensagem que será lida. (ex: aria-label="Aguarde...").

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #75 R 4.2 - Transação

  etiqueta: chk transaçãoetiqueta: N/Aetiqueta: R 4.2

  As ações destrutivas nunca devem ser permanentes, deve ser sempre possível desfazer a operação.
  – ver requisito 4.2 na lista Transação

  Devem alterar para Não Aplicável, já que não existem ações destrutivas.

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #76 As mensagens de erro não estão associadas no código ao campo de input a que dizem respeito

  etiqueta: NOKetiqueta: chk transaçãoetiqueta: R 4.3

  As mensagens de erro são claramente identificadas junto aos campos de origem.
  – ver requisito 4.3 na lista Transação

  Problema

  • Ao submeter o formulário (por exemplo, pressionando Enter no botão de submissão), o leitor de ecrã não é encaminhado para a mensagem de erro apresentada.

  • Quando o foco é colocado num campo de input com erro, o leitor de ecrã não anuncia a respetiva mensagem de erro, porque o erro não está programaticamente associado ao campo de origem.

  

  Resolução

  Devem garantir a associação programática das mensagens de erro:
  A associação da respetiva mensagem de erro é feita através do atributo aria-describedby, referenciando o ID do elemento que contém o erro. Desta forma, os leitores de ecrã conseguem anunciar automaticamente a mensagem quando o campo recebe foco.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #13 Outras melhorias - O texto alternativo das imagens não deve ser repetido em texto visível

  etiqueta: outras violaçõesetiqueta: NOK

  Problema

  Existem imagens com texto alternativo, o que por si é uma boa prática de acessibilidade a seguir.

  No entanto, esse texto alternativo das imagens também está presente visivelmente, resultando no leitor de ecrã a ler informação repetida e redundante, criando ruído na experiência.

  

  Figura 1 - Alcobaça e Vestiaria é o texto visível da imagem, mas também o texto alternativo no alt.

  O mesmo se aplica ao ícone da bandeira do país na combobox da mudança da língua, que tem o texto alternativo igual ao texto visível

  

  Figura 2 - Texto alternativo do ícone das bandeiras é igual ao texto visível da opção.

  

  Figura 3 - Texto alternativo é alt="generic image", o que está errado. Mas também não deve repetir o nome da freguesia.

  

  Figura 4 - Texto alternativo da imagem é "Marcas Identitárias, igual ao texto por baixo da imagem.

  Resolução

  Devem rever os atributos alts para que fiquem nulos, ou seja, alt="". Desta forma, o leitor de ecrã irá ignorar a imagem decorativa. Neste caso, a imagem é considerada decorativa porque não adiciona informação relevante, uma vez que já é transmitida pelo texto visível.

  Nota: Existem muitas páginas com imagens decorativas com texto alternativo igual ao texto visível, sendo uma prática geral no site.

  Podem encontrar algumas dessas imagens decorativas a rever nas seguintes páginas, havendo outras a rever:
  https://www.cm-alcobaca.pt
  https://www.cm-alcobaca.pt/49542/conhecer
  https://www.cm-alcobaca.pt/49543/area-do-municipe
  https://www.cm-alcobaca.pt/49544/municipio
  https://www.cm-alcobaca.pt/49547/camara-municipal
  https://www.cm-alcobaca.pt/49548/assembleia-municipal
  https://www.cm-alcobaca.pt/49549/freguesias