Relatório Avaliação de Candidatura
Portal do Associativismo de Câmara de Lobos

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #39 O menu principal e as opções do rodapé não estão estruturados como lista

  etiqueta: R 1.1etiqueta: NOKetiqueta: chk 10 web

  O menu de navegação deve estar estruturado como uma lista de opções.

  • Ver requisito 1.1 da lista 10 aspetos

  Evidencias:
  As opções apresentadas no menu principal e no rodapé estão sendo agrupadas por divs:

  

  Opções do menu agrupadas por divs

  

  Opções do rodapé agrupadas por divs

  URLs a verificar:

  • https://associativismo.cm-camaradelobos.pt/ - menu principal e rodapé

  Recomendações:

  • Estruturar as opções do menu e do rodapé como uma lista não ordenada. Para isso, devem utilizar a semântica HTML ul li.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #42 O menu não está estruturado como uma navegação

  etiqueta: R 1.2etiqueta: NOKetiqueta: chk 10 web

  É possível selecionar as opções e as subopções do menu quer com rato quer com teclado.

  • Ver requisito 1.2 da lista 10 aspetos

  Evidencias:
  Verifica-se que não está a ser utilizado a tag nav no menu. Isso faz com que ao navegar pelo website com o leitor de ecrã, não é possível realizar saltos diretamente para o menu, nem este é identificado como uma área de navegação:

  

  URLs a verificar

  • https://associativismo.cm-camaradelobos.pt/ - menu principal

  Recomendações:

  • O menu deve ser estruturado dentro de uma tag nav.

• evidência: issue #40 Não é possível identificar quando o menu está aberto ou fechado

  etiqueta: R 1.2etiqueta: NOKetiqueta: chk 10 web

  É possível selecionar as opções e as subopções do menu quer com rato quer com teclado.

  • Ver requisito 1.2 da lista 10 aspetos

  Evidencias:
  Quando navegamos com o leitor de ecrã, ele não informa se o menu está aberto (expandido) ou fechado (compactado). Isto indica que o estado do menu não está a ser corretamente comunicado às tecnologias de apoio:

  

  Recomendações:

  • Utilizar o atributo aria-expanded em conjunto com um script para gerenciar a abertura e fecho do menu. Dessa forma garantimos que a informação seja corretamente transmitida para as tecnologias de apoio.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #55 As imagens do menu principal possuem texto alternativo incorreto

  etiqueta: R 1.3etiqueta: NOKetiqueta: chk 10 web

  As imagem-link, caso existam no menu, devem ter o correspondente equivalente alternativo em texto.

  • Ver requisito 1.3 da lista 10 aspetos

  Evidências
  Quando o menu é aberto, é apresentado um segundo botão com a função de fechar o menu (ícone “X”). Embora essa alteração seja perceptível visualmente pela mudança do ícone, estruturalmente essa informação não está a ser corretamente transmitida aos leitores de ecrã, pois o botão não possui um nome acessível e para além disso, o nome acessível do botão "Open Menu" está em inglês e fornecido através do atributo title:

  
  

  URLs a verificar

  • https://www.cm-camaradelobos.pt/ - menu

  Recomendação

  • O atributo title deve ser utilizado apenas quando existir informação complementar. No caso do menu, o nome acessível é uma informação primária que deve ser transmitida corretamente às tecnologias de apoio. Por esse motivo, o title deve ser removido.
  • O ícone que identifica o menu e o botão fechar devem ser ocultados das tecnologias de apoio. Para isso, devem utilizar o atributo aria-hidden="true".
  • O nome acessível do botão pode ser fornecido através de um texto visível dentro do próprio botão. Esse texto deve estar presente para que, além do ícone, exista uma indicação visual clara de que se trata de um botão de menu. Por exemplo:

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #29 Existência de múltiplos h1 na página web

  etiqueta: NOKetiqueta: R 2.1etiqueta: chk 10 web

  Evidências

  Cada página do website deve conter um único elemento <h1>, que represente o título principal do conteúdo. A utilização de múltiplos <h1> pode comprometer a interpretação da hierarquia da página por tecnologias de apoio.

  Na página de Declaração de Acessibilidade, verifica-se a existência de dois elementos <h1>, o que constitui uma utilização incorreta da estrutura de cabeçalhos.

  Esta duplicação introduz ambiguidade na identificação do título principal da página e prejudica a coerência da hierarquia semântica.

  

  Figura 1 - Identificação de dois cabeçalhos marcados com <h1> na mesma página. .

  URLs a verificar:

  • https://associativismo.cm-camaradelobos.pt/acessibilidade

  Recomendações

  • Remover o título genérico "Associativismo Câmara de Lobos" da página de Declaração de Acessibilidade e Usabilidade.

• evidência: issue #28 Cabeçalho h1 genérico em todas as páginas

  etiqueta: NOKetiqueta: R 2.1etiqueta: chk 10 web

  Evidências

  Actualmente, todas as páginas apresentam o mesmo <h1> ("Associativismo Câmara de Lobos"). O elemento <h1> deve ser atribuído ao título principal de cada página de forma a identificar de forma clara o respetivo conteúdo.

  

  Figura 1 - Exemplo do <h1> estar igual em todas as páginas .

  Recomendações

  • Garantir que existe um único elemento h1, correspondente ao título principal de cada página.
  • Em todas as páginas o título principal está a ser atribuído como h2 sendo necessário alterar para h1. Devem garantir que essa alteração não gere problemas na hierarquia entre os cabeçalhos.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #31 Incorreta marcação de títulos e subtítulos

  etiqueta: NOKetiqueta: R 2.2etiqueta: chk 10 web

  Evidências

  Foram encontradas secções do website onde cabeçalhos estão marcados com <div> em vez da correta marcação (h2 por ex), ou marcados como cabeçalhos incorretamente.

  

  Figura 1 - Exemplo de um cabeçalho marcado com <div> .

  

  Figura 2 - Divisórias incorretamente marcadas como cabeçalhos .

  

  Figura 3 - Título do card incorretamente marcado .

  URLs a verificar:
  Todos os artigos dentro da lista de associações:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTI=
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1654-acre-associacao-cultural-e-recreativa-do-estreito-de-camara-de-lobos?eventos

  Recomendações

  • Alterar os títulos/subtítulos para cabeçalhos em todas as páginas da lista de associações.
  • Alterar as divisórias para links em vez de <h4> (ver Figura 2).
  • Identificar o título de cada card como cabeçalho (ver Figura 3) e alterar "Associação" e "Evento" para <div> em vez de cabeçalhos.

• evidência: issue #30 Saltos na hierarquia de cabeçalhos

  etiqueta: NOKetiqueta: R 2.2etiqueta: chk 10 web

  Evidências

  Nas páginas referidas existem saltos de cabeçalhos (por ex: h1 seguido de um h3).

  

  Figura 1 - Estrutura de cabeçalhos da página (https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio).

  

  Figura 2 - Estrutura de cabeçalhos da página (https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1610-acapo-associacao-dos-cegos-e-ambliopes-de-portugal).

  URLs a verificar:

  • https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1610-acapo-associacao-dos-cegos-e-ambliopes-de-portugal
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1596-clube-escola-do-estreito-madeira
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1618-comcordas-associacao-cultural
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1417-associacao-desportiva-de-muay-thai-da-madeira
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1596-clube-escola-do-estreito-madeira
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1417-associacao-desportiva-de-muay-thai-da-madeira
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1585-associacao-portuguesa-das-pertubacoes-do-desenvolvimento-e-do-autismo-appda-madeira

  Recomendações

  Devem rever todas páginas do site (homepage e interiores) para garantir que respeitam a hierarquia de títulos e subtítulos, o que implica:

  • Ter 1 título h1 (que marca o texto que representa o título da página ou, no caso da Homepage, o logo da entidade);
  • Ter as várias secções do documento marcadas com h2;
  • Ter as várias subsecções de h2 marcadas com h3, as subsecções destas com h4 e assim hierarquicamente encadeados até h6;
  • Evitar ter elementos de hierarquia inferior sem um elemento de hierarquia imediatamente superior (subsecções órfãs). Por exemplo, ter um h3 sem a correspondente h2, ou h4 sem a correspondente h3.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #45 Não foram encontradas tabelas

  etiqueta: N/Aetiqueta: R 3.1etiqueta: chk 10 web

  Evidências

  Não foram encontradas tabelas no website, tornando este critério N/A.

  Recomendações

  Nada a acrescentar.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #44 Não foram encontradas tabelas

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

  Evidências

  Não foram encontradas tabelas no website, tornando este critério N/A.

  Recomendações

  Nada a acrescentar.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #47 Existem campos sem etiquetas associadas

  etiqueta: R 4.1etiqueta: NOKetiqueta: chk 10 web

  Evidências

  No formulário da página lista de associações, verificámos que os campos “Áreas de atuação”, “subáreas de atuação” e “Freguesias” não têm etiquetas associadas:

  

  Campo Áreas de atuação” sem etiquetas associadas

  Recomendações

  Recomendamos a implementação de etiquetas associadas programaticamente a todos os campos dos formulários, seja de forma explícita ou de forma implícita.
  Para além disso recomendamos também uma de duas alternativas para melhoria da acessibilidade das comboboxes:

  • A utilização de elementos combobox nativos, que já oferecem todos os mecanismos de acessibilidade;
  • A restruturação das comboboxes editáveis presentes no site, de modo a torná-las acessíveis. Para tal, podem seguir o exemplo da W3C Editable Combobox With Both List and Inline Autocomplete.

• evidência: issue #46 O atributo placeholder está a substituir a etiqueta

  etiqueta: R 4.1etiqueta: NOKetiqueta: chk 10 web

  Evidências

  No formulário da página lista de associações, verificámos que não existe etiqueta no campo de pesquisa:

  

  Campo de pesquisa sem etiqueta e com atributo placeholder
  Como se pode observar na figura, o campo de pesquisa não tem um elemento , mas sim um atributo placeholder que está a substituir a etiqueta.
  Tal situação não é recomendável, uma vez que o conteúdo do placeholder desaparece da interface assim que se começa a escrever no campo, o que pode ser prejudicial para utilizadores com défice de memória.
  Quando cada campo tem uma etiqueta que lhe está associada programaticamente, é possível focar o campo ao clicar na etiqueta (ampliação da área de clique), o que pode beneficiar pessoas com dificuldades motoras ao selecionar um campo específico.

  Recomendações

  Recomendamos a revisão dos formulários para garantir que todos os campos estejam corretamente construídos:
  • A etiqueta do campo deve estar estruturada como e deve estar associada ao campo.
  • Para estar associada ao campo, o atributo for da etiqueta e o id do campo de input devem ser iguais.
  Alguns exemplos de estrutura seriam:

  <label for="firstname">Primeiro nome:</label>
  <input type="text" name="first" id="firstname">
  

  Ou,

  
  <label>
      Primeiro nome:
      <input type="text" name="firstname">
  </label>
  

• evidência: issue #41 Existem etiquetas associadas a controlos escondidos das tecnologias de apoio

  etiqueta: R 4.1etiqueta: NOKetiqueta: chk 10 web

  Evidências

  No formulário da página notícias, as etiquetas “Categoria” e “Ano” estão associadas a controlos ocultos das tecnologias de apoio:

  

  Etiqueta Categoria associada a um elemento nativo, mas que está oculto das tecnologias de apoio
  Os campos “Categoria” e “Ano” são controlos personalizados, aos quais não está associada qualquer etiqueta.
  Possivelmente como forma de auxílio à submissão do formulário foram colocados controlos nativos <select>, mas que estão ocultos das tecnologias de apoio. Assim, as etiquetas não são anunciadas por estas tecnlogias quando se procede à navegação por teclado.
  Destacamos ainda que estes controlos personalizados não estão acessíveis para os utilizadores de leitores de ecrã, sendo impossível perceber qual a opção que está a ser selecionada.

  Recomendações

  Recomendamos uma das seguintes alternativas:

  • A utilização de elementos combobox nativos, que já oferecem todos os mecanismos de acessibilidade, e a manutenção das etiquetas associadas a esses controlos nativos;
  • A restruturação das comboboxes editáveis presentes no site, de modo a torná-las acessíveis. Para tal, podem seguir o exemplo da W3C Editable Combobox With Both List and Inline Autocomplete. Nesse caso, não devem esquecer a verificação da associação das etiquetas aos controlos restruturados.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #63 Há campos obrigatórios que não estão identificados programaticamente

  etiqueta: R 4.2etiqueta: NOKetiqueta: chk 10 web

  Evidências

  Verificámos que no formulário da página Registar Associação, existem campos identificados programaticamente como obrigatórios de forma incorreta:

  

  Análise do grupo " Tipo Associação" do formulário da página “Registar associação”
  Como observado na figura, foi implementado um botão de rádio extra, oculto, que contém o atributo aria-required com o valor “true”, sendo que desta forma os leitores de ecrã não anunciam que os botões de rádio são de seleção obrigatória.

  Para além disso, existem situações no mesmo formulário em que foi colocado um atributo aria-required na etiqueta de pelo menos um campo, o que não tem qualquer efeito nas tecnologias de apoio:

  

  atributo aria-required incorretamente colocado na etiqueta “nome da associação”

  Recomendações

  Recomendamos, nas situações em que os botões de rádio estão no mesmo grupo e em que um deles é de seleção obrigatória, a colocação de atributos required ou aria-required em cada um dos botões.
  Recomendamos ainda a remoção dos atributos required e aria-required das etiquetas de todos os campos de todos os formulários, pois não têm qualquer efeito nas tecnologias de apoio; estes atributos devem ficar nos campos e não nas etiquetas.

• evidência: issue #62 Não há informação clara sobre o que é o asterisco nos campos de preenchimento obrigatório

  etiqueta: R 4.2etiqueta: NOKetiqueta: chk 10 web

  Evidências

  Os campos obrigatórios dos formulários devem estar devidamente identificados como tal. Idealmente, devem apresentar o texto “Obrigatório” à frente da legenda do campo. Pode-se colocar um * no campo obrigatório, desde que o significado do * seja mencionado no início do formulário.

  No formulário da página Registar Associação não existe informação sobre o significado do asterisco nos campos.

  

  Formulário da página Registar Associação, onde não existe informação sobre o significado do asterisco nos campos.

  Recomendações

  Recomendamos a revisão dos formulários por forma a adicionarem uma legenda no início do formulário que indique claramente o significado de . Por exemplo, “ Campos de preenchimento obrigatório”.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #68 Existem campos sem mensagens de erro na sua vizinhança

  etiqueta: NOKetiqueta: R 4.3etiqueta: chk 10 web

  Evidências

  Os campos “NIF/NIPC do requerente”, “Nome do requerente” e “Email do requerente”, presentes no formulário Alterar Dados -> opção “Remover Associação do diretório”, não apresentam mensagens de erro na sua vizinhança:

  

  Campos sem mensagens de erro na sua vizinhança

  Recomendações

  Recomendamos que sejam apresentadas mensagens de erro junto aos campos de todos os formulários, para assim forenecerem apoio na correção dos mesmos e consequente submissão correta dos formulários.

etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)

Lista de evidências recolhidas:

• evidência: issue #4 (Melhoria) Imagens decorativas com texto alternativo indevido

  etiqueta: melhoriaetiqueta: R 5.1etiqueta: chk 10 web

  Evidências

  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="".

  Um exemplo são os cards da secção "Eventos Associativismo" na homepage, não acrescentam informação relevante ou adicional ao conteúdo textual já disponibilizado (título e descrição do evento). No entanto, estas imagens estão a ser expostas aos leitores de ecrã através de texto alternativo preenchido.

  

  ---

  Verificado que os ícones também funcionam apenas como apoio visual, uma vez que a sua finalidade já se encontra claramente identificada pelo texto visível associado. Nesses casos não devem possuir nome acessível através do atributo title. Adicionalmente, sendo o ícone em SVG meramente decorativo neste contexto, deve ser removido da árvore de acessibilidade através de aria-hidden="true".

  

  URL:

  • https://associativismo.cm-camaradelobos.pt/
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes

  Recomendações

  • Recomenda-se que as imagens decorativas tenham alt="".
  • Quando o SVG tiver apenas finalidade visual ou decorativa, deve ser removido da árvore de acessibilidade, por exemplo com aria-hidden="true". Remover o atributo title.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #5 Imagem/gráfico não acessível para tecnologias de apoio

  etiqueta: NOKetiqueta: R 5.2etiqueta: chk 10 web

  Evidências

  A imagem apresenta informação detalhada sobre vários percursos, mas o texto associado não contempla todas as informações nela contidas. Os links para mais informações também não disponibilizam o detalhe necessário sobre cada percurso, pelo que o conteúdo visual não está acessível de forma equivalente.

  

  URL:
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1750-programa-andar-pela-saude-2026

  Recomendações

  • A imagem deve ser acompanhado de uma descrição longa que pode ser associada via aria-describedby.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #6 Imagens link com texto alternativo incorreto

  etiqueta: R 5.3etiqueta: NOKetiqueta: chk 10 web

  Evidências

  Verifica-se que a imagem do logótipo utilizada como link para a página inicial, apresenta um texto alternativo que não descreve adequadamente o seu propósito (acesso à página inicial). Também verifica-se que o nome acessível da imagem-link está a ser fornecido através do atributo title, o que não é adequado. O nome acessível deve ser assegurado através do alt da imagem ou diretamente no elemento interativo através de aria-label.

  

  ---

  Validado que a imagem link "Regulamentos" da sessão de Acessos, abre numa nova janela (target="_blank") porém não informa explicitamente o utilizador, o que pode causar desorientação, especialmente para utilizadores de tecnologias de apoio. Por exemplo: aria-label="Regulamento do Associativismo, abre em novo separador"

  

  ---

  • Imagem-link da galeria
    Verifica-se que, embora o texto alternativo definido no atributo alt esteja correto, a presença simultânea de um aria-label faz com que o leitor de ecrã anuncie apenas este último, ignorando o alt. Como resultado, o texto alternativo deixa de ser efetivamente utilizado.

  

  • Imagem ampliada da galeria
    A imagem ampliada deve apresentar o mesmo texto alternativo da imagem-link, garantindo consistência na identificação do conteúdo visual. No entanto, nesse caso, o alt não deve incluir a indicação “abrir galeria”, uma vez que a ação já foi executada e a imagem ampliada deve apenas descrever o conteúdo efetivamente apresentado.

  

  ---

  Verificado que os nomes alternativos das imagens incluem caracteres especiais (como _), que estão a ser lidos pelo leitor de ecrã como "sublinhado". É recomendado que o equivalente alternativo seja apresentado em linguagem natural, sem identificadores técnicos ou caracteres desnecessários. Adicionalmente, o atributo title é redundante neste contexto e não deve ser utilizado como mecanismo principal para comunicar a finalidade do link.

  

  URL:
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1750-programa-andar-pela-saude-2026
  https://associativismo.cm-camaradelobos.pt/
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1781-espetaculo-sons-em-familia-historias-cantadas-na-biblioteca-municipal-20260511170418

  Recomendações

  • O texto alternativo deve transmitir claramente o destino ou finalidade do link. Por exemplo: aria-label="Portal do Associativismo - Câmara de Lobos – página inicial".
  • Nos cads das associações o title que esta a ser apresentado deve ser removido.
  • As imagens-link deverão ter uma descrição breve associada, nomeadamente através do uso do atributo alt descrevendo corretamente a imagem apresentada, sem identificadores técnicos ou caracteres desnecessários.
  • Nas imagens da Galeria: deve ser removido o atributo aria-label da imagem-link e integrada no atributo alt a indicação da ação disponível, isto é, que a imagem permite abrir a galeria.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #69 Texto normal não tem contraste suficiente

  etiqueta: NOKetiqueta: R 6.1etiqueta: chk 10 web

  Evidências

  Notas gerais

  • O contraste no texto normal (menor que 18 pontos ou menor que 14 pontos negrito) das páginas deve ser, no mínimo 4,5:1, para que pessoas com baixa visão consigam ler o texto.

  A avaliação com a ferramenta Colour Contrast Analyser revela problemas relacionados com insuficiência de contraste, afetando diretamente a legibilidade.

  O website apresenta problemas de contraste em formulários, por exemplo na página Alterar Dados na primeira interação com a página os textos e labels dos campos de preenchimento da secção “Dados da Associação” apresentam-se desativados, pois utilizam uma camada de opacidade sobre os textos. A combinação de cores #C7C7C7(cor de primeiro plano) e #FFFFFF(cor de plano de fundo) torna os textos pouco visíveis. (Figura 1)

  

  Figura 1- Formulário “Alterar Dados” com problemas de contraste

  O formulário da página Registar Associação possui problemas de contraste nos textos das mensagens de erro com as combinação de cores #E73D4A(cor de primeiro plano) e #F6FAFE(cor de plano de fundo). (Figura 2)


  

  Figura 2- Formulário “Registar Associação” com problemas de contraste nas mensagens de erro

  Recomendações

  Recomendamos a revisão das cores das páginas e verificar as combinações de cores em todo website utilizadas em texto normal, incluindo estados de foco e hover para garantir os valores mínimos de contraste.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #75 Textos grandes não têm contraste suficiente

  etiqueta: NOKetiqueta: R 6.2etiqueta: chk 10 web

  Evidências

  Notas Gerais

  • Os textos de tamanho superior a 18 pontos, ou os textos de tamanho superior a 14 pontos mas a negrito, devem assegurar um rácio de contraste mínimo de 3:1 entre a cor do texto e a cor do fundo, para que as pessoas com baixa visão consigam ler o texto.

  A página Associação Cultural e Recreativa Coro de Câmara de Lobos apresenta problemas de contraste em textos grandes com a combinação de cores #F35970(cor de primeiro plano) e #DEEDF9(cor de plano de fundo) (Figura 1)

  

  Figura 1- Texto grande de páginas interiores das "Associações" não passam na avaliação com taxa de contraste (2,71:1)”

  O mesmo acontece em outras páginas, por exemplo nos “Projetos e Atividades” da página da Associação de Ginástica da Madeira (Figura 2)

  

  Figura 2- Texto grande taxa de contraste (2,86:1) inferior ao mínimo recomendado”

  Outros exemplos:

  • Academia de Línguas da Madeira #F2AB0C(cor de primeiro plano) e #DEEDF9(cor de plano de fundo) 

  • ACAPO, Associação dos Cegos e Amblíopes de Portugal #DDDD3C(cor de primeiro plano) e #DEEDF9(cor de plano de fundo)
  • Associação Insular de Geografia #75CB56(cor de primeiro plano) e #DEEDF9(cor de plano de fundo)

  Recomendações

  Recomendamos a revisão das cores das páginas para garantir os valores mínimos de contraste do texto grande.

  • Caso exista texto grande com pouco contraste, em que as cores utilizadas sejam as mesmas do logótipo da entidade, recomendamos a substituição dessas cores por outras que garantam um contraste mínimo de 3:1. Por exemplo, podem ser usados tons semelhantes ao do logotipo ou outras cores da identidade gráfica da marca.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #49 Players não funcionais em navegadores alternativos

  etiqueta: R 7.1etiqueta: NOKetiqueta: chk 10 web

  Evidências

  Foi identificado que o vídeo apresenta comportamentos inconsistentes entre diferentes navegadores. Embora funcione corretamente em navegadores como o Google Chrome, no Safari o conteúdo multimédia não consegue ser reproduzido de forma adequada, quer através do rato, quer através do teclado.

  Ao tentar iniciar a reprodução utilizando apenas o rato, o vídeo começa a reproduzir durante um curto período de tempo, regressando de seguida ao estado inicial sem concluir a reprodução. Quando a interação é efetuada exclusivamente por teclado, o leitor de ecrã informa que o conteúdo está a carregar, mas a reprodução é interrompida pouco depois, impossibilitando o acesso ao conteúdo multimédia (Ver figura 02).

  

  Figura 01: O leitor de ecrã encontra o botão de reprodução.

  

  Figura 02: Após confirmação de reprodução com o teclado, o vídeo inicia e automaticamente pausa.

  Exemplos de URL's a verificar:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1770-cultura-nos-mercados-voltou-esta-manha-ao-mercado-do-estreito-de-camara-de-lobos
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1768-abertura-quotcamara-de-lobos-cidade-em-florquot
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1767-mercado-municipal-de-camara-de-lobos-recebe-mais-um-momento-especial-da-iniciativa-cultura-nos-mercados

  Recomendações

  • Garantir a compatibilidade do leitor de vídeo com os principais navegadores, incluindo Safari.
  • Testar o funcionamento com tecnologias de apoio, incluindo leitores de ecrã, garantindo que os estados do vídeo são corretamente comunicados ao utilizador.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #52 Conteúdo visual sem audiodescrição

  etiqueta: NOKetiqueta: chk 10 webetiqueta: R 7.2

  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.

  

  Figura 01: Imagem de player com contéudo visual sem audiodescrição. Disponível em: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1772-biblioteca-municipal-de-camara-de-lobos-celebrou-o-seu-17-aniversario

  Exemplos de URL's a verificar:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1770-cultura-nos-mercados-voltou-esta-manha-ao-mercado-do-estreito-de-camara-de-lobos
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1768-abertura-quotcamara-de-lobos-cidade-em-florquot
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1767-mercado-municipal-de-camara-de-lobos-recebe-mais-um-momento-especial-da-iniciativa-cultura-nos-mercados

  Recomendações

  • Incluir audiodescrição sempre que existam informações relevantes comunicadas apenas visualmente.
  • Validar os conteúdos multimédia com utilizadores de tecnologias de apoio, como leitores de ecrã.
  • Disponibilizar uma versão alternativa do vídeo com audiodescrição integrada, quando necessário.
  • Garantir que textos apresentados no ecrã sejam também narrados em áudio.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #35 Formulário de pesquisa avançada exposto ao leitor de ecrã antes de estar visível em mobile

  etiqueta: NOKetiqueta: R 8.2etiqueta: chk 10 web

  Evidências

  Na versão mobile da página observada, o formulário de “Pesquisa avançada” encontra-se visualmente oculto por defeito, sendo apresentado apenas após ativação do respetivo botão.

  No entanto, apesar de não estar visível na interface, o formulário permanece disponível na árvore de acessibilidade e pode ser imediatamente navegado por leitores de ecrã.

  Como consequência, a ordem de leitura disponibilizada às tecnologias de apoio não corresponde à sequência visual efetivamente apresentada ao utilizador, originando uma inconsistência entre a interface visível e a informação exposta programaticamente.

  

  Figura 1 - Formulário oculto visualmente mas disponível ao leitor de ecrã antes da ativação da pesquisa avançada

  Notas Gerais

  • Componentes ocultos visualmente não devem permanecer acessíveis às tecnologias de apoio enquanto estiverem fechados ou inativos.
  • A ocultação exclusivamente através de CSS visual (ex.: posicionamento fora do ecrã) pode manter o conteúdo disponível para navegação assistiva.
  • A sequência de leitura deve refletir a ordem lógica e visual apresentada ao utilizador.
  • Interfaces expansíveis, filtros laterais e painéis móveis devem sincronizar corretamente o estado visual e o estado acessível.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/ (páginas com pesquisa avançada/filtros na versão mobile)

  Recomendações

  • Garantir que o formulário permanece oculto da árvore de acessibilidade enquanto não estiver visível.
  • Utilizar mecanismos apropriados para ocultação acessível, como:
    • hidden;
    • display: none;
    • aria-hidden="true" enquanto o painel estiver fechado.
  • Atualizar corretamente os atributos de acessibilidade quando o painel é aberto ou fechado.
  • Garantir que a ordem de leitura anunciada pelos leitores de ecrã corresponde à ordem visual apresentada ao utilizador.
  • Validar o comportamento com navegação assistiva em dispositivos móveis.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #50 Listagem de conteúdos sem estrutura semântica adequada

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

  Evidências

  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 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

  • Conjuntos de conteúdos relacionados, como listagens de documentos, notícias ou resultados, devem ser estruturados com elementos HTML semânticos apropriados (ex.: listas <ul> / <ol> e <li>), de forma a permitir que tecnologias de apoio identifiquem corretamente o agrupamento e o número de itens.
  • A utilização exclusiva de elementos genéricos (<div>) para representar estes conjuntos pode comprometer a perceção da relação entre os conteúdos apresentados.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTI=
  • (vários elementos em todo o website)

  Recomendações

  • Deve ser verificado este padrão em todo o website.
  • Os conjuntos de conteúdos que representem listagens (ex.: documentos, notícias, resultados) devem ser estruturados semanticamente como listas (<ul> ou <ol>), com cada item representado por um <li>.
  • Cada item da lista deve agrupar toda a informação relacionada (categoria, título, descrição e ações) dentro do respetivo <li>.
  • Evitar a utilização exclusiva de elementos genéricos (<div>) para representar agrupamentos de conteúdos.
  • Validar com leitores de ecrã para garantir que o agrupamento e o número de itens são corretamente anunciados.

• evidência: issue #48 Campo de seleção não comunica corretamente a opção selecionada

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

  Evidências

  Na página de lista de associações, os filtros de pesquisa incluem campos do tipo seleção (dropdown), nomeadamente “Área de atuação”, “Subáreas de atuação” e “Freguesias”.

  Foi identificado que a seleção destes campos não comunica corretamente o estado atual da opção selecionada:

  • visualmente, o valor apresentado no componente pode não refletir de forma clara a opção ativa;
  • com leitor de ecrã, não é corretamente indicado o estado selecionado do campo;
  • o campo de seleção nativo (<select>) encontra-se oculto das tecnologias de apoio, sendo substituído por um componente personalizado baseado em <span role="combobox">. Esta implementação pode impedir a correta identificação da opção atualmente selecionada e do estado do campo por leitores de ecrã.

  Como consequência, o utilizador pode não compreender qual a opção atualmente ativa, comprometendo a interpretação e utilização dos filtros.

  

  Figura 1 - Campos de seleção (Área de atuação / Freguesias) com indicação inconsistente da opção selecionada na interface e leitor de ecrã

  Notas Gerais

  • Campos de formulário devem comunicar de forma clara e consistente o valor atualmente selecionado.
  • A substituição de controlos nativos por componentes estilizados deve garantir equivalência semântica completa.
  • Tecnologias de apoio devem conseguir identificar:
    • o elemento como um campo de seleção;
    • a opção atualmente selecionada;
    • alterações de estado quando o utilizador interage com o campo.
  • O valor selecionado deve ser refletido de forma inequívoca tanto visualmente como via acessibilidade.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=

  Recomendações

  • Garantir que o componente de seleção mantém a semântica nativa de <select> sempre que possível.
  • Caso seja necessário manter o Select2, assegurar que:
    • o estado selecionado é corretamente exposto via ARIA;
    • o valor ativo é atualizado e anunciado corretamente por leitores de ecrã;
    • existe coerência entre o valor visual e o valor acessível.
  • Validar o comportamento dos filtros com navegação por teclado e leitores de ecrã.
  • Confirmar que qualquer alteração de seleção é imediatamente refletida no estado acessível do componente.

• evidência: issue #43 Botão “Pesquisa avançada” não comunica corretamente o estado expandido e apresenta comportamento inconsistente com leitor de ecrã

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

  Evidências

  Na versão mobile da página observada, o botão “Pesquisa avançada” funciona como um mecanismo expansível para apresentar ou ocultar o formulário de pesquisa.

  Contudo, durante a utilização com leitor de ecrã, o comportamento do componente revela inconsistências na comunicação do seu estado e operação:

  • após a expansão do conteúdo, não é possível voltar a fechar o painel de forma consistente;
  • o estado expandido/contraído do componente não é corretamente anunciado;
  • a relação entre o botão e a região controlada não é claramente transmitida às tecnologias de apoio.

  Como consequência, o componente não comunica adequadamente a sua função semântica de acordeão/expansão, dificultando a compreensão e utilização por utilizadores de tecnologias de apoio.

  

  Figura 1 - Botão “Pesquisa avançada” com comportamento inconsistente e comunicação incorreta do estado expandido

  Notas Gerais

  • Componentes expansíveis devem comunicar corretamente o seu estado (“expandido” ou “contraído”) às tecnologias de apoio.
  • O utilizador deve conseguir abrir e fechar o componente de forma consistente através do teclado e leitores de ecrã.
  • Botões que controlam regiões expansíveis devem utilizar atributos apropriados, como:
    • aria-expanded;
    • aria-controls.
  • O estado anunciado deve refletir corretamente o comportamento visual e funcional do componente.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/ (páginas com pesquisa avançada/filtros em versão mobile)

  Recomendações

  Garantir que o botão “Pesquisa avançada” atualiza corretamente o atributo aria-expanded conforme o estado do painel.
  Associar programaticamente o botão ao conteúdo controlado através de aria-controls.
  Permitir que o painel possa ser aberto e fechado de forma consistente através de teclado e leitores de ecrã.
  Garantir que o estado anunciado pelas tecnologias de apoio corresponde ao estado visual do componente.
  Validar o comportamento com leitores de ecrã em ambiente mobile.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #34 Ticker de notícias/eventos com movimento automático sem mecanismo percetível de controlo

  etiqueta: NOKetiqueta: R 8.4etiqueta: chk 10 web

  Evidências

  Na homepage foi identificado um ticker de associações com deslocação horizontal automática contínua.

  O componente apresenta conteúdos que se deslocam automaticamente da direita para a esquerda sem interação inicial do utilizador.

  Embora existam controlos de navegação e reprodução/pausa no componente, estes são apresentados apenas através de ícones sem identificação textual visível, podendo não ser suficientemente percetíveis ou compreensíveis para todos os utilizadores.

  Adicionalmente, o conteúdo inicia automaticamente o movimento logo após o carregamento da página.

  Como consequência, os utilizadores podem ter dificuldade em:

  • interromper o movimento;
  • compreender a existência dos controlos;
  • ler ou acompanhar o conteúdo em movimento contínuo.

  

  Figura 1 – Ticker de associações com deslocação automática contínua e controlos de pausa/navegação pouco percetíveis

  Notas Gerais

  Conteúdos em movimento automático podem dificultar a leitura, a concentração e a interação, sobretudo quando os mecanismos de controlo não são claramente identificáveis ou facilmente utilizáveis.

  Sempre que existam componentes com animação contínua, deslocação automática ou atualização dinâmica, deve existir um mecanismo acessível e facilmente identificável que permita:

  • pausar;
  • parar;
  • retomar;
  • navegar manualmente pelo conteúdo.

  Os controlos devem ser visualmente claros, semanticamente corretos e facilmente compreendidos por todos os utilizadores.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/ (Homepage - ticker de associações)

  Recomendações

  • Garantir que os controlos de pausa, reprodução e navegação são claramente percetíveis na interface e que o deslocamento automático do ticker é pausado quando o foco de teclado entra no componente ou num dos seus elementos interativos, evitando movimento contínuo durante a navegação por teclado.
  • Adicionar identificação textual ou nomes acessíveis aos botões de controlo.
  • Garantir que o utilizador consegue interromper facilmente o movimento automático.
  • Validar que os controlos são operáveis por teclado e corretamente anunciados por tecnologias de apoio.
  • Considerar evitar o início automático da animação sem ação explícita do utilizador.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #7 Quando a caixa de diálogo é aberta, o foco não move-se para dentro da caixa de diálogo

  etiqueta: NOKetiqueta: R 9.1etiqueta: chk 10 web

  Evidências

  Quando a caixa de diálogo é ativada, o foco do navegador não move-se para dentro da caixa de diálogo deixando a modal inacessível para tecnologias de apoio.

  

  URL:
  https://associativismo.cm-camaradelobos.pt/registar-associacao
  https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio (modal de avisos)
  https://associativismo.cm-camaradelobos.pt/alterar-dados (modal de avisos)

  Recomendações

  • Quando a caixa de dialogo é aberta o foco deve ser posicionado no primeiro elemento interativo.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #8 Foco não fica limitado a caixa de diálogo

  etiqueta: NOKetiqueta: R 9.2etiqueta: chk 10 web

  Evidências

  Verifica-se que quando a modal esta aberta o foco não fica limitado a modal (teclado, leitor de ecrã).

  

  URL:

  https://associativismo.cm-camaradelobos.pt/registar-associacao
  https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio (modal de avisos)
  https://associativismo.cm-camaradelobos.pt/alterar-dados(modal de avisos)

  Recomendações

  • Recomenda-se prender o foco do teclado dentro da dialog utilizando um script/evento no JavaScript ou na linguagem apropriada.
  • Quando o utilizador navega com TAB a partir do último elemento focável, o foco deve voltar para o primeiro elemento focável.
  • Quando o utilizador navega com SHIFT+TAB a partir do primeiro elemento focável, o foco deve mover‑se para o último elemento focável.

etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)

Lista de evidências recolhidas:

• evidência: issue #9 (Melhoria) A caixa dialogo não pode ser encerrada através da tecla ESC

  etiqueta: melhoriaetiqueta: R 9.3etiqueta: chk 10 web

  Evidências

  Verifica‑se que a modal de Alerta não pode ser encerrada através da tecla ESC.

  

  URL:
  https://associativismo.cm-camaradelobos.pt/registar-associacao
  https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio (modal de avisos)
  https://associativismo.cm-camaradelobos.pt/alterar-dados(modal de avisos)

  Recomendações

  • Idealmente podem implementar um mecanismo que permita o encerramento das janelas modais através da tecla ESC.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #10 R 9.4 - 10 Aspetos Web- Quando a caixa de diálogo fecha, o foco não volta ao elemento interativo que o invocou

  etiqueta: NOKetiqueta: R 9.4etiqueta: chk 10 web

  Evidências

  Verificado que ao fechar a modal o foco não retorna ao elemento que a acionou. Fica posicionado de forma inconsistente na página prejudicando a navegação por tecnologias de apoio.

  

  ---

  Verifica-se que, ao navegar com o leitor de ecrã utilizando os controles VO + espaço (Voice Over), ao fechar a galeria o foco não regressa ao elemento que a acionou. Isso acontece quando efetuamos a abertura da galeria de imagens e navegamos pelo conteúdo antes de fechar.

  

  URL:

  https://associativismo.cm-camaradelobos.pt/registar-associacao
  https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio (modal de avisos)
  https://associativismo.cm-camaradelobos.pt/alterar-dados(modal de avisos)
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1781-espetaculo-sons-em-familia-historias-cantadas-na-biblioteca-municipal-20260511170418

  Recomendações

  • Recomenda-se que ao fechar a modal, o foco seja devolvido ao elemento que a acionou.
  • É recomendado que o foco do leitor de ecrã se comporte da mesma forma que o foco do teclado.

etiqueta: OK (no entanto contém 1 melhoria que se recomenda efetuar)

Lista de evidências recolhidas:

• evidência: issue #57 Elementos clicáveis em ficheiro PDF sem identificação visual de interatividade

  etiqueta: R 10.1etiqueta: melhoriaetiqueta: chk 10 web

  Evidências

  URL a verificar:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1618-comcordas-associacao-cultural?documentos

  Ficheiro PDF:

  • Certidão_Registo_comercial_COMCORDAS_260505_101854

  O ficheiro PDF apresenta áreas clicáveis sem qualquer indicação visual associada. Os links apenas se tornam percetíveis durante a interação com rato, enquanto o leitor de ecrã identifica corretamente os elementos.

  Esta situação pode dificultar a identificação das ações disponíveis por parte dos utilizadores.

  

  Figura 01 — Área clicável no PDF “Certidão Registo comercial COMCORDAS” sem identificação visual associada.

  Recomendações

  Os elementos clicáveis presentes no ficheiro PDF devem apresentar identificação visual clara, permitindo que os utilizadores consigam perceber facilmente as ações disponíveis no documento.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #22 Necessidade de fazer scroll para visualização do resumo

  etiqueta: R 1.1etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Embora o resumo esteja presente na página inicial do Portal do Associativismo de Câmara de Lobos, este não se encontra imediatamente visível em todas as resoluções de ecrã. Por exemplo, numa resolução de 1280x720, o utilizador necessita de fazer scroll para conseguir visualizar o resumo, o que compromete a visibilidade imediata da informação mais relevante. Recomenda-se a adaptação do layout para garantir que o resumo seja apresentado de forma visível e acessível em diferentes tamanhos de ecrã.

  

  Imagem da página inicial na resolução de 1280x720 com o resumo fora da visibilidade do utilizador sem fazer scroll.

  Recomendações

  Recomenda-se a adaptação do layout para garantir que o resumo seja apresentado de forma visível e acessível em diferentes tamanhos de ecrã.

  Como exemplo de uma boa prática, é possível verificar no website selo.usabilidade.gov que o seu propósito está escrito no topo da página:

  

  Image exemplo de uma frase de propósito do website selo.usabilidade.gov

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #18 Falta de glossário para termos complexos

  etiqueta: R 1.2etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ao longo do website, é possível identificar a utilização de diversos termos técnicos e complexos que surgem sem qualquer definição ou explicação associada. Na ausência de um glossário ou de mecanismos que permitam esclarecer esses conceitos, os utilizadores podem ter dificuldade em compreender plenamente a informação apresentada, especialmente aqueles que não estão familiarizados com a terminologia utilizada.

  

  Imagem com o termo complexo "RAM" sem definição agregada.

  

  Imagem com o termo complexo "ACRE" sem definição agregada.

  Outros exemplos:

  • IPSS: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1574-aciris-associacao-cientifica-de-investigacao-regional-e-inovacao-social
  • IRS: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1423-casa-do-povo-do-jardim-da-serra
  • CDISA: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1605-cdisa-centro-de-desenvolvimento-e-inovacao-sociocultural-e-agroflorestal-associacao
  • NIPC e AG: https://associativismo.cm-camaradelobos.pt/registar-associacao

  Recomendações

  Recomenda-se a criação de um glossário que permita a utilização consistente de siglas ao longo do website, evitando que o utilizador tenha de procurar repetidamente a sua definição noutros parágrafos.

  Como exemplo podem visualizar o glossario do acessibilidade.gov. https://www.acessibilidade.gov.pt/glossario/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #17 Falta de datas de atualização em blocos de conteúdo

  etiqueta: R 1.3etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Não foi possível identificar datas de atualização nos blocos de conteúdo analisados. Considerando que as informações relativas às associações são relevantes e exigem credibilidade, é fundamental que todos os conteúdos apresentem uma data de atualização visível, de forma a reforçar a confiança, a transparência e a fiabilidade da informação disponibilizada.

  A falta dessas referências compromete a perceção de atualidade e fiabilidade da informação disponibilizada, tornando mais difícil para o utilizador avaliar se os conteúdos e contactos apresentados continuam válidos. A inclusão de datas de atualização, especialmente em páginas institucionais e informativas, é um elemento fundamental para reforçar a transparência, a credibilidade e a confiança na informação fornecida.

  

  Imagem de bloco de conteúdo sem uma data de atualização. Disponível em: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1574-aciris-associacao-cientifica-de-investigacao-regional-e-inovacao-social?quemSomos

  Recomendações

  • Incluir a data de publicação e/ou última atualização em todos os conteúdos relevantes;

  • Garantir que essa informação está semanticamente estruturada;

  • Assegurar consistência na apresentação das datas em todo o site.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #58 O conteúdo do site fica desformatado em resoluções mais pequenas

  etiqueta: NOKetiqueta: R 2.1etiqueta: chk conteúdo

  Evidências

  Notas Gerais

  • Todos os conteúdos do site devem ser responsivos para garantir a sua legibilidade na maioria das resoluções e quando são escalados para tamanhos superiores.

  O website apresenta inconsistências na variação dos tamanhos de letra em resoluções mais reduzidas. Por exemplo, na página inicial verificou‑se que, ao alterar a resolução para um formato mobile, o texto do menu principal fica desformatado e com uma dimensão inferior à recomendada, comprometendo a legibilidade. (Figura 1, 2 e 3)

  

  Figura 1 - Verificação do texto do menu em dispositivos móveis com texto variável e tamanho de letra de apenas 13px

  

  Figura 2 - Botões do menu principal possuem textos com dimensão variável com apenas 14px

  

  Figura 3 - Corpo de texto da página Associação Animal Vamos Lá Madeira com tamanho de letra variável em dispositivos móveis

  Outras páginas (NOK) e com tamanho de fonte variável em dispositivos móveis:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1589-academia-de-linguas-da-madeira
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1584-adnm-associacao-diaspora-no-mundo
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1654-acre-associacao-cultural-e-recreativa-do-estreito-de-camara-de-lobos?contactos

  


  Recomendações

  
As páginas devem ser revistas e adaptadas de modo a assegurar que o conteúdo se reorganiza corretamente e permanece totalmente utilizável em diferentes resoluções, tamanhos e orientações de ecrã, sem perda de informação ou funcionalidade.

• evidência: issue #56 O corpo de texto tem um tamanho inferior a 12pt (equivalente a 16px)

  etiqueta: NOKetiqueta: R 2.1etiqueta: chk conteúdo

  Evidências

  Notas Gerais

  • Para garantir a legibilidade do corpo de texto, este deve ter um tamanho igual ou superior a 12pt, que equivale a 16px.

  O website possui informações primárias com tamanho inferior a 12pontos(16px) por exemplo na página inicial o botão “Digital” na barra superior (disponível em todas as páginas do website) possui tamanho de letra inferior ao recomendado, assim como os links “Associações”, “Registar Associação”, “Regulamento”, “Pedidos de pagamento” com apenas 15px (Figura 1)

  

  Figura 1 - Verificação do tamanho do texto nas opções de primeiro nível do menu com apenas 15px

  Há botões de ação principal com tamanho de texto inferior ao recomendado. Por exemplo o botão “Limpar Filtro” na página Lista de Associações com tamanho de letra de apenas 14px. (Figura 2)

  

  Figura 2- Verificação do tamanho de texto em botão “Digital” com apenas 14px

  O formulário de Registar Associação do website possui labels associadas aos campos de preenchimento obrigatório das “declarações de compromisso” que são consideradas informação primária, mas apresentam um tamanho inferior ao recomendado de 14px. (Figura 3)

  

  Figura 3- Textos com informações primárias do formulário com dimensão inferior ao recomendado

  Recomendações

  É necessário ser corrigido 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 #60 Existem blocos de textos com mais de 100 caracteres por linha

  etiqueta: NOKetiqueta: R 2.3etiqueta: chk conteúdo

  Evidências

  Notas Gerais

  • Para assegurar uma boa leitura, as linhas de texto devem ter até 80 caracteres (incluindo espaços). No limite, podem ir até aos 100 caracteres (incluindo espaços).

  Verificámos que no website há blocos de textos apresentam largura superior ao recomendado por linha. Por exemplo na página inicial (Figura 1)

  

  Figura 1 - Análise de bloco de texto com ferramenta WordCounter com 146 caracteres

  Outras evidências (NOK)

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1589-academia-de-linguas-da-madeira - (123 caracteres)
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1431-associacao-musical-cultural-e-recreativa-coro-de-camara-de-lobos (101 caracteres)
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1781-espetaculo-sons-em-familia-historias-cantadas-na-biblioteca-municipal-20260511170418 (156 caracteres)
  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1780-as-inscricoes-para-a-2-caminhada-do-programa-andar-pela-saude-ja-estao-abertas (159 caracteres)

  Recomendações

  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 #61 O espaçamento entre linhas está abaixo do recomendado

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 2.4

  Evidências

  Notas gerais

  • Para assegurar uma boa leitura, o espaçamento entre linhas não deve ser inferior a 1.5x em relação ao tamanho do texto a ser analisado.

  Evidência 01
  Na página Associação de Ginástica da Madeira, há blocos de textos com espaçamento inferior ao recomendado, espaçamento de 28.5px para um tamanho de letra de 20px. (Figura 1)



  

  Figura 1 - Textos com espaçamento inferior ao recomendado.

  Outro exemplo de espaçamento incorreto:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1574-aciris-associacao-cientifica-de-investigacao-regional-e-inovacao-social Bloco de texto do “Público alvo” com tamanho de letra de 18px para um espaçamento de apenas 25.7px (valor mínimo correto: 27px)

  Exemplos OK:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1779-quotbanda-do-panda-estreiase-em-camara-de-lobosquot
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1584-adnm-associacao-diaspora-no-mundo

  Recomendações

  Para a evidência 01 apresentada, o espaçamento deveria ser, no mínimo 30px. É necessário rever todo website para garantir o espaçamento mínimo recomendado, relativo ao tamanho da letra. Além disso, como sugestão de melhoria para manter a consistência dos blocos de texto do website, recomendamos organizar o texto com alinhamento à esquerda.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #26 A navegação principal do site está colapsada em desktop

  etiqueta: R 3.2etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Boas práticas:

  No caso de breakpoints superiores, normalmente considerados para desktop, devem estar imediatamente visíveis no ecrã pelo menos as opções de 1º nível porque, à partida, existe espaço para tal.

  No caso de breakpoints inferiores, normalmente considerados para tablet e mobile, o menu pode manter-se colapsado.
  Independentemente da página, o menu deve estar sempre posicionado no mesmo local.

  Problema específico:

  Em breakpoints superiores, o menu principal do site está colapsado e só é possível expandi-lo a partir do botão “Menu hambúrguer” (ver Figura 01). Por isso, as opções de primeiro nível não são imediatamente visíveis para os utilizadores.

  

  Figura 01: Imagem da página inicial com o menu principal colapsado no topo direito.

  Notas:

  As associações aparecem na barra superior com designações diferentes das utilizadas no menu principal, o que pode gerar alguma confusão para os utilizadores. É importante garantir a consistência das opções de navegação em todo o website.

  

  Imagem do menu principal com as opções das associações no menu e na barra superior.

  Recomendações

  Em breakpoints superiores, as opções de 1º nível do menu devem estar sempre visíveis na página enquanto existir espaço.

  Adicionalmente, recomenda-se alinhar a nomenclatura entre ambos os menus, ajustando as opções do menu principal, ou, em alternativa, remover as opções da barra superior.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #25 Falta de identificação complementar nas hiperligações

  etiqueta: NOKetiqueta: R 3.3etiqueta: chk conteúdo

  Evidências

  Foi identificado um problema de acessibilidade relacionado com a identificação visual de links no website. Atualmente, existem situações em que os links não estão devidamente diferenciados do texto normal, sendo identificáveis apenas através da cor ou de interação (hover), o que não cumpre as boas práticas de acessibilidade. Segue em seguida alguns exemplos encontrados:

  

  Imagem de hiperligações de texto no header sem indicação visual.

  

  Imagem dos títulos de eventos com hiperligações sem indicação visual complementar.

  Outros exemplos:

  • Links no rodapé;
  • Links inferiores no menu principal;
  • Título das associações: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=
  • "Política de Privacidade": https://associativismo.cm-camaradelobos.pt/registar-associacao

  Recomendações

  Garantir que todos os links:

  • Sejam visualmente distinguíveis do texto normal sem depender exclusivamente da cor;

  • Incluam sublinhado ou outro indicador visual consistente;

  • Mantenham consistência em todos os estados (normal, hover, focus).

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #20 Páginas extensas sem índice de navegação interna entre secções

  etiqueta: R 4.1etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página:

  Na página Associativismo Câmara de Lobos – Declaração de Acessibilidade e Usabilidade, o conteúdo encontra-se organizado em múltiplas secções e obriga a um uso prolongado de scroll, não sendo disponibilizado um índice interno com ligações para navegação direta entre os diferentes tópicos da página.

  A ausência deste mecanismo dificulta a navegação e a localização rápida da informação, sobretudo em conteúdos extensos estruturados por secções.

  

  Figura 01 — Página extensa sem mecanismo de navegação interna entre secções.

  Recomendações

  Recomenda-se a inclusão de um índice interno no início da página, com ligações para as principais secções do conteúdo, facilitando a navegação e o acesso rápido aos diferentes tópicos apresentados.

• evidência: issue #19 Utilização de cartazes com dimensões excessivas

  etiqueta: R 4.1etiqueta: melhoriaetiqueta: chk conteúdo

  Evidências

  Ponto 01:
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1780-as-inscricoes-para-a-2-caminhada-do-programa-andar-pela-saude-ja-estao-abertas?utm_source=chatgpt.com

  Na página Associativismo Câmara de Lobos – Detalhe de Notícia, identificou-se a utilização de cartazes/imagens com dimensões excessivas, ocupando uma área muito extensa da página.

  Esta situação dificulta a navegação e a leitura do conteúdo, obrigando a um uso intensivo do scroll, particularmente em dispositivos com menor área de visualização.

  

  Figura 01 — Utilização de imagem com dimensão excessiva na página.

  Recomendações

  As imagens e cartazes apresentados nas páginas devem ser ajustados de forma proporcional ao conteúdo disponível, evitando a utilização de elementos visuais com dimensões excessivas que obriguem a scroll prolongado, especialmente em dispositivos móveis ou ecrãs de menor dimensão.

  Como complemento, sempre que os cartazes contenham informação textual relevante, recomenda-se também a disponibilização de uma versão alternativa em PDF ou outro formato de leitura acessível, permitindo uma consulta mais confortável do conteúdo apresentado.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #3 Inconsistências de adaptação responsiva e apresentação de conteúdos em dispositivos móveis

  etiqueta: R 4.2etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página: https://associativismo.cm-camaradelobos.pt/consulta-pedido-apoio

  Na página Associativismo Câmara de Lobos – Consulta pedido de apoio, os campos do formulário destinados à introdução do NIF/NIPC e código de acesso apresentam desalinhamento em alguns dispositivos móveis.

  Esta situação compromete a consistência visual e a organização dos elementos do formulário em ecrãs de menor dimensão, podendo dificultar a perceção da associação entre os respetivos campos e etiquetas.

  

  Figura 01 — Campos do formulário com desalinhamento em ecrãs de menor dimensão.

  Ponto 02
  Páginas:
  https://associativismo.cm-camaradelobos.pt/
  https://associativismo.cm-camaradelobos.pt/acessibilidade

  A barra horizontal de associações da página inicial Portal do Associativismo deixa de ser apresentado em alguns dispositivos móveis, deixando de estar disponível em resoluções reduzidas.

  Essa situação compromete o acesso aos elementos de navegação disponíveis e evidenciam uma adaptação inconsistente do conteúdo em diferentes formatos de visualização.

  

  Figura 02 — Barra horizontal de associações não apresentado em ecrãs de menor dimensão.

  Recomendações

  Recomenda-se a revisão da adaptação responsiva das páginas identificadas, garantindo que os elementos de navegação, pesquisa, filtragem e formulários permanecem visíveis, acessíveis e corretamente alinhados em dispositivos móveis.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #21 Elementos interativos dependentes de interação por hover para visualização

  etiqueta: NOKetiqueta: R 5.1etiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página: https://associativismo.cm-camaradelobos.pt/

  Foi identificado um elemento interativo no rodapé do conteúdo que apenas se torna visível quando o utilizador passa o rato sobre a área correspondente. Este comportamento impede o acesso à funcionalidade em dispositivos sem interação por hover, como dispositivos móveis ou navegação por teclado.

  

  Figura 01 — Elemento interativo apenas visível através de interação por hover.

  Recomendações

  Recomenda-se que os elementos interativos permaneçam visíveis independentemente da utilização de hover, garantindo o acesso às funcionalidades também em dispositivos táteis e navegação por teclado.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #11 Elementos interativos com área clicável inferior à dimensão mínima recomendada

  etiqueta: NOKetiqueta: R 5.2etiqueta: chk conteúdo

  Evidências

  Ponto 01:
  Página: https://associativismo.cm-camaradelobos.pt/registar-associacao

  Os elementos do tipo radio button e checkbox apresentados no formulário possuem uma área interativa inferior ao tamanho mínimo recomendado de 44×44px para componentes acionáveis.
  A reduzida dimensão das áreas clicáveis pode dificultar a interação com os elementos, especialmente em dispositivos táteis ou para utilizadores com limitações motoras.

  

  Figura 01 — Elementos radio button com área clicável inferior à dimensão mínima recomendada.

  

  Figura 02 — Elementos checkbox com área clicável inferior à dimensão mínima recomendada.

  Outro exemplo:
  https://associativismo.cm-camaradelobos.pt/alterar-dados

  Ponto 02
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias

  Na página Associativismo Câmara de Lobos – Lista de Notícias, o ícone de pesquisa apresenta uma área interativa inferior ao tamanho mínimo recomendado de 44×44px para componentes acionáveis.

  A reduzida dimensão da área clicável pode dificultar a interação com o elemento, especialmente em dispositivos táteis ou para utilizadores com limitações motoras.

  

  Figura 03 — Área clicável do ícone de pesquisa inferior à dimensão mínima recomendada.

  Ponto 03
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1780-as-inscricoes-para-a-2-caminhada-do-programa-andar-pela-saude-ja-estao-abertas

  Na página Associativismo Câmara de Lobos – Detalhe de Notícia, os ícones de redes sociais apresentam uma área interativa inferior ao tamanho mínimo recomendado de 44×44px para componentes acionáveis.

  Adicionalmente, o mesmo comportamento foi identificado nas restantes listagens associadas à "Detalhes de notícias".

  A reduzida dimensão das áreas clicáveis pode dificultar a interação com os elementos, especialmente em dispositivos táteis ou para utilizadores com limitações motoras.

  

  Figura 04 — Ícones de redes sociais com área clicável inferior à dimensão mínima recomendada.

  Outro exemplo:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1589-academia-de-linguas-da-madeira?contactos

  Ponto 04
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1781-espetaculo-sons-em-familia-historias-cantadas-na-biblioteca-municipal-20260511170418

  Na página da galeria de imagens apresentada em dispositivo móvel, o botão de fechar (“X”) do modal apresenta uma área interativa inferior ao tamanho mínimo recomendado de 44×44px para componentes acionáveis.
  A reduzida dimensão da área clicável pode dificultar a interação com o elemento, especialmente em dispositivos táteis ou para utilizadores com limitações motoras.

  

  Figura 05 — Botão de fechar do modal com área clicável inferior à dimensão mínima recomendada.

  Outros exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1774-iniciativa-vamos-falar-de-livros-12-20260507122514
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1765-camara-de-lobos-cidade-em-flor-2026

  Recomendações

  Os elementos interativos da plataforma devem garantir uma área clicável mínima de 44×44px, permitindo uma interação mais confortável e precisa, especialmente em dispositivos táteis e para utilizadores com limitações motoras.

  Adicionalmente como sugestão de melhoria:
  Recomenda-se igualmente a uniformização do alinhamento visual das checkboxes, de forma a assegurar maior consistência na apresentação do formulário e evitar perceções de desorganização ou erro visual.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #36 Ação principal da página apresenta destaque visual adequado

  etiqueta: R 5.3etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias?Y2F0PTEy

  Os botões associados à ação principal dos formulários não apresentam destaque visual relativamente às restantes ações secundárias, como por exemplo o botão “Limpar filtro”.
  Esta situação dificulta a identificação rápida da principal ação disponível na interface.

  

  Figura 01 — Ações principais do formulário sem diferenciação visual clara relativamente às ações secundárias.

  Outros exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTY=
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes

  Ponto 02
  Páginas:
  https://associativismo.cm-camaradelobos.pt/
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTY=

  O botão “Saiba mais”, apesar de corresponder a uma ação secundária, apresenta estilos visuais diferentes entre páginas da plataforma, criando inconsistências na navegação e na apresentação dos elementos interativos.

  

  Figura 02 — Botão “Saiba mais” apresentado na página inicial.

  

  Figura 03 — Botão “Saiba mais” apresentado na listagem de associações.

  Recomendações

  Os botões associados às ações principais devem apresentar maior destaque visual relativamente às ações secundárias. Adicionalmente, os botões da plataforma devem manter consistência visual entre páginas, garantindo uma navegação mais clara e previsível para os utilizadores.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #13 Elementos interativos com contraste insuficiente relativamente ao fundo

  etiqueta: R 5.4etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTI=

  Os ícones de expansão apresentados nos seletores “Freguesias”, “Áreas de atuação” e “Subáreas de atuação” apresentam contraste insuficiente relativamente ao fundo dos componentes.

  Esta situação compromete a perceção visual dos indicadores dos componentes e dificulta a identificação das funcionalidades disponíveis, especialmente para utilizadores com dificuldades visuais ou em condições de menor visibilidade.

  

  Figura 01 — Ícone de expansão do seletor “Freguesias” com contraste insuficiente relativamente ao fundo.

  

  Figura 02 — Ícones de expansão dos seletores “Áreas de atuação” e “Subáreas de atuação” com contraste insuficiente relativamente ao fundo.

  Outros exemplos:

  • https://associativismo.cm-camaradelobos.pt/menu/lista-noticias
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1431-associacao-musical-cultural-e-recreativa-coro-de-camara-de-lobos?contactos (Ícones das redes sociais)
  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1589-academia-de-linguas-da-madeira?contactos (Ícones das redes sociais)

  Ponto 02
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=

  O botão “Saiba mais” apresenta um contraste de cor inferior ao mínimo recomendado entre o texto e o fundo do componente, dificultando a sua leitura e identificação por parte dos utilizadores.

  

  Figura 03 — Botão com contraste insuficiente entre o texto e o fundo do componente.

  Recomendações

  Recomenda-se a revisão do contraste visual dos ícones e indicadores apresentados nos componentes de seleção, garantindo uma diferenciação suficiente relativamente ao fundo e uma perceção clara das funcionalidades disponíveis.

• evidência: issue #12 Elementos interativos sem diferenciação visual clara ou comportamento consistente de interação

  etiqueta: R 5.4etiqueta: NOKetiqueta: chk conteúdo

  Evidências

  Ponto 01
  Página:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias

  Na página Associativismo Câmara de Lobos – Lista de Associações, o elemento “Limpar filtro” não apresenta características visuais que permitam identificá-lo de forma evidente como um componente interativo.

  A mesma situação foi igualmente identificada na página Associativismo Câmara de Lobos – Lista de Notícias, no botão “Limpar filtro”, incluindo em dispositivos móveis.

  Adicionalmente, o mesmo comportamento foi identificado nas restantes listagens associadas à "Lista de Associações".

  A ausência de indicadores visuais associados a elementos acionáveis pode dificultar a perceção da funcionalidade disponível e comprometer a identificação da ação pelos utilizadores.

  

  Figura 01 — Página Lita de Associações com o elemento acionável sem diferenciação visual suficiente.

  

  Figura 02 — Página Lista de Notícia com o elemento “Limpar filtro” sem diferenciação visual suficiente.

  Outos exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1574-aciris-associacao-cientifica-de-investigacao-regional-e-inovacao-social?contactos

  Ponto 02
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias

  Na página Associativismo Câmara de Lobos – Lista de Notícias, o painel de filtros apresentado em desktop deixa de estar visível em dispositivos móveis, sendo substituído pelo elemento “Pesquisa avançada”.
  Contudo, o elemento “Pesquisa avançada” é apresentado apenas como texto, sem características visuais que permitam identificá-lo claramente como um componente interativo ou acionável.
  Esta situação pode dificultar a perceção da funcionalidade disponível e comprometer a identificação da ação pelos utilizadores em dispositivos móveis.

  

  Figura 03 — Elemento “Pesquisa avançada” apresentado sem diferenciação visual clara de interatividade.

  Ponto 03
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1780-as-inscricoes-para-a-2-caminhada-do-programa-andar-pela-saude-ja-estao-abertas

  Foi identificada uma imagem clicável que permite abrir a figura em formato ampliado, contudo a mesma não apresenta características visuais que permitam identificá-la claramente como um elemento interativo.

  Durante a interação por hover não existe qualquer indicação visual de clicabilidade ou ação disponível, podendo dificultar a perceção da funcionalidade pelos utilizadores.

  

  Figura 04 — Imagem clicável sem indicadores visuais claros de interatividade.

  Outros exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1781-espetaculo-sons-em-familia-historias-cantadas-na-biblioteca-municipal-20260511170418
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1775-apresentacao-do-livro-infantil-a-macaronesia-trocada-por-miudos-20260507170001
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1774-iniciativa-vamos-falar-de-livros-12-20260507122514
  https://associativismo.cm-camaradelobos.pt/menu/lista-noticias/detalhe-noticias/1765-camara-de-lobos-cidade-em-flor-2026

  Ponto 04
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=

  Na página de listagem de associações, o elemento “37 associações” apresenta um aspeto visual semelhante ao botão “Saiba mais”, embora não possua qualquer funcionalidade associada, tratando-se apenas de um resultado informativo da pesquisa.

  Adicionalmente, o mesmo comportamento foi identificado nas restantes listagens associadas às “Áreas de atuação”.

  É necessário garantir a consistência no estilo visual de elementos que são interativos e diferenciar os que não são, evitando que elementos informativos aparentem possuir comportamento clicável.

  

  Figura 05 — Elemento informativo com aparência semelhante a ação clicável.

  Ponto 05
  Página: https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1574-aciris-associacao-cientifica-de-investigacao-regional-e-inovacao-social?atividades

  Na página de detalhe das associações, os elementos identificativos das categorias e áreas de atuação apresentam funcionalidade clicável, mas não possuem indicadores visuais claros que permitam identificá-los como componentes interativos.

  Adicionalmente, é importante garantir consistência na apresentação destes elementos ao longo do website, uma vez que noutras páginas o mesmo estilo visual é utilizado apenas em tags informativas, podendo levar os utilizadores a pensar que também são clicáveis. O mesmo padrão visual é ainda utilizado em elementos interativos do menu principal.

  

  Figura 06 — Elementos interativos sem diferenciação visual clara relativamente ao conteúdo informativo.

  Outros exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1610-acapo-associacao-dos-cegos-e-ambliopes-de-portugal?atividades
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes/detalhe-associacoes/1584-adnm-associacao-diaspora-no-mundo?atividades

  Recomendações

  Recomenda-se a revisão visual dos elementos interativos identificados, garantindo que ações clicáveis apresentam indicadores claros de interatividade e que elementos meramente informativos não assumem aparência semelhante a componentes acionáveis.
  Deverá igualmente ser assegurada consistência visual entre estados de interação, contribuindo para uma navegação mais clara e intuitiva.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #24 Existem formulários longos sem divisão por passos

  etiqueta: R 1.2etiqueta: chk transaçãoetiqueta: NOK

  Evidências

  Em formulários longos, com mais de 2 ecrãs de altura, deve-se garantir que a informação é pedida ao utilizador de forma faseada, dividindo os passos em várias páginas ou secções. No caso de formulários curtos, não é necessário fazer esta divisão.

  Na página Registar Associação, existe um formulário longo onde é pedida toda a informação ao utilizador de uma só vez.

  

  Figura - Formulário da página Registar Associação.

  Recomendações

  Recomendamos que seja revista a estrutura dos formulários mais longos, de forma a segmentar os passos em várias páginas ou secções.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #38 Não foram encontrados formulários com mais de uma página

  etiqueta: N/Aetiqueta: R 1.3etiqueta: chk transação

  Evidências

  Não foram encontrados formulários com mais de uma página no Portal do Associativismo de Câmara de Lobos.

  Recomendações

  No response

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #51 O tamanho dos campos não reflete o tamanho previsível dos dados

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

  Evidências

  A largura do próprio campo deve refletir o tamanho previsível dos dados a preencher, principalmente em campos de escrita livre em que o utilizador deve inserir os seus próprios dados.

  Verificámos que nas páginas Registar Associação e Alterar Dados a largura dos campos não reflete o tamanho previsível dos dados.

  Nos campos “Nome da Associação”, “Morada” e “Logo” da página Registar Associação e os campos “Nome da Associação” e “Ficheiros considerados relevantes” da página Alterar Dados, a largura apresentada é excessiva face ao tipo de informação ou ficheiro que o utilizador precisa de submeter.

  Já nos campos “Nome do requerente” e “Email do requerente” da página Alterar Dados, a largura é insuficiente para acomodar confortavelmente os dados esperados. Por exemplo, o campo 'Nome' deve ter largura suficiente para acomodar, no limite, o nome completo do utilizador.

  

  Figura 1 - Campo "Nome da Associação" da página Registar Associação. O campo é demasiado largo para a informação a inserir. O campo "Nome da Associação" está destacado através de um retângulo de borda preta.

  

  Figura 2 - Parte do formulário da página Alterar Dados. Os campos "Ficheiros considerados relevantes", "Nome do requerente" e "Email do requerente" estão destacados através de retângulos de borda preta.

  Recomendações

  Recomendamos a revisão dos campos dos formulários de forma a garantir que a largura dos campos está adequada ao tipo de informação a inserir.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #53 Há campos dependentes de outros campos que estão imediatamente visíveis mas estão inativos

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

  Evidências

  Os campos dependentes do preenchimento de outros campos devem aparecer apenas após o campo principal ter sido preenchido. Desta forma, reduz-se a probabilidade de preencher dados contraditórios.

  No formulário da página Registar Associação, o campo “Freguesia” está visível, mas inativo, não sendo possível de preencher visto que tem dependência de preenchimento do campo “Concelho”.

  

  Figura - Análise do campo "Freguesia", do formulário da página Registar Associação, através do Google Inspector.

  Recomendações

  Recomendamos ocultar o campo “Freguesia” até que o utilizador preencha o campo “Concelho”. Depois de selecionada uma opção dentro de “Concelho”, o campo “Freguesia” deve ser apresentado com as opções atualizadas de acordo com a escolha feita.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #65 Existem campos do formulário cuja legenda não é clara

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

  Evidências

  As legendas dos campos devem ser claras, curtas e concisas, para que sejam rapidamente entendidas pelo utilizador.

  Verificámos que, por exemplo, no formulário da página Registar Associação, há um campo com a rótulo “Logo”. Pode não ser claro qual a informação a inserir.

  Da mesma forma, no formulário da página Alterar Dados, há um campo com o “Ficheiros considerados relevantes”. Pode não ficar claro para o utilizador que ficheiros deve submeter.

  

  Figura 1 - Campo "Ficheiros considerados relevantes" no formulário da página Alterar Dados.

  

  Figura 2 - Campo "Logo" no formulário da página Registar Associação.

  Recomendações

  As legendas dos campos devem ser alteradas para deixar mais claro o que deve ser feito. No primeiro caso, do campo “Logo na página Registar Associação, uma possível solução é alterar o rótulo para “Logótipo da associação” para tornar mais claro para o utilizador que informação deve inserir.

  No segundo caso, do campo “Ficheiros considerados relevantes” da página Alterar Dados, recomendamos criar rótulos específicos para cada documento que o utilizador deve submeter, acompanhados de um botão de carregamento correspondente.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #67 Há campos obrigatórios que não estão identificados programaticamente

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

  Evidências

  Verificámos que, nos formulários das páginas Registar Associação e Alterar Dados, há vários campos que não estão programaticamente definidos como obrigatórios.

  Páginas e campos a verificar:

  Registar Associação – Campos:

  • “Tipo Associação”
  • "Concelho" (Quer na opção “Associação local” quer na opção “Associação Regional”, do campo “Tipo Associação”, selecionadas)
  • "Freguesia" (Quer na opção “Associação local” quer na opção “Associação Regional”, do campo “Tipo Associação”, selecionadas)
  • “Indique as áreas de intervenção da Associação”
  • “Declaro sob compromisso de honra a veracidade de todas as declarações prestadas e assumo toda a responsabilidade consequente da sua inexatidão ou falsidade.”
  • “Declaro que li e aceito a Política de Privacidade.”

  Alterar Dados – Campos:

  • “Pretendo”
  • “NIF/NIPC do requerente” (Quer na opção “Editar informação da Associação no Portal” quer na opção “Remover Associação do diretório”, do campo “Pretendo”, selecionadas)
  • “Nome do requerente” (Quer na opção “Editar informação da Associação no Portal” quer na opção “Remover Associação do diretório”, do campo “Pretendo”, selecionadas)
  • “Email do requerente” (Quer na opção “Editar informação da Associação no Portal” quer na opção “Remover Associação do diretório”, do campo “Pretendo”, selecionadas)
  • “Declaro sob compromisso de honra a veracidade de todas as declarações prestadas e assumo toda a responsabilidade consequente da sua inexatidão ou falsidade.”

  

  Figura 1 - Análise do campo “Declaro sob compromisso de honra a veracidade de todas as declarações prestadas e assumo toda a responsabilidade consequente da sua inexatidão ou falsidade.”, na página Registar Associação, através do Google Inspector. O elemento está destacado através de um retângulo de borda preta.

  

  Figura 2 - Análise dos campos "NIF/NIPC do requerente", "Nome do requerente" e "Email do requerente" na página Alterar Dados.

  Recomendações

  Recomendamos que, em todos os campos obrigatórios, seja adicionado o atributo required nos campos de input de forma a reforçar aos utilizadores de tecnologias de apoio que o campo em questão é um campo de preenchimento obrigatório.

• evidência: issue #66 Não há informação clara sobre o que é o asterisco nos campos de preenchimento obrigatório

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

  Evidências

  Os campos obrigatórios dos formulários devem estar devidamente identificados como tal. Idealmente, devem apresentar o texto “Obrigatório” à frente da legenda do campo. Pode-se colocar um * no campo obrigatório, desde que o significado do * seja mencionado no início do formulário.

  No formulários das páginas Registar Associação e Alterar Dados não existe informação sobre o significado do asterisco nos campos.

  

  Figura 1 - Formulário da página Alterar Dados.

  

  Figura 2 - Formulário da página Registar Associação.

  Recomendações

  Recomendamos a revisão dos formulários por forma a adicionarem uma legenda no início do formulário que indique claramente o significado de *. Por exemplo, “* Campos de preenchimento obrigatório”.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #14 Ausência de feedback de progresso durante submissão de formulário

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

  Evidências

  No processo de registo de associação (submissão de formulário), após o utilizador submeter os dados, o sistema apresenta um estado de carregamento (loader), sem qualquer indicação adicional sobre o progresso da operação ou tempo estimado de espera.

  Durante este estado:

  • não é apresentada qualquer mensagem textual ao utilizador;
  • não existe indicação de progresso ou fase do processo;
  • o estado de carregamento mantém-se indefinidamente;
  • não existe feedback sobre se a ação foi bem-sucedida, falhou ou ainda está em processamento.

  Como consequência, o utilizador não consegue perceber se a submissão está em curso ou bloqueada.

  

  Figura 1 - Estado de carregamento apresentado após submissão do formulário de registo de associação, sem indicação de progresso ou tempo de espera

  Notas Gerais

  Em ações que possam demorar tempo significativo, o sistema deve fornecer feedback claro e contínuo sobre o estado da operação.

  Indicadores apenas visuais (como animações de loading) não são suficientes por si só, especialmente quando não acompanhados de texto ou mensagens acessíveis.

  O utilizador deve ser informado sobre:

  o estado atual da operação;
  se a ação está em processamento;
  se existe tempo estimado de espera (quando possível).

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/registar-associacao

  Recomendações

  • Adicionar mensagens textuais de estado durante o processamento do formulário (ex.: “A submeter pedido…”, “A processar informação…”).
  • Garantir que o estado de loading não é indefinido sem feedback adicional.
  • Associar o estado de carregamento a tecnologias de apoio (ex.: aria-live="polite" ou role="status").
  • Evitar dependência exclusiva de animações visuais para comunicar estados do sistema.
  • Garantir que o utilizador compreende claramente que a ação está em curso.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #23 Feedback após submissão não acessível

  etiqueta: R 3.2etiqueta: chk transaçãoetiqueta: NOK

  Evidências

  Após submissão do formulário:

  • A mensagem de feedback não é anunciada por leitores de ecrã
  • Não existe uso de aria-live, role="alert" ou role="status"
  • O foco não é movido para a mensagem
  • A mensagem não é alcançável por navegação por teclado
  • O utilizador pode permanecer no formulário sem perceber que a ação foi concluída

  Este comportamento compromete a compreensão do estado da interface.

  

  Figura 1 – Mensagem de feedback não anunciada nem acessível por teclado

  Notas Gerais

  • Sempre que o utilizador realiza uma ação (ex.: submissão de um formulário), o sistema deve fornecer um retorno claro e imediato sobre o resultado dessa ação. Esse feedback deve ser perceptível visualmente e também programaticamente acessível, garantindo que utilizadores de tecnologias de apoio são informados da alteração de estado.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/alterar-dados

  Recomendações

  • Garantir que todas as ações apresentam feedback claro e acessível
  • Utilizar aria-live="polite" ou role="status" para mensagens dinâmicas
  • Mover o foco para a mensagem de sucesso/erro após submissão
  • Assegurar que o feedback é navegável por teclado
  • Garantir que mensagens são visíveis e persistentes
  • Validar com leitores de ecrã e navegação por teclado

• evidência: issue #16 Ausência de mensagem de confirmação após submissão bem-sucedida de formulário

  etiqueta: R 3.2etiqueta: chk transaçãoetiqueta: NOK

  Evidências

  Após a submissão do formulário de registo de associação, o sistema permanece no estado de carregamento indefinido (loader), sem apresentar qualquer mensagem visual de sucesso ao utilizador.

  Embora seja indicado que a informação pode ser atualizada para leitores de ecrã, não existe uma confirmação visível e percetível na interface.

  O utilizador não recebe:

  • mensagem de sucesso;
  • confirmação de submissão;
  • indicação de conclusão do processo.

  Como consequência:

  • não é possível confirmar visualmente se a operação foi concluída com sucesso;
  • o estado final da ação permanece ambíguo;
  • a experiência depende exclusivamente de feedback não visual.

  

  Figura 2 - Estado de carregamento após submissão do formulário, sem mensagem de confirmação de sucesso visível ao utilizador

  Notas Gerais

  Após a conclusão de uma transação ou submissão de formulário, o sistema deve fornecer uma confirmação clara e acessível do sucesso da operação.

  Essa confirmação deve ser:

  • visível na interface;
  • consistente para todos os utilizadores;
  • complementar ao feedback fornecido por tecnologias de apoio.

  A ausência de mensagem de sucesso cria incerteza quanto ao resultado da ação e afeta a confiança na interação.

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/registar-associacao

  Recomendações

  • Implementar mensagem de sucesso visível após submissão do formulário.
  • Garantir que a mensagem é clara.
  • Remover estado de loading quando a operação termina.
  • Garantir consistência entre feedback visual e feedback acessível.
  • Validar que a confirmação é percebida tanto visualmente como por leitores de ecrã.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #77 Existem formulários com ações destrutivas sem mensagem de confirmação de realização dessas ações

  etiqueta: R 4.2etiqueta: chk transaçãoetiqueta: NOK

  Evidências

  Ao eliminar uma associação (formulário da página Alterar Dados -> opção “Remover Associação do diretório”), não é apresentada uma mensagem a pedir a confirmação do utilizador e a indicar que a ação não poderá ser anulada.

  Recomendações

  Sendo a ação de eliminação uma ação destrutiva, recomendamos que, aquando da submissão do formulário, seja apresentada uma mensagem a pedir a confirmação do utilizador e a indicar que a ação não poderá ser anulada.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #71 Existem mensagens de erro não associadas programaticamente aos campos

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

  Evidências

  A mensagem de erro “Campo de preenchimento obrigatório” na vizinhança dos botões de rádio do agrupamento “Tipo Associação”, presente no formulário da página Registar Associação, não está associada programaticamente aos botões de rádio a que diz respeito:

  

  Mensagem de erro não associada programaticamente aos botões de rádio

  Recomendações

  Recomendamos que a mensagem de erro seja associada aos dois botões de rádio, para que os utilizadores que navegam por teclado (tab e shift+tab) e leitor de ecrã possam ouvi-la à medida que o foco passa pelos campos.
  A associação programática de uma mensagem de erro a um campo pode fazer-se adicionando dois atributos a esse campo:

  • Um atributo aria-invalid com o valor “true”, que indica que o campo não está num estado válido;
  • Um atributo aria-describedby com o id do elemento que contém a mensagem de erro. Em alternativa ao atributo aria-describedby pode ser utilizado um atributo aria-errormessage, também preenchido da mesma forma, com o id do elemento que contém a mensagem de erro.

  A diferença entre os dois atributos é que o atributo aria-errormessage foi desenhado mais recentemente e pode ainda não ser suportado por todas as tecnologias, e tem o propósito específico de fazer a associação programática entre um campo e a respetiva mensagem de erro, enquanto que o atributo aria-describedby é mais antigo e mais genérico, servindo em particular para fazer esta associação programática.

• evidência: issue #70 Existem campos sem mensagens de erro na sua vizinhança

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

  Evidências

  Os campos “NIF/NIPC do requerente”, “Nome do requerente” e “Email do requerente”, presentes no formulário Alterar Dados -> opção “Remover Associação do diretório”, não apresentam mensagens de erro na sua vizinhança:

  

  Campos sem mensagens de erro na sua vizinhança

  Recomendações

  Recomendamos que sejam apresentadas mensagens de erro junto aos campos de todos os formulários, para assim forenecerem apoio na correção dos mesmos e consequente submissão correta dos formulários.
  Recomendamos ainda que as mensagens de erro sejam associadas programaticamente aos campos, para que os utilizadores que navegam por teclado (tab e shift+tab) e leitor de ecrã possam ouvi-la à medida que o foco passa pelos mesmos.
  A associação programática de uma mensagem de erro a um campo pode fazer-se adicionando dois atributos a esse campo:

  • Um atributo aria-invalid com o valor “true”, que indica que o campo não está num estado válido;
  • Um atributo aria-describedby com o id do elemento que contém a mensagem de erro. Em alternativa ao atributo aria-describedby pode ser utilizado um atributo aria-errormessage, também preenchido da mesma forma, com o id do elemento que contém a mensagem de erro.

  A diferença entre os dois atributos é que o atributo aria-errormessage foi desenhado mais recentemente e pode ainda não ser suportado por todas as tecnologias, e tem o propósito específico de fazer a associação programática entre um campo e a respetiva mensagem de erro, enquanto que o atributo aria-describedby é mais antigo e mais genérico, servindo em particular para fazer esta associação programática.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #64 Existem mensagens de erro que não ajudam na resolução do problema

  etiqueta: R 4.4etiqueta: chk transaçãoetiqueta: NOK

  Evidências

  A mensagem de erro “Por favor, introduza um endereço eletrónico válido.” presente no formulário da página Registar Associação não ajuda no preenchimento do campo:

  

  _ Mensagem de erro que não guia o utilizador na resolução do erro_
  Como observado na figura, a mensagem “Por favor, introduza um endereço eletrónico válido.” que é apresentada quando o campo foi preenchido com um formato incorreto não indica qual o formato a ser inserido, não ajudando a preencher o campo.

  Recomendações

  Recomendamos rever todos os formulários do website para garantir que as mensagens de erro apresentadas expliquem para o utilizador como preencher os campos corretamente.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #83 Outras violações - Inconsistência entre layout e navegação por teclado

  etiqueta: melhoriaetiqueta: outras violações

  Verificámos que, no formulário Registar Associação, a ordem visual dos campos não corresponde à ordem de tabulação atualmente implementada.

  Quando o utilizador seleciona a opção “Sim” nos campos “Tem estatuto Utilidade Pública Regional” ou “Tem estatuto Utilidade Pública Nacional”, são apresentados, por revelação progressiva, dois campos adicionais em cada caso. A ordem de foco, navegando por Tab e Shift+Tab, é a seguinte:
  • “Tem estatuto Utilidade Pública Regional”
  • “Indicar diploma de atribuição de Utilidade Pública Regional”
  • “Link para o diploma”
  • “Tem estatuto Utilidade Pública Nacional”
  • “Indicar diploma de atribuição de Utilidade Pública Nacional”
  • “Link para o diploma”

  Embora esta ordem esteja correta do ponto de vista da navegação por teclado, a disposição visual não segue a ordem natural de leitura (da esquerda para a direita, de cima para baixo), o que pode comprometer a coerência entre o que o utilizador vê e a forma como navega.

  Recomendamos, por isso, a reorganização visual dos campos, de modo a alinhar o layout com a ordem de tabulação já existente.

  

  Figura - Ordem de tabulação no formulário da página Registar Associação.

• evidência: issue #82 Outras violações - Foco não está visível na navegação por teclado e leitor de ecrã

  etiqueta: melhoriaetiqueta: outras violações

  Evidências

  Descrição da problemática

  Ao navegar pelo website utilizando apenas o teclado, 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, há algumas componentes que não são circunscritas pelo foco por exemplo durante a navegação por teclado nos cards das Associações da página Lista de Associações (Figura 1)

  

  Figura 1 – Exemplo de ausência de foco visível na navegação por teclado

  

  Figura 2 - Exemplo de foco escondido por trás dos cards e não circunscreve corretamente a componente

  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. Sendo assim não é possível identificar visualmente a posição do utilizador em cada momento da navegação. Esta situação pode levar o utilizador a perder a noção da sua posição na página, comprometendo a usabilidade e a acessibilidade do website.

  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á:

  • Ser claramente percetível visualmente (ex.: contorno, sublinhado ou mudança de cor);
  • Manter contraste adequado em relação ao fundo;
  • Não ser removido através de regras CSS como outline: none sem alternativa equivalente;
  • Acompanhar corretamente a ordem lógica da navegação por teclado.

  Esta melhoria é essencial para assegurar uma navegação acessível a utilizadores com deficiência visual, motora ou cognitiva

• evidência: issue #81 Outras violações - Redundância no botão “Saiba mais” prejudica experiência com leitores de ecrã

  etiqueta: melhoriaetiqueta: outras violações

  Evidências

  Descrição da problemática

  Ao navegar pela página Lista de Associações - Desporto, botão “Saiba mais” apresenta um atributo title redundante que replica o conteúdo do título do card, gerando ruído na leitura por tecnologias de apoio e comprometendo a experiência de utilizadores de leitores de ecrã. (Figura 1 e 2)

  

  Figura 1 – Redundância e repetição de título no botão “Saiba mais”

  

  Figura 2 - Title mal atribuído pode causar ruído na experiência com tecnologias de apoio

  • Título do card: ACRE - Associação Cultural e Recreativa do Estreito de Câmara de Lobos
  • Texto alternativo do botão: title="ACRE - Associação Cultural e Recreativa do Estreito de Câmara de Lobos - Saiba mais"
  • Nome do botão: "Saiba mais"

  Outros exemplos:
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTM=
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTE=
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTQ=
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTU=
  https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes?Y2F0PTY=

  Recomendações

  Recomenda-se a remoção do atributo title ou a sua simplificação, garantindo que o nome acessível do botão seja claro e não redundante. Em alternativa, deve assegurar-se que o contexto já fornecido pelo título do card é corretamente associado ao botão sem duplicação de informação.

• evidência: issue #80 Outras violações - Link de saltar para conteúdo principal

  etiqueta: outras violações

  Verifica-se que o website possui o link “Ir para conteúdo”, cuja finalidade é permitir aos utilizadores contornar blocos repetitivos de navegação e aceder diretamente à área principal do conteúdo.

  No entanto, este link apresenta problemas:

  • Não é apresentado de forma visível quando está em foco.
  • Quando selecionamos o link com o leitor de ecrã, está sendo direcionado para o h1 ao invés do conteúdo principal main.

  

  Recomendações

  • O link deve ser visualmente perceptível, apresentando-se como um elemento interativo (link ou botão). Devem garantir que o contraste esteja acima do recomendado.
  • Idealmente ele deveria estar sempre visível no ecrã, no entanto, pode ser visível apenas quando recebe foco por teclado ou leitor de ecrã.
  • Estruturalmente deve ser posicionado no início da página como o primeiro elemento interativo.
  • O atributo href do link deve conter o id do respectivo main da página.

• evidência: issue #79 Outras violações - Campo de localização no mapa inacessível

  etiqueta: melhoriaetiqueta: outras violações

  O campo “Indique a sua localização no mapa”, presente na página Registar Associação, não é acessível para pessoas que utilizam leitores de ecrã. Atualmente, não é possível selecionar a localização da Associação através do leitor de ecrã neste componente do mapa.

  Tendo em conta que os campos “Morada”, “Código Postal”, “Concelho” e “Freguesia” já se encontram disponíveis no formulário e fornecem informação suficiente para identificar a localização da Associação, deixamos aqui o questionamento se consideram realmente necessário o campo “Indique a sua localização no mapa” estar incluído no formulário.

  

  Figura - Campo "Indique a sua localização no mapa" no formulário da página Registar Associação.

• evidência: issue #78 Outras violações - Campo de localização no mapa inacessível

  etiqueta: melhoriaetiqueta: outras violações

  O campo “Indique a sua localização no mapa”, presente na página Registar Associação, não é acessível para pessoas que utilizam leitores de ecrã. Atualmente, não é possível selecionar a localização da Associação através do leitor de ecrã neste componente do mapa.

  Tendo em conta que os campos “Morada”, “Código Postal”, “Concelho” e “Freguesia” já se encontram disponíveis no formulário e fornecem informação suficiente para identificar a localização da Associação, deixamos aqui o questionamento se consideram realmente necessário o campo “Indique a sua localização no mapa” estar incluído no formulário.

  

  Figura - Campo "Indique a sua localização no mapa" no formulário da página Registar Associação.

• evidência: issue #76 Outras violações - Mal funcionamento do filtro de pesquisa

  etiqueta: melhoriaetiqueta: outras violações

  Na página Lista de Associações, verifica‑se que o campo de seleção “Sub‑áreas de atuação” apresenta um erro de funcionamento:

  • O campo está visível, porém não permite interação com o rato nem com o teclado:

  

  • Com o leitor de ecrã, embora o campo seja anunciado, nenhuma opção é disponibilizada para seleção:

  

  • Em nenhum momento o campo fica ativo ou operacional para permitir a escolha de uma sub‑área.

  Recomendação

  • Analisar a viabilidade do campo, uma vez que, se em nenhum momento ele está ativo, não faz sentido apresentá‑lo aos utilizadores.
  • Rever o funcionamento do filtro caso o campo tenha, de facto, uma função, garantindo que seja totalmente acessível através do rato, teclado e leitores de ecrã.

• evidência: issue #74 Outras violações - Existem PDFs vazios

  etiqueta: melhoriaetiqueta: outras violações

  Na página Associação Desportiva Recreativa e Cultural "Os Xavelhas" está sendo apresentado o ficheiro PDF Doc08 cujo conteúdo está vazio:

  

  Recomendações

  • Analisarem a possibilidade de remover o ficheiro ou substitui-lo para um ficheiro que tenha conteúdo.

• evidência: issue #72 Outras violações - Existem secções que não está sendo apresentado conteúdos

  etiqueta: melhoriaetiqueta: outras violações

  Verifica‑se que, nas informações de cada associação, existem secções que não apresentam conteúdos e essa ausência não é comunicada ao utilizador. Por exemplo, na associação “Academia de Línguas da Madeira”, a secção “História” não possui conteúdos e apresenta a mensagem “Sem resultados”:

  

  Já na secção “Galeria” encontra‑se igualmente em branco, porém não apresenta qualquer mensagem, não sendo claro para o utilizador se deveria existir informação naquele local ou se a secção está vazia por outro motivo. Esta inconsistência compromete a perceção e a compreensão da estrutura do conteúdo:

  

  URL a verificar

  • https://associativismo.cm-camaradelobos.pt/menu/lista-associacoes (devem rever as informações que estão apresentadas dentro de cada associação)

  Recomendação

  • Nas secções em que não há conteúdos, devem incluir uma informação textual de que ali não existem mais informações. Como já é feito em algumas situações.