Relatório Avaliação de Candidatura
Urbanismo de Câmara de Lobos

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #43 O menu principal não está estruturado como uma lista

  etiqueta: chk 10 webetiqueta: R 1.1etiqueta: NOK

  Evidências

  Embora o menu principal esteja corretamente estruturado em HTML com as tags ul e li, estão a ser utilizados os atributos role="menubar", role="menuitem" e aria-haspopup="true". Esta configuração altera a semântica nativa da lista, fazendo com que os leitores de ecrã deixem de identificar as opções como uma lista, passando a tratá‑las como um componente de menu de aplicação:

  

  Leitor de ecrã anuncia "grupo" ao invés de informar que é o início de uma lista

  

  Leitor de ecrã anuncia "barra de menu" ao invés de informar que é o início de uma lista

  

  Leitor de ecrã anuncia "comando" que é informado para menus de aplicação. O menu do website é um menu de navegação e não de aplicação

  URL a verificar

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

  Recomendações

  • Remover os atributos role="menubar", role="menuitem" e aria-haspopup="true" do menu principal.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: R 1.2etiqueta: chk 10 webetiqueta: NOK

  Evidências

  Verifica-se que não está a ser utilizado a tag nav no menu. Ao utilizar o leitor de ecrã, não é possível realizar saltos diretamente para o menu, nem este é identificado como uma área de navegação:

  

  Menu desktop não está definido como navegação

  

  Menu mobile não está definido como navegação

  URL

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

  Recomendações

  • Verificar o menu mobile e desktop.
  • O menu deve ser estruturado dentro de uma tag nav.

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

  etiqueta: R 1.2etiqueta: chk 10 webetiqueta: NOK

  Evidências

  Quando abrimos ou fechamos o menu com o leitor de ecrã não é informado se o botão está expandido (aberto) ou colapsado (fechado):

  

  URL

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

  Recomendações

  • O estado do botão menu deve ser informado através do atributo aria-expanded.
  • Recomendamos efetuarem a correção também da issue #58.

• evidência: issue #57 Não é possível navegar para a opção seguinte do menu sem percorrer as subopções

  etiqueta: R 1.2etiqueta: chk 10 webetiqueta: melhoria

  Evidências

  Quando navegamos com o leitor de ecrã e teclado as opções do menu abrem automaticamente quando estão com foco, forçando o utilizador a navegar por todas as subopções antes de encontrar a opção desejada:

  

  URL

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

  Recomendações

  As opções do menu devem abrir ou fechar de acordo com a ação do utilizador. Para isso, é necessário utilizar um script que gerencie o estado do menu em conjunto com o atributo aria-expanded.

• evidência: issue #45 As opções do menu não apresentam uma indicação visual de que contêm subopções

  etiqueta: R 1.2etiqueta: chk 10 webetiqueta: NOK

  Evidências

  O menu principal contém subopções; contudo, isso não é perceptível para o utilizador, pois não existe qualquer indicador visual que indique que a opção contém subopções:

  

  URL a verificar

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

  Recomendações

  • Incluir uma sinalética visual, como por exemplo, uma seta ▾ para indicar que existem subopções.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #58 O menu principal possui texto alternativo incorreto

  etiqueta: chk 10 webetiqueta: R 1.3etiqueta: NOK

  Evidências

  O botão de abrir e fechar o menu estão com o mesmo texto alternativo "Open mobile menu". Para além disso o nome acessível está a ser transmitido no idioma diferente do website:

  

  URL

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

  Recomendações

  • O texto alternativo deve ser o mesmo idioma da página.
  • O nome acessível deve indicar corretamente o significado do ícone. Quando o menu estiver aberto o ícone (x) deve ter texto alternativo "Fechar menu".

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: R 2.1etiqueta: chk 10 webetiqueta: NOK

  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.

  Actualmente, todas as páginas apresentam o mesmo <h1> ("Urbanismo de 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.

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

  

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

  

  Figura 3 - 2 cabeçalhos iguais, estando o segundo partido em 2 tags diferentes .

  URLs a verificar:

  https://urbanismo.cm-camaradelobos.pt/
  https://urbanismo.cm-camaradelobos.pt/acessibilidade

  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.
  • Na página da Declaração de Acessibilidade, o título genérico "Urbanismo de Câmara de Lobos" deve ser removido.
  • Na homepage, não partir o título em h2 e h3 apenas para reduzir o tamanho do texto, usar font-size para alterar o tamanho e devem manter tudo no mesmo cabeçalho.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #28 Existem títulos que não estão estruturados como cabeçalhos e títulos aplicados de forma inapropriada

  etiqueta: chk 10 webetiqueta: R 2.2etiqueta: NOK

  Evidências

  Foram identificados elementos que funcionam como títulos de secção, mas que se encontram marcados apenas com elementos <p> ou <div> , em vez de cabeçalhos apropriados.

  Na página de "Notícias e destaques", o título de cada notícia está marcado com o mesmo nível de cabeçalho que o título da secção "Notícias e destaques", não respeitando a hierarquia de títulos da página.

  

  Figura 1 - Título de cada notícia marcado incorretamente com <h2> .

  

  Figura 2 - O subtítulo "Plano de Recuperação e Resiliência (PRR)" marcado com <p> .

  

  Figura 3 - "Requerimentos, Licenças e Certidões" incorretamente marcado como <div> .

  

  Figura 4 - "PDM Plano Diretor Municipal" incorretamente marcado como <div> .

  

  Figura 5 - "IMI Imposto Municipal sobre os Imóvies" incorretamente marcado como <div> .

  

  Figura 6 - "REABILITAÇÃO URBANA" incorretamente marcado como <div> .

  

  Figura 7 - "Viver em Câmara de Lobos" incorretamente marcado como <div> .

  URLs a verificar:

  https://urbanismo.cm-camaradelobos.pt/
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques
  https://urbanismo.cm-camaradelobos.pt/programa-1-direito

  Recomendações

  • Na página de "Notícias e destaques" alterar o cabeçalho de cada notícia para h3, de forma a respeitar a hierarquia da página.
  • Na página de "Programa 1.º Direito - Plano de Recuperação e Resiliência (PRR)", alterar o subtítulo "Plano de Recuperação e Resiliência (PRR)" para cabeçalho (h3).
  • Na homepage, alterar os título "Requerimentos, Licenças e Certidões", "PDM Plano Diretor Municipal", "IMI Imposto Municipal sobre os Imóvies" , "REABILITAÇÃO URBANA" e "Viver em Câmara de Lobos" para cabeçalho (h2) em vez de divs.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

  Evidências

  A textbox e a combobox do formulário da página Requerimentos Online não tem etiquetas associadas:

  

  Campos sem etiquetas associadas

  A textbox e a combobox do formulário não têm etiquetas. Já as checkboxes têm etiquetas na vizinhança, mas não existe associação programática entre cada checkbox e cada etiqueta, pelo que os leitores de ecrã não anunciam a associação entre as mesmas quando é efetuada a navegação com o teclado.

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

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

  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.
  Para além disso, estas comboboxes personalizadas não foram pensadas para funcionarem na versão mobile, porquanto não é possível usar o rato ou o toque para selecionar as suas opções nessa modalidade.

  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, nem a validação da acessibilidade destes controlos na versão mobile (rato e toque).

• evidência: issue #63 Existem textos de etiquetas que não estão visíveis no ecrã

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

  Evidências

  A caixa de texto do formulário de Pesquisa tem uma etiqueta associada, mas o texto dessa etiqueta está oculto para todos os agentes:

  

  Campo de pesquisa com texto da etiqueta oculto
  Como se pode observar na figura, o texto da etiqueta do campo de pesquisa está num elemento label, ao qual é aplicada uma regra CSS que contém a propriedade “display: none”.
  Portanto, do ponto de vista de todos os utilizadores, é como se o campo de pesquisa não tivesse o elemento label associado.
  Quando cada campo tem uma etiqueta com texto visível e associada programaticamente a esse campo, é 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.
  Para além disso, quando se realiza a navegação por teclado (tab e shift+tab), os leitores de ecrã anunciam a legenda que está associada a cada campo, o que não acontece neste exemplo de forma consistente.

  Acresce ainda que o campo de pesquisa está rodeado por um elemento fieldset que tem um elemento legend com o texto “Search Form” que está visível apenas para os leitores de ecrã.
  O elemento fieldset não foi aplicado corretamente neste caso, pois o mesmo só deve ser aplicado em situações em que existem vários campos agregados ao mesmo conceito (por exemplo, uma morada que contenha vários campos para preenchimento, uma pergunta que necessite de uma resposta de entre várias disponíveis ou em que seja possível selecionar várias respostas, etc.).

  Recomendações

  Recomendamos a revisão dos formulários para garantir que a cada campo está associada uma etiqueta, e os textos de todas as etiquetas estejam visíveis no ecrã.
  Recomendamos ainda a remoção do elemento fieldset que está a envolver o campo de pesquisa do formulário em estudo, e consequente remoção do elemento legend que está encaixado nesse fieldset.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #68 Não é possível identificar campos obrigatórios nos formulários em PDF

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.2

  Evidências

  Verificámos que, nos formulários PDF da página Requerimentos Online, não é possível reconhecer os campos de preenchimento obrigatório. Esta informação não é passada quer visualmente quer para os leitores de ecrã.

  

  Figura - Análise do formulário PDF "REQUERIMENTO DE SUBSTITUIÇÃO DE TÉCNICO RESPONSÁVEL PELA OBRA" disponível na página Requerimentos Online.

  Recomendações

  Uma solução mais acessível seria disponibilizar os formulários diretamente no site, em vez de em formato PDF. Nos formulários web, os campos obrigatórios devem incluir o atributo required para serem identificados pelas tecnologias de apoio como obrigatórios.

  Adicionalmente, deve também ser apresentada uma indicação visual clara junto ao rótulo — por exemplo, “(Campo obrigatório)” — para que todos os utilizadores consigam identificar facilmente os campos que têm obrigatoriamente de preencher.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #77 Inexistência de formulários que precisem de apresentar mensagens de erro

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

  Evidências

  Não encontrámos formulários que precisem de apresentar mensagens de erro, pelo que o requisito não se aplica.

  Recomendações

  No response

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #83 Uso de caracteres especiais no texto alternativo

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.1

  Evidências

  Verificado que os nomes alternativos das imagens incluem caracteres especiais (como _), que estão a ser lidos pelo leitor de ecrã como "sublinhado".
  Para imagens não decorativas, é recomendado que o equivalente alternativo seja apresentado em linguagem natural, sem identificadores técnicos ou caracteres desnecessários.
  Um exemplo de descrição, seria: alt="Empreendimentos Habitacionais do Limoeiro".

  

  URL:
  https://urbanismo.cm-camaradelobos.pt/

  Recomendações

  As imagens não decorativas 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.

• evidência: issue #17 Imagem não decorativa com texto alternativo incorreto

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.1

  Evidências

  Verifica-se que a imagem dos logótipos de cofinanciamento apresenta texto alternativo (alt), no entanto a descrição fornecida é genérica e insuficiente, não permitindo identificar quais os logótipos efetivamente representados. Nesse caso o alt deve descrever corretamente a imagem apresentada, por exemplo: alt="Madeira 14-20, Região autónoma da Madeira, Portugal 2030 e União Europeia"

  

  ---

  Verifica-se que as imagens da galeria não apresentam um texto alternativo adequado no atributo alt. A descrição atualmente utilizada é genérica, repetitiva e não distingue corretamente o conteúdo específico de cada fotografia apresentada.

  

  URL:
  https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/parque-desportivo-da-cidade-de-camara-de-lobos
  https://urbanismo.cm-camaradelobos.pt/programa-1-direito

  Recomendações

  • As imagens não decorativas deverão ter uma descrição breve associada, nomeadamente através do uso do atributo descrevendo corretamente a imagem apresentada.

• evidência: issue #16 Imagens decorativa com texto alternativo indevido

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.1

  Evidências

  Verifica-se que o leitor de ecrã anuncia o banner da página inicial como imagem, apesar de este funcionar apenas como elemento visual decorativo. Neste contexto, o banner não acrescenta informação essencial distinta da que já se encontra disponível no conteúdo textual da página, pelo que não deve ser exposto autonomamente às tecnologias de apoio.

  

  ---

  Verifica-se que algumas imagens funcionam apenas como apoio visual, encontrando-se a informação relevante já disponibilizada através de título, descrição e links acessíveis em texto. Nestes casos, as imagens podem ser tratadas como decorativas, devendo possuir alt="".

  

  URL:

  https://urbanismo.cm-camaradelobos.pt/
  https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/aru-area-de-reabilitacao-urbana
  https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/oru-operacao-de-reabilitacao-urbana
  https://urbanismo.cm-camaradelobos.pt/pdm-plano-diretor-municipal/elementos-do-pdm/o-plano-diretor-municipal
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques?Y2F0PTE0=

  Recomendações

  • Recomenda-se que as imagens decorativas tenham alt="".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #18 Gráfico não é acompanhado de uma descrição longa

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.2

  Evidências

  Verifica-se que algumas imagens com conteúdo visual complexo, não dispõem de uma descrição complementar associada através de aria-describedby, apesar de conterem informação textual associado ao conteúdo o texto não apresenta todas as informações relevantes contidas na imagem.
  Apesar de existir um link para consulta de mais informações, verificou-se que este não encaminha para o conteúdo especificamente relacionado com a informação apresentada na imagem. Em vez disso, o utilizador é redirecionado para a página inicial da Câmara de Lobos, o que compromete a correspondência entre o elemento visual e o destino disponibilizado.

  

  URL:
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imt-imposto-municipal-sobre-transmissoes-onerosas-de-imoveis

  Recomendações

  • Recomenda-se disponibilizar o link correto e diretamente relacionado com o conteúdo apresentado na imagem, garantindo que o utilizador consegue aceder e ler o conteúdo correspondente de forma acessível.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.3

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

  

  Validado que a imagem link da Revista Viver Câmara de Lobos, 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. Também foi verificado que a imagem link não apresenta um texto alternativo suficiente que descreva a finalidade do link. por exemplo alt="Revista Viver Câmara de Lobos (abre num novo separador)"

  

  URL:
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos

  Recomendações

  • O texto alternativo deve transmitir claramente o destino ou finalidade do link. Por exemplo: alt="Urbanismo Câmara de Lobos – página inicial".

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 6.1

  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 WAVE revela problemas relacionados com insuficiência de contraste, afetando diretamente a legibilidade.

  O website apresenta problemas de contraste na página Documentos, nos textos das datas em diferentes categorias por exemplo do “Programa 1.º Direito/Plano de Recuperação e Resiliência (PRR)” e “Carta de Condicionantes” pois utilizam uma a combinação de cores #888888(cor de primeiro plano) e #FFFFFF(cor de plano de fundo) não passam na avaliação de contraste, pois os textos tornam-se pouco visíveis no ecrã. (Figura 1 e 2)

  

  Figura 1- Datas de publicação dos documentos na seleção do filtro “Categoria” com contraste inferior ao recomendado

  

  Figura 2- Datas de publicação dos documentos na seleção do filtro “Subcategoria” com contraste inferior ao recomendado

  Recomendações

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

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #32 Não foram encontrados players no website.

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

  Evidências

  Não foram encontrados players no website, tornando este critério não aplicável.

  Recomendações

  No response

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #33 Não foram encontrados players no website.

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

  Evidências

  Não foram encontrados players no website, tornando este critério não aplicável.

  Recomendações

  No response

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #84 Botão sem função na versão móvel

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

  Evidências

  Na versão móvel foi identificado um botão apresentado na interface através de um ícone gráfico, sem texto visível e sem nome acessível associado.

  Adicionalmente, o controlo surge exposto no interface sem que a sua finalidade seja claramente percetível para o utilizador.

  Como consequência, o utilizador pode não conseguir identificar a função do controlo nem distinguir a sua utilidade face aos restantes elementos de navegação.

  

  Figura 1 – Botão exposto na interface sem função claramente identificável

  Notas Gerais

  • Elementos interativos expostos na interface devem apresentar uma função claramente identificável, tanto visualmente como para tecnologias de apoio.
  • A presença de controlos sem finalidade clara pode dificultar a compreensão da interface e a navegação.

  URL a verificar

  • https://urbanismo.cm-camaradelobos.pt/
  • (todo website)

  Recomendações

  • Garantir que o controlo apresenta uma função clara e identificável.
  • Se o elemento tiver uma função válida, deve possuir:
    • nome acessível;
    • indicação clara da ação que executa.
  • Se o controlo não tiver utilidade efetiva para o utilizador naquele contexto, recomenda-se que não seja exposto na interface.
  • Validar com navegação por teclado e leitor de ecrã para confirmar que o controlo é compreensível e distinguível.

• evidência: issue #70 Lista de formulários sem estrutura semântica adequada

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

  Evidências

  Na listagem de formulários observada, os conteúdos são estruturados maioritariamente através de elementos <div>, sem utilização de elementos semânticos apropriados para representar listas de conteúdos relacionados.

  Cada formulário apresentado constitui um item de uma listagem de serviços/documentos, mas não existe utilização de <ul>/<ol>,<li> ou outra estrutura semântica equivalente.

  Quando a CSS é removida, deixa de ser possível reconhecer visualmente e semanticamente:

  • que os conteúdos correspondem a uma lista de formulários;
  • a separação clara entre cada item;
  • a relação estrutural entre os diferentes blocos de informação e respetivas ações.

  Como consequência, utilizadores e tecnologias de apoio podem ter maior dificuldade em compreender a organização e hierarquia dos conteúdos apresentados.

  

  Figura 1 – Listagem de formulários construída apenas com <div>, sem semântica estrutural adequada

  Notas Gerais

  • Conteúdos organizados sob a forma de conjuntos repetitivos, como listas de serviços, formulários ou documentos, devem utilizar elementos HTML semanticamente apropriados.
  • A utilização exclusiva de <div> para estruturar conteúdos compromete a perceção semântica da página quando o CSS é removido, dificultando:
    • a identificação de listas;
    • a compreensão da hierarquia dos conteúdos;
    • a interpretação correta por tecnologias de apoio.

  Recomendações

  • Estruturar a listagem de formulários utilizando elementos semânticos apropriados:
    • <ul> ou <ol> para a lista;
    • <li> para cada formulário.
  • Garantir que a organização dos conteúdos permanece compreensível quando o CSS é removido.
  • Utilizar elementos HTML adequados ao tipo de conteúdo apresentado, evitando utilização excessiva de <div> para funções estruturais.
  • Validar a página sem CSS para confirmar que:
    • a hierarquia dos conteúdos continua percetível;
    • os agrupamentos de informação permanecem identificáveis;
    • a semântica da página é preservada.

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

  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 eventos 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://urbanismo.cm-camaradelobos.pt/

  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.

etiqueta: N/A

Lista de evidências recolhidas:

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

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

  Evidências

  Não foram identificadas modais no website.

  Recomendações

  N/A

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #35 O foco fica limitado a caixa de diálogo

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

  Evidências

  Não foram identificadas modais no website.

  Recomendações

  N/A

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #36 A caixa de diálogo não pode ser encerrada através de tecnologias de apoio

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

  Evidências

  Não foram identificadas modais neste website.

  Recomendações

  N/A

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #37 Ao fechar a caixa de diálogo o foco retorna ao elemento que o invocou.

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

  Evidências

  Não foram identificadas modais neste website.

  Recomendações

  N/A

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #29 Nos ficheiros PDF não é possível, extrair o conteúdo textual para formato TXT

  etiqueta: chk 10 webetiqueta: R 10.1etiqueta: NOK

  Evidências

  Verifica-se que em alguns ficheiros PDF no website, não é possível extrair o conteúdo textual para formato TXT.

  

  Figura 1 - Primeiro exemplo.

  

  Figura 2 - Segundo exemplo.

  URLs a verificar:

  • https://urbanismo.cm-camaradelobos.pt/programa-1-direito - Link para o PDF

  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imi-imposto-municipal-sobre-os-imoveis - Link para o PDF

  Recomendações

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

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #19 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 diversos termos complexos sem definição agregada. Disponível em: https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/rucl-reabilitacao-urbana-da-cidade-de-camara-de-lobos

  

  Imagem com o termo complexo "RPDMCL" sem definição agregada. Disponível em: https://urbanismo.cm-camaradelobos.pt/pdm-plano-diretor-municipal/patrimonio/construcoes-de-interesse-patrimonial

  Outros Exemplos NOK:

  • RPDMCL: https://urbanismo.cm-camaradelobos.pt/pdm-plano-diretor-municipal/patrimonio/patrimonio-geologico-e-arqueologico
  • PDM, IMT, IMI e IRS: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos
  • CIMI e AT: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imi-imposto-municipal-sobre-os-imoveis
  • PDM: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica

  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 #46 R 2.1 - Conteúdo- O conteúdo do site fica desformatado em resoluções mais pequenas

  etiqueta: R 2.1etiqueta: NOKetiqueta: 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 Notícias e Destaques, verificou‑se que, ao alterar a resolução para um formato mobile, o corpo de texto do conteúdo fica desformatado e com uma dimensão inferior à recomendada. O mesmo acontece nos textos informativos dos contactos no rodapé, comprometendo a legibilidade. (Figura 1, 2 e 3)

  

  Figura 1 - Verificação do texto em dispositivos móveis com texto variável e tamanho de letra de apenas 14px (mínimo recomendado 16px)

  

  Figura 2 - Página ARU possui corpo de texto com dimensão variável das informações primárias (mínimo 16px)

  

  Figura 3 - Texto variável para informações secundárias com tamanho de letra do breadcrumb com apenas 12px inferior ao recomendado (mínimo 13px)

  Outras páginas (NOK) em versões para dispositivos móveis:


  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/transparencia-urbanismo
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica

  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 #44 R 2.1 - Conteúdo- O corpo de texto tem um tamanho inferior a 12pt (equivalente a 16px)

  etiqueta: R 2.1etiqueta: NOKetiqueta: 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 no menu principal, as opções de primeiro nível por exemplo “O Urbanismo”, “O Plano Diretor Municipal”, “Reabilitação e Requalificação”, “Requerimentos, Licenças e Certidões”, “Programa 1.º Direito” e “SIG” estão com tamanho de letra abaixo do valor mínimo recomendado. (Figura 1)

  

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

  Há botões de ação principal com tamanho de texto inferior ao recomendado. Por exemplo o botão “Fale Connosco” na página inicial. (Figura 2)

  

  Figura 2 - Verificação do tamanho de texto em botão no website com apenas 15px

  Na página Transparência Urbanismo há informações úteis em hiperligações que possuem textos com valor inferior ao recomendado.
(Figura 3)


  

  Figura 3- Textos informativos no corpo de texto com apenas 14px

  Outro exemplo:

  • https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/aru-area-de-reabilitacao-urbana - As informações de contactos do rodapé e links do menu inferior com tamanho de letra de apenas 15px
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos Menu lateral com tamanho de letra de apenas 14px

  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 #47 A informação secundária têm um tamanho de letra inferior a 10pt (equivalente a 13px)

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

  Evidências

  Notas Gerais

  • Para garantir a legibilidade da informação secundária, esta deve ter um tamanho de letra igual ou superior a 13px (10pt).

  Durante a análise foram identificadas informações secundárias apresentadas com um tamanho de letra inferior ao mínimo recomendado. Por exemplo, na página O Urbanismo de Câmara de Lobos, os textos do breadcrumb possuem valor de 12px, não cumprem o presente critério. (Figura 1)

  

  Figura 1 - Verificação do tamanho de letra do breadcrumb com valor inferior ao recomendado

  Esta dimensão reduzida compromete a legibilidade e cria barreiras para utilizadores com baixa visão ou que necessitem de ampliar o conteúdo.


  Outras páginas NOK:


  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imt-imposto-municipal-sobre-transmissoes-onerosas-de-imoveis
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/taxas-precos-e-licencas

  Recomendações

  Recomendamos revisar todo website, e aumentar o tamanho de letra das informações secundárias para, no mínimo 10 pontos(13px). Garantindo simultaneamente que a fonte permanece escalável, permitindo ampliação por tecnologias assistivas ou pelo zoom do navegador;

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #48 Existem blocos de textos com mais de 100 caracteres por linha

  etiqueta: R 2.3etiqueta: NOKetiqueta: 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 O IMT - Imposto Municipal sobre Transmissões Onerosas de Imóveis (Figura 1)

  

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

  Outras evidências (NOK)

  • https://urbanismo.cm-camaradelobos.pt/ - Secção “Urbanismo de Câmara de Lobos” 125 caracteres
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/taxas-precos-e-licencas (141 caracteres)
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/transparencia-urbanismo (138 caracteres)
  • https://urbanismo.cm-camaradelobos.pt/programa-1-direito (189 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 #49 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 Documentos, há blocos de textos com espaçamento inferior ao recomendado, por exemplo nos títulos dos documentos com espaçamento de 20px para um tamanho de letra de 20px. (Figura 1)



  

  Figura 1 - Textos com espaçamento inferior ao recomendado

  Outros exemplos de espaçamento incorreto:

  • https://urbanismo.cm-camaradelobos.pt/ - Textos da secção Notícias
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques - Textos das descrições das notícias com 17px para um espaçamento de apenas 20.4px

  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.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #39 Excesso de opções no menu do rodapé

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

  Evidências

  Os menus de navegação devem se manter equilibrado, nem com demasiadas opções de topo sem opções secundárias, nem com poucas opções de topo e muitas opções secundarias. Nenhum nível de navegação deve ter mais de 9 opções, mas neste caso existe um nível no rodapé com 10 opções.

  

  Imagem do menu "Serviços Municipais" com 10 opções no menu do rodapé.

  Recomendações

  Recomenda-se a reorganização destes menus, de forma a reduzir o número de itens apresentados e a estruturar a informação de modo mais claro, simples e intuitivo, promovendo uma melhor experiência de utilização e conformidade com os princípios de acessibilidade.

  Com vista à melhoria da usabilidade e conformidade com os princípios de acessibilidade, recomenda-se:

  • Reduzir o número de opções no subnível, agrupando conteúdos relacionados sob categorias mais abrangentes.

  • Utilizar rótulos claros e consistentes que facilitem a identificação rápida das secções.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 3.3

  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ção na página principal sem identificação visual complementar

  

  Imagem de hiperligações no rodapé com sublinhado apenas em hover.

  Outros casos:

  • Documentos e contactos no header do website;
  • Título das notícias: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques;

  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 #10 Páginas extensas sem índice de navegação interna entre secções

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 4.1

  Evidências

  Ponto 01
  Página: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/taxas-precos-e-licencas

  A página apresenta uma quantidade extensa de conteúdo textual distribuído por várias secções, sem disponibilizar um índice no topo com hiperligações internas para navegação rápida entre os diferentes conteúdos.
  A ausência de um mecanismo de navegação interna dificulta a localização e consulta das diferentes secções da página, especialmente em conteúdos extensos e em dispositivos móveis.

  

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

  Outros exemplos:
  https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/requalificacao-da-baixa-da-cidade
  https://urbanismo.cm-camaradelobos.pt/reabilitacao-e-requalificacao/rucl-reabilitacao-urbana-da-cidade-de-camara-de-lobos

  Recomendações

  Recomenda-se a inclusão de um índice no topo das páginas com conteúdos extensos, contendo hiperligações internas para as diferentes secções e subsecções apresentadas.
  Esta abordagem facilita a navegação e consulta rápida da informação, especialmente em dispositivos móveis e em páginas com elevada quantidade de conteúdo textual.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 4.2

  Evidências

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

  A imagem apresentada no banner inicial, em dispositivos móveis, não é exibida na sua totalidade, ficando parcialmente cortada e visível apenas uma parte do conteúdo.

  Adicionalmente, os botões “Sobre Urbanismo”, “Transparência” e “URB Online” deixam de ser apresentados em alguns dispositivos móveis.

  Estas situações comprometem a perceção da informação visual e o acesso às ações disponíveis no banner, evidenciando uma adaptação inconsistente do conteúdo em ecrãs de menor dimensão.

  

  Figura 01 – Banner inicial com conteúdo visual parcialmente cortado.

  Ponto 02
  Página: https://urbanismo.cm-camaradelobos.pt/

  Em alguns dispositivos móveis, os elementos apresentados na secção “Urbanismo de Câmara de Lobos” apresentam sobreposição parcial de conteúdos (Caixa de texto Fale conosco), comprometendo o alinhamento e a distribuição visual dos componentes.

  Esta situação dificulta a perceção correta da informação apresentada e evidencia uma adaptação inconsistente do layout em ecrãs de menor dimensão.

  

  Figura 02 — Sobreposição parcial de componentes em ecrãs de menor dimensão.

  Ponto 03
  Página: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imi-imposto-municipal-sobre-os-imoveis

  A tabela apresentada na secção “Propostas de Deliberação da Taxa de IMI” não é integralmente apresentada em alguns dispositivos móveis, ficando parte do conteúdo cortado ou inacessível na área visível do ecrã.
  Esta situação compromete a leitura e consulta da informação tabular em ecrãs de menor dimensão, dificultando o acesso ao conteúdo apresentado.

  

  Figura 03 – Tabela parcialmente cortada em dispositivos móveis.

  Ponto 04
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  Em alguns dispositivos móveis, os elementos de título e informação apresentados na secção inicial da página perdem o alinhamento e distribuição visual previstos no layout.
  A adaptação inconsistente dos componentes provoca quebras na organização do conteúdo e compromete a perceção da estrutura visual da página em ecrãs de menor dimensão.

  

  Figura 04 — Quebras de alinhamento e distribuição visual em ecrãs de menor dimensão.

  Ponto 05
  Página: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques

  Em alguns dispositivos móveis, os campos de seleção apresentados nos filtros “Categoria” e “Ano” apresentam sobreposição de conteúdos, fazendo com que o texto “Escolher opção” invada visualmente outras áreas do componente.
  Esta situação compromete a legibilidade e a perceção correta dos elementos do formulário, evidenciando uma adaptação inconsistente do layout em ecrãs de menor dimensão.

  

  Figura 05 — Sobreposição de texto em componentes de seleção em ecrãs de menor dimensão.

  Recomendações

  Recomenda-se a revisão da adaptação responsiva dos componentes e conteúdos do portal, garantindo a correta apresentação visual e funcional dos elementos em diferentes dispositivos e tamanhos de ecrã, sem perdas de informação, sobreposição de conteúdos ou quebras de layout.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.1

  Evidências

  Ponto 01
  Página: https://urbanismo.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 estejam permanentemente visíveis ou acessíveis através de diferentes métodos de interação, garantindo a sua utilização em dispositivos táteis e durante a navegação por teclado.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.2

  Evidências

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

  Os ícones das redes sociais apresentados no topo da página possuem uma área clicável inferior ao tamanho mínimo recomendado de 44×44px para elementos interativos.
  Devido à reduzida dimensão dos controlos, a sua seleção pode tornar-se difícil, sobretudo em dispositivos táteis ou para utilizadores com limitações motoras, afetando a facilidade de interação com o componente.

  

  Figura 01 – Ícones de redes sociais no topo da página com área interativa inferior ao mínimo recomendado

  Outros exemplos:
  https://cm-camaradelobos.pt/participacao/formulario?ref=aGJ3YWczenA=
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imt-imposto-municipal-sobre-transmissoes-onerosas-de-imoveis
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica

  Ponto 02
  Página: https://urbanismo.cm-camaradelobos.pt/

  No banner inicial, em versão móvel, o indicador de navegação do carrossel (“bolinha” de paginação) apresenta uma dimensão inferior ao tamanho mínimo recomendado de 44×44px para elementos interativos, possuindo14px.
  A reduzida dimensão da área interativa dificulta a sua seleção, sobretudo em dispositivos táteis ou para utilizadores com limitações motoras, comprometendo a facilidade de interação com o componente.

  

  Figura 02 – Indicador de navegação do carrossel com área interativa reduzida apresentando 14px.

  Ponto 03
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  A seta do dropdown do seletor “Tipo de serviço” apresenta uma área interativa significativamente inferior ao tamanho mínimo recomendado de 44×44px, possuindo 4×34px.
  A reduzida dimensão da área clicável dificulta a interação com o componente, especialmente em dispositivos táteis ou para utilizadores com limitações motoras.

  

  Figura 03 — Área clicável inferior à dimensão mínima recomendada para interação.

  Outros exemplos:*
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/documentos

  Ponto 04
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  O ícone da lupa apresentado na área de pesquisa possui uma dimensão inferior ao tamanho mínimo recomendado de 44×44px para elementos interativos, apresentando 30px.

  O mesmo comportamento foi identificado nos elementos do tipo checkbox presentes na página, que também apresentam áreas interativas reduzidas.

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

  

  Figura 04 — Área interativa do ícone de pesquisa inferior à dimensão mínima recomendada.

  

  Figura 05 — Elementos checkbox com área clicável inferior à dimensão recomendada.

  Recomendações

  Recomenda-se garantir que os elementos interativos apresentem uma área mínima de interação de 44×44px, facilitando a sua utilização em dispositivos táteis e por utilizadores com limitações motoras.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #5 Hierarquia visual insuficiente entre ações principais e elementos informativos

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.3

  Evidências

  Ponto 01
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  Os elementos apresentados no formulário não possuem uma diferenciação visual consistente entre ações principais, ações secundárias e elementos informativos.

  O botão “Limpar filtros” não apresenta destaque suficiente relativamente aos restantes componentes do formulário. Adicionalmente, a etiqueta “21 serviços disponíveis” utiliza o mesmo padrão visual aplicado a ações principais do portal, semelhante ao botão “Fale connosco” apresentado na página inicial Urbanismo Câmara de Lobos , apesar de não corresponder a uma ação principal do contexto.

  Esta situação compromete a perceção da hierarquia visual das ações disponíveis e pode gerar ambiguidade relativamente à importância e funcionalidade dos elementos apresentados.

  

  Figura 01 — Hierarquia visual inconsistente entre ações principais e elementos informativos.

  Recomendações

  Recomenda-se a definição de estilos visuais consistentes para ações principais, ações secundárias e elementos informativos, garantindo uma hierarquia visual clara entre os diferentes componentes interativos apresentados no portal.
  Os elementos com função meramente informativa não deverão utilizar o mesmo padrão visual associado às ações principais, evitando ambiguidades relativamente à prioridade e funcionalidade dos componentes.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #20 Elementos com aparência interativa sem funcionalidade associada

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.4

  Evidências

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

  No banner inicial, em versão móvel, é apresentado um indicador visual semelhante aos controlos de navegação de carrossel (“bolinhas” de paginação). No entanto, ao selecionar o elemento, não ocorre qualquer ação ou alteração de conteúdo.
  A presença de um componente com aparência interativa, mas sem funcionalidade associada, pode induzir os utilizadores em erro relativamente ao comportamento esperado do elemento.

  

  Figura 01 – Indicador visual semelhante aos controlos de navegação de carrossel apresentado sem funcionalidade associada, podendo induzir os utilizadores em erro relativamente ao comportamento esperado.

  Ponto 02
  Páginas:
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imi-imposto-municipal-sobre-os-imoveis
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/sistema-de-informacao-geografica

  Na Página: IMI – Imposto Municipal sobre os Imóveis os elementos apresentados com ícones de seta lateral aparentam funcionar como componentes interativos ou expansíveis. No entanto, ao selecionar os mesmos, não ocorre qualquer ação ou alteração de conteúdo.

  A utilização de indicadores visuais associados habitualmente a navegação ou expansão de informação pode gerar falsas expectativas de interação e dificultar a compreensão do comportamento esperado dos elementos.

  

  Figura 02 — Ícones de seta com indicação visual de interação sem funcionalidade associada.

  Ponto 03
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  Na "secção Urbanismo Balcão Online | Serviços disponíveis" o elemento “21 serviços disponíveis” é apresentado com aparência visual semelhante a um botão ou componente interativo. No entanto, ao selecionar o elemento, não ocorre qualquer ação.

  A utilização de padrões visuais associados a elementos acionáveis sem funcionalidade associada pode gerar falsas expectativas de interação e dificultar a compreensão do comportamento esperado do componente.

  

  Figura 03 — Elemento com aparência interativa sem ação associada.

  Recomendações

  Recomenda-se a revisão dos elementos gráficos apresentados com aparência interativa, garantindo que os componentes possuam comportamento funcional correspondente ou uma diferenciação visual clara relativamente aos restantes elementos informativos.
  Elementos visuais associados a navegação, expansão ou seleção não deverão ser utilizados sem funcionalidade associada, de forma a evitar ambiguuidade na interpretação das ações disponíveis.

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.4

  Evidências

  Ponto 01
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  O ícone de expansão do seletor “Tipo de serviço” apresenta contraste insuficiente relativamente ao fundo do componente.
  Foi identificado um rácio de contraste de 2.84:1, comprometendo a perceção visual do indicador do seletor e dificultando a identificação da funcionalidade disponível, especialmente para utilizadores com dificuldades visuais ou em condições de menor visibilidade.

  

  Figura 02 — Ícone de expansão com contraste insuficiente relativamente ao fundo do componente.

  Outro exemplo:
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques
  https://urbanismo.cm-camaradelobos.pt/o-urbanismo/documentos

  Recomendações

  Recomenda-se garantir níveis de contraste adequados entre elementos interativos e os respetivos fundos, assegurando a correta perceção visual dos componentes e a legibilidade dos conteúdos em diferentes condições de visualização.

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

  etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.4

  Evidências

  Ponto 01
  Página: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos

  Na secção "O Urbanismo de Câmara de Lobos" existem imagens clicáveis que não apresentam qualquer indicação visual de interatividade.
  Ao passar o cursor sobre os elementos, não ocorre qualquer alteração visual que permita perceber que as imagens funcionam como hiperligações ou elementos acionáveis, podendo comprometer a sua identificação e utilização pelos utilizadores.

  

  Figura 01 – Imagens clicáveis sem indicação visual de interatividade.

  Ponto 02
  Páginas: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos

  Os elementos apresentados no menu lateral da secção “Urbanismo” não possuem diferenciação visual suficientemente clara relativamente ao estado selecionado ou à interação disponível.

  Apesar de existir alteração de cor ao passar o cursor sobre os elementos, os componentes apresentam uma aparência visual próxima de conteúdo estático, dificultando a perceção das opções interativas e da localização atual do utilizador na navegação lateral.

  

  Figura 02 — Menu lateral com perceção limitada de interatividade e estado selecionado.

  Ponto 03
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  Os elementos “Obter requerimento em papel (download)” não apresentam uma diferenciação visual suficientemente clara relativamente aos restantes elementos inativos apresentados no bloco.

  Apesar de possuírem um ligeiro destaque visual, os componentes não aparentam de forma evidente ser acionáveis, dificultando a identificação da ação disponível pelos utilizadores.

  A hierarquia visual das ações também não é evidente, dificultando a identificação da principal ação disponível em cada bloco.

  

  Figura 03 — Elementos acionáveis com aparência visual pouco distinta dos restantes componentes.

  Ponto 04
  Página: https://urbanismo.cm-camaradelobos.pt/requerimentos-online

  O elemento “Limpar filtro” não apresenta características visuais que permitam identificá-lo de forma evidente como um componente acionável.
  A ausência de indicadores visuais associados a elementos interativos pode dificultar a perceção da funcionalidade disponível e comprometer a identificação da ação pelos utilizadores.

  

  Figura 04 — Elemento interativo sem diferenciação visual suficiente.

  Ponto 05
  Página: https://urbanismo.cm-camaradelobos.pt/o-urbanismo/noticias-e-destaques

  Os cartões de notícias apresentados na página não possuem indicadores visuais suficientemente claros de interatividade.

  Apesar de existirem áreas acionáveis associadas ao componente, os cartões não apresentam comportamento visual consistente ao passar o cursor ou durante a navegação por teclado, dificultando a perceção da interação disponível e da área efetivamente selecionável pelos utilizadores.

  

  Figura 5 — Cartões de notícias com áreas clicáveis sem diferenciação visual evidente.

  Recomendações

  Recomenda-se a revisão da apresentação visual e comportamento dos elementos interativos do portal, garantindo que componentes clicáveis sejam facilmente identificáveis através de indicadores visuais consistentes e comportamento de interação previsível.
  Deverá igualmente ser assegurada uma diferenciação clara entre elementos acionáveis, conteúdos informativos e componentes sem funcionalidade associada, evitando ambiguidades relativamente às ações disponíveis para os utilizadores.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #24 Existem campos do formulário que são ignorados quando se navega com o teclado/leitor de ecrã

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

  Evidências

  Testámos os ficheiros PDF presentes na página Requerimentos Online, através do browser e do Adobe Acrobat Reader, e não é possível navegar e aceder aos diferentes campos do formulário através do leitor de ecrã.

  

  Figura - Análise do documento PDF "REQUERIMENTO DE ALTERAÇÃO / LICENCIAMENTO DE OPERAÇÕES URBANÍSTICAS", presente na página Requerimentos Online, através do leitor de ecrã NVDA e de Tab e Shift+Tab.

  Recomendações

  Uma solução mais acessível seria disponibilizar estes formulários diretamente no site, em vez de em formato PDF.

• evidência: issue #11 Há componentes do formulário que são ignorados quando se navega por teclado

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

  Evidências

  Ao navegar pelo formulário com o teclado usando a tecla Tab, a sequência de tabulação deve seguir a ordem de preenchimento, passando por todos os campos disponíveis.

  Verificámos que, na página Requerimentos Online, ao navegar por teclado (Tab e Shift+Tab), não é possível focar no componente “Limpar filtro” - cuja função é a de limpar os filtros associados à pesquisa.

  

  Figura - Análise do componente "Limpar filtro" do formulário da página Requerimentos Online através do Google Inspector.

  Recomendações

  Recomendamos que a <div> dentro da qual se encontra este elemento (<div id="cleanfilter">Limpar filtro</div>) seja substituída pelo elemento HTML nativo semântico <button>.

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

Lista de evidências recolhidas:

• evidência: issue #25 Formulários PDF inacessíveis para leitores de ecrã

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

  Evidências

  O formulário PDF “REQUERIMENTO PARA INFORMAÇÃO DE INÍCIO DE OBRA - OBRA DE ESCASSA RELEVÂNCIA URBANÍSTICA” presente na página Requerimentos Online , é um formulário longo cujo conteúdo está distribuído por 4 páginas.

  No entanto, como estes formulários PDF não são acessíveis, os utilizadores que dependem de leitores de ecrã não conseguem aceder devidamente ao seu conteúdo.

  

  Figura - Análise do formulário PDF “REQUERIMENTO PARA INFORMAÇÃO DE INÍCIO DE OBRA - OBRA DE ESCASSA RELEVÂNCIA URBANÍSTICA”, presente na página Requerimentos Online, no browser e através do leitor de ecrã NVDA.

  Recomendações

  Nos casos dos formulários PDF, uma solução mais acessível seria disponibilizar os formulários diretamente no site, em vez de em formato PDF.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #13 Há formulários PDF com mais de uma página que não têm a sequência de passos identificada e não estão acessíveis para leitores de ecrã

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

  Evidências

  Em formulários com mais de uma página, deve-se garantir que está identificada a sequência de passos, juntamente com a designação de cada passo.

  O formulário PDF “REQUERIMENTO PARA INFORMAÇÃO DE INÍCIO DE OBRA - OBRA DE ESCASSA RELEVÂNCIA URBANÍSTICA” presente na página Requerimentos Online , é um formulário longo com 4 páginas que não tem a sequência de passos identificada. Para além disso, não é possível navegar e aceder aos diferentes campos do formulário através do leitor de ecrã.

  

  Figura - Análise do formulário PDF “REQUERIMENTO PARA INFORMAÇÃO DE INÍCIO DE OBRA - OBRA DE ESCASSA RELEVÂNCIA URBANÍSTICA”, presente na página Requerimentos Online, no browser e através do leitor de ecrã NVDA.

  Recomendações

  Para garantir melhor acessibilidade, os formulários não devem ser disponibilizados em PDF. A solução mais inclusiva é apresentar os formulários diretamente no site, permitindo o seu preenchimento online.

  Nos formulários extensos, com mais de uma página, a estrutura deve ser revista para incluir uma sequência de passos claramente identificada.

etiqueta: NOK

Lista de evidências recolhidas:

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

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

  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 Documentos, o campo “Subcategoria” está visível, mas inativo, não sendo possível de preencher, visto que tem dependência do preenchimento do campo “Categoria”.

  

  Figura - Análise do campo "Subcategoria", da página Documentos, através do Google Inspector.

  Recomendações

  Recomendamos ocultar o campo “Subcategoria” até que o utilizador preencha o campo “Categoria”. Depois de selecionada a categoria principal, o campo “Subcategoria” deve ser apresentado com as opções atualizadas de acordo com a escolha feita.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #52 Legenda do campo de pesquisa não é anunciada pelo leitor de ecrã nem aparece na interface

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

  Evidências

  Verificámos que no campo de pesquisa da página Pesquisar | Motor de busca, existe um elemento <label> dentro da estrutura do formulário, mas este não está a ser reconhecido pelo leitor de ecrã nem está visível na interface gráfica.

  

  Figura - Análise do campo de pesquisa da página Pesquisar | Motor de busca através do Google Inspector.

  Recomendações

  Recomendamos que este campo seja reestruturado. Deve ser utilizado um elemento <label> para apresentar a legenda do campo (por exemplo, “Pesquisar:”), que deve ficar acessível para tecnologias de apoio e visível na interface gráfica, e um elemento <input> para o campo onde o utilizador escreve o termo de pesquisa.

  Como referência para uma implementação acessível, podem consultar o conteúdo dentro do cabeçalho “Text Inputs”, do artigo Creating Accessible Forms da WebAIM, onde é apresentado um exemplo claro de como estruturar corretamente este tipo de campo.

• evidência: issue #51 Checkboxes não estão estruturadas de forma acessível

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

  Evidências

  Verificámos que, ao navegar com Tab e Shift+Tab, na página Requerimentos Online, o leitor de ecrã não anuncia o rótulo das checkboxes “Online”, “Em papel” e “Explicador” quando o foco chega a cada uma destas caixas de seleção.

  Isto significa que as legendas não estão associadas aos respetivos campos e que estas caixas de combinação não estão estruturadas de forma acessível.

  

  Figura - Análise das checkboxes “Online”, “Em papel” e “Explicador”, da página Requerimentos Online, através do Google Inspector.

  Recomendações

  Recomendamos que estas checkboxes sejam reestruturadas para garantir que os respetivos rótulos estejam corretamente associados e que os componentes funcionem plenamente com tecnologias de apoio, como leitores de ecrã.

  Recomendamos consultar o conteúdo dentro do cabeçalho “Checkboxes”, da página Creating Accessible Forms da WebAIM, onde são apresentados exemplos práticos de implementações acessíveis de caixas de seleção.

  Para assegurar a associação correta entre cada legenda e o seu campo, é essencial que o atributo for da etiqueta corresponda exatamente ao atributo id do elemento input.

• evidência: issue #50 Caixas de combinação não estão estruturadas de forma acessível

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

  Evidências

  Verificámos que, nas comboboxes presentes nas páginas Notícias e Destaques, Documentos e Requerimentos Online o leitor de ecrã não consegue aceder aos rótulos dos campos — quando o utilizador navega com Tab ou Shift+Tab — nem às opções disponíveis dentro de cada combobox. Quando o utilizador tenta navegar pelas opções, o leitor de ecrã anuncia apenas “Em branco”, em vez de ler cada opção disponível.

  Isto significa que estas caixas de combinação não estão estruturadas de forma acessível.

  Páginas e campos a verificar:

  • Notícias e Destaques – Campos “Categoria” e “Ano”.

  • Documentos – Campos “Categoria” e “Subcategoria”.

  • Requerimentos Online – Campo “Tipo de serviço”.

  

  Figura 1 - Análise do campo "Categoria", da página Documentos, através do Google Inspector.

  

  Figura 2 - Análise dos campos do formulário da página Notícias e Destaques através do leitor de ecrã NVDA.

  Recomendações

  Sugerimos que estes componentes sejam reestruturados para garantir total compatibilidade com tecnologias de apoio.

  Como referência para uma implementação acessível de uma combobox, recomendamos consultar o exemplo da W3C Editable Combobox With Both List and Inline Autocomplete.

  Se concluírem que o número de opções não justifica o uso de uma combobox, podem optar por alternativas mais simples, como listas suspensas ou radio buttons. A página Creating Accessible Forms apresenta exemplos práticos de implementações acessíveis destes componentes.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #53 Não é possível identificar campos obrigatórios nos formulários em PDF

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

  Evidências

  Verificámos que, nos formulários PDF da página Requerimentos Online, não é possível reconhecer os campos de preenchimento obrigatório. Esta informação não é passada quer visualmente quer para os leitores de ecrã.

  

  Figura - Análise do formulário PDF "REQUERIMENTO DE SUBSTITUIÇÃO DE TÉCNICO RESPONSÁVEL PELA OBRA" disponível na página Requerimentos Online.

  Recomendações

  Uma solução mais acessível seria disponibilizar os formulários diretamente no site, em vez de em formato PDF. Nos formulários web, os campos obrigatórios devem incluir o atributo required para serem identificados pelas tecnologias de apoio como obrigatórios.

  Adicionalmente, deve também ser apresentada uma indicação visual clara junto ao rótulo — por exemplo, “(Campo obrigatório)” — para que todos os utilizadores consigam identificar facilmente os campos que têm obrigatoriamente de preencher.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #14 Inexistência de ações longas

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

  Evidências

  Na análise realizada, não foram identificadas ações longas que exijam comunicação de estado ao utilizador.

  Desta forma, considera-se que o critério é não aplicável.

  Recomendações

  N/A

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #15 Inexistência de formulários com submissão e feedback associado

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

  Evidências

  Na análise realizada, não foram identificados formulários que impliquem submissão de dados por parte do utilizador nem mecanismos associados de validação, confirmação ou apresentação de feedback após submissão.

  Desta forma, considera-se que o critério é não aplicável.

  Recomendações

  N/A

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #82 Não existem formulários que permitam ações destrutivas pelo utilizador

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

  Evidências

  Não identificamos formulários que permitem o utilizador fazer ações destrutivas e por esse motivo, consideramos esse critério como "Não aplicável".

  Recomendações

  No response

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #78 Inexistência de formulários que prexisem de apresentar mensagens de erro

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

  Evidências

  Não encontrámos formulários que precisem de apresentar mensagens de erro, pelo que o requisito não se aplica.

  Recomendações

  No response

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #79 Inexistência de formulários que prexisem de apresentar mensagens de erro

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

  Evidências

  Não encontrámos formulários que precisem de apresentar mensagens de erro, pelo que o
  requisito não se aplica.

  Recomendações

  No response

etiqueta: OK (no entanto contém 7 melhorias que se recomenda efetuar)

Lista de evidências recolhidas:

• evidência: issue #81 Outras violações - Links e botões que direcionam para PDFs sem aviso prévio

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da Problemática:

  O website possui diversas páginas com botões e links que direcionam diretamente para ficheiros PDF, sem informar previamente o utilizador sobre esse comportamento. Essa prática pode causar perda de referência de navegação, uma vez que o utilizador é retirado do fluxo do website e, para retornar à página anterior, depende exclusivamente dos controlos do navegador. Por exemplo, ao aceder os conteúdos "Programa de curso", "Edital N.º 0118.2024.ED.SCT", "Proposta de Deliberação GPR-PR-052-2024" e "Esclarecimentos" da página Programa 1.º Direito - Plano de Recuperação e Resiliência (PRR) (Figura 01)

  

  Figura 1 - Utilizadores não são informados sobre o redirecionamento para ficheiros PDF's do Balcão Único

  Esse comportamento afeta a usabilidade e a acessibilidade, especialmente para utilizadores com deficiência cognitiva, visual ou que utilizam tecnologias assistivas, além de contrariar boas práticas de orientação e previsibilidade na navegação.

  Outros exemplos:

  • https://urbanismo.cm-camaradelobos.pt/programa-1-direito
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/o-urbanismo-de-camara-de-lobos
  • https://urbanismo.cm-camaradelobos.pt/o-urbanismo/imi-imposto-municipal-sobre-os-imoveis
  • https://urbanismo.cm-camaradelobos.pt/pdm-plano-diretor-municipal/elementos-do-pdm/o-plano-diretor-municipal

  Recomendações

  Ajustar as nomenclaturas dos links e botões para informar claramente que o acionamento irá abrir ou descarregar um ficheiro PDF, por exemplo: “Programa de curso (PDF)” ou “Edital N.º 0118.2024.ED.SCT – PDF”.
  Adicionalmente, recomenda-se manter o comportamento consistente em todo o site e, sempre que possível, fornecer avisos acessíveis, promovendo maior previsibilidade, orientação e conformidade com boas práticas de acessibilidade.

• evidência: issue #76 Outras violações - Há hiperligações de conteúdos internos que redirecionam para página inicial

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da problemática

  Na página O Urbanismo de Câmara de Lobos há hiperligações que apontam para página inicial. Ao aceder os conteúdos através das hiperligações “Agenda 21 Local” e “Reabilitação urbana” o utilizador não é redirecionado para o detalhe do conteúdo e sim retorna para página inicial (Figura 1)



  

  Figura 1 - Página com hiperligações incorretas

  Esta situação impede o acesso à informação e constitui uma barreira significativa na acessibilidade do conteúdo.

  Recomendações

  Recomenda‑se atualizar todas as hiperligações para garantir que apontam para conteúdos atualizados e disponíveis no website.

• evidência: issue #75 Outras violações - Problemas de conteúdos desorganizados nos cards

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da problemática

  Na página Documentos, ao aceder a categoria “Procedimento de oferta pública de aquisição de fogos” as datas de publicações apresentam-se desorganizadas no ecrã, com um espaçamento que ultrapassa a área do card por exemplo a “Publicado a 09-05-2025”, causando desalinhamento visual no ecrã. (Figura 1)

  

  Figura 1 - Datas de publicação desorganizadas nos cards

  Esta desorganização da informação pode dificultar a leitura rápida, aumentar a carga cognitiva, especialmente em dispositivos móveis e para utilizadores de tecnologias assistivas.


  Recomendações

  Definir limites de extensão para os títulos, usar subtítulos ou texto introdutório para informações complementares e aplicar hierarquia semântica clara (título principal mais curto). Garantir também um layout responsivo para títulos que controle a quebra de texto, melhorando a legibilidade e a acessibilidade geral da página.

• evidência: issue #74 Outras violações - Link “Ir para Conteúdo” não é visível

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da problemática

  Na estrutura do website encontra‑se disponível 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 além de não direcionar para o conteúdo principal permanecendo no header, não é apresentado de forma visível, não sendo identificado como um botão ou link interativo durante a navegação visual. Adicionalmente, não é devidamente percetível, comprometendo a sua função para utilizadores que navegam exclusivamente por teclado. (Figura 1 e 2)

  

  A Figura 1 - Inexistência operacional do link “Ir para Conteúdo” do ponto de vista do utilizador com leitor de ecrã NVDA na navegação por TAB

  

  Figura 2 – Inspeção do link “Ir para conteúdo” que não está visível

  Esta situação impede que o mecanismo de salto cumpra o seu propósito de facilitar a navegação eficiente e inclusiva, reduzindo a usabilidade global do website e criando barreiras de acesso à informação.

  Recomendações

  Assegurar que o link “Ir para conteúdo” seja:

  • Visualmente percetível, apresentando-se como um elemento interativo (link ou botão);
  • Disponível e visível quando recebe foco por teclado;
  • Corretamente identificado e anunciado por leitores de ecrã;
  • Posicionado de forma lógica no início da página, antes dos blocos de navegação repetitivos.

  O link deverá tornar‑se visível aquando da navegação por teclado (por exemplo, ao receber foco através da tecla TAB) e permitir que todos os utilizadores compreendam claramente a sua função.

• evidência: issue #73 Outras violações - Botão com texto alternativo em inglês

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da problemática

  Verificamos uma inconsistência linguística, uma vez que o site está em português mas há botões com o textos alternativos em inglês.

  Em todo o website está disponível o botão de seletor de idiomas. No entanto, o elemento apresenta texto alternativo incorreto, definido com aria-label="Select Language". Essa rotulagem em inglês dificulta a compreensão por utilizadores falantes de português, idioma principal em que o site é disponibilizado, especialmente para pessoas que utilizam leitores de ecr]a. (Figura 1)

  

  Figura 1 - Botão com texto alternativo em inglês

  Recomendações

  Recomendamos traduzir todos os textos alternativos dos botões para português, idioma principal do website.

• evidência: issue #72 Outras violações - Uso inadequado de overlays de acessibilidade

  etiqueta: outras violaçõesetiqueta: melhoria

  Evidências

  Descrição da problemática

  Os overlays de acessibilidade são frequentemente utilizados como soluções rápidas, mas não corrigem os problemas reais do website. Estas ferramentas funcionam como camadas sobrepostas ao código existente, sem resolver falhas estruturais como erros de semântica, foco, landmarks ou navegação por teclado.

  Em todo website, é disponibilizado uma “ferramenta de acessibilidade” que em alguns casos, podem interferir com tecnologias de apoio (ex.: NVDA), criando comportamentos inesperados, atalhos redundantes ou problemas de apresentação, como textos muito pequenos que afetam a legibilidade e problemas de contraste (Figura 1 e 2).

  

  Figura 1 - Ferramenta de acessibilidade baseada em plugin, sem assegurar acessibilidade real ao conteúdo.

  

  Figura 2 - Exemplo de não conformidade com textos muito pequenos

  Além disso, transmitem uma falsa perceção de conformidade, mantendo problemas de acessibilidade para utilizadores reais.

  Recomendações

  Recomenda‑se que a acessibilidade seja assegurada prioritariamente através de boas práticas nativas: uso correto de HTML semântico, navegação por teclado funcional, contraste adequado e compatibilidade com tecnologias de apoio. Os overlays não devem substituir a correção estrutural do site, pois a melhoria da acessibilidade deve começar na base do código e não depender exclusivamente de ferramentas externas. Sendo assim, devem ser removidos do website.

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

  etiqueta: outras violaçõesetiqueta: melhoria

  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 no banner, e nos cards das “Notícias” e “Requerimentos, Licenças e Certidões”.

  

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

  

  Figura 2 – Exemplo de foco visível mas não circunscreve corretamente a componente

  

  Figura 3 - Exemplo de foco escondido por trás dos cards

  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