Relatório Avaliação da Candidatura da PRR - WireMaze - Pack 20

Introdução

O website https://report_012.gov.pt/ etiqueta: não passa nos requisitos mínimos do Selo de Usabilidade e Acessibilidade.

Estado das avaliações efetuadas
Tipo de avaliaçãoEstado
Avaliação Automáticaetiqueta: NOK
Avaliação Manualetiqueta: NOK

Das avaliações manuais efetuadas obtiveram-se os resultados que se sintetizam na tabela seguinte.

Níveis de conformidade das avaliações manuais
ChecklistConformidade alcançadaResultado
10 aspetos18.5% (5/27)etiqueta: Não passa
Conteúdo35.3% (6/17)etiqueta: Não passa
Transação72.7% (8/11)etiqueta: Não passa

Nota: para passar os requisitos do Selo é necessário alcançar um nível de conformidade superior ou igual a 75% em cada uma das 3 checklists.

Verificámos também que a Declaração de Acessibilidade não se encontra corretamente afixada. Consulte o capítulo "Declaração de acessibilidade" para saber o que tem de corrigir.

Declaração de Acessibilidade

etiqueta: NOK

De acordo com o artigo 8º do DL n.º 83/2018, todos os sítios web e todas as aplicações móveis têm de ostentar uma Declaração de Acessibilidade. A Declaração é o documento na qual a organização evidencia o trabalho levado a efeito para tornar os seus conteúdos e serviços digitais mais acessíveis, disponibilizando ainda contactos para ajuda adicional.

Lista de evidências recolhidas:

Avaliação automática

etiqueta: NOK

Para a produção das evidências do presente capítulo, foram utilizadas ferramentas automatizadas de avaliação de requisitos de acessibilidade de acordo com a norma WCAG 2.1 'AA'. A amostra em análise pelas ferramentas é composta pela Homepage mais todas as páginas diretamente hiperligadas por ela, pertencentes ao domínio.

Lista de evidências recolhidas:

Avaliação manual

etiqueta: NOK

A avaliação manual é feita por inspeção perícial dos diversos requisitos constantes da:

Sempre que os auditores localizam uma falha grave de um requisito de acessibilidade que, embora não faça parte do esquema de requisitos do Selo, se enquadre no âmbito das violações das WCAG 2.1 'AA' do W3C, tal referência é anotada em "Outras violações" do presente capítulo. Apesar destas violações não se apresentarem com carácter vinculativo no esquema de requisitos do Selo, recomenda-se que as mesmas sejam corrigidas.

Checklist 10 aspetos

etiqueta: NOK

Nível de conformidade:

  • Checklist 10 aspetos: 18.5% (5/27)
    • Requisitos avaliados: 27 (27 aplicáveis)
    • Requisitos OK: 5
    • Requisitos NOK: 22

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #117 Rodapé possui opções que não estão estruturados como lista

    etiqueta: chk 10 webetiqueta: R 1.1etiqueta: NOK
    Descrição do problema

    Verifica-se que em alguns websites alvos de análise, as opções apresentadas no rodapé não estão devidamente estruturadas como listas ul li.

    Por exemplo, no website de Esposende é possível identificar que existem links que não estão estruturados como listas:

    Outro exemplo foi encontrado no website Oliveira do Bairro, que é possível identificar links que não estão estruturados como lista ("deixe a sua mensagem", "234 732 100" e "Subscreva a newsletter"), e também, existem links que além de não estarem estruturados como lista, estão sendo repetidos no rodapé (links úteis, reclamação e sugestão, contactos úteis):

    Image
    Sugestão de correção
    • Estruturar os elementos (grupo de imagens e links) como uma lista ul li
    • Rever a organização dos links, removendo links duplicados.
    Websites que estão a cumprir (OK)
    • CM Bragança (OK)
    • CM Guimarães (OK)
    • CM Matosinhos (OK)
    • CM Valpaços (OK)
    • CM Sabrosa (OK)
    • CM Caminha (OK)
    • CM Monte Alegre (OK)
    • CM Águeda (OK)
    • CM Valongo (OK)
    • CM Pombal (OK)
    • Ílhavo (OK)
    • CM Albergaria Velha (OK )
    • Região de Aveiro (OK)
    • CM Peniche (OK)
    Websites que necessitam de correções (NOK)
    • CM Esposende (NOK)
    • CM Arcos de Valdevez (NOK)
    • CM Peso Régua (NOK) lista de imagens-link e botões
    • CM Satão (NOK) opções de download da app
    • CM Oliveira do Bairro (NOK) rever os links do rodapé, não estão estruturados como lista e alguns são repetidos.
    • CM Vagos (NOK)

  • issue #10 O menu lateral não está estruturado como lista de forma apropriada

    etiqueta: chk 10 webetiqueta: R 1.1etiqueta: NOK

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

    Descrição do problema

    Verifica-se que o menu lateral, quando apresentado nos diferentes websites, embora esteja estruturado em HTML como uma lista através das tags ul e li, ele não está a ser reconhecido pelas tecnologias de apoio como uma lista. Isso acontece pela utilização indevida de atributos ARIA.

    Por exemplo, o uso do atributo role="none" faz com que as tags HTML percam a sua semântica nativa, o que, quando aplicado aos elementos da lista, impede que estes sejam interpretados como uma lista. Adicionalmente, verifica-se a utilização dos atributos role="menu" e role="menuitem", os quais não são apropriados neste contexto, uma vez que são atributos específicos para menus de aplicações e não para menus de navegação em websites:

    Image

    Uso dos atributos role="none", role="menu" e role="menuitem" de forma inapropriada no menu lateral do website CM Bragança

    Sugestão de correção:

    Remover os atributos role=none, role=menu e role=menuitem do menu lalteral. Isso deve ser aplicado em todos os websites que estão com o mesmo problema.

    Websites que necessitam de correções (NOK):
    Websites que estão a cumprir (OK)

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

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 2.2 - Existe uma marcação hierarquizada de títulos e subtítulos na página (h1...h6)

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #9 Existem títulos e subtítulos incorretos e outros em falta

    etiqueta: chk 10 webetiqueta: R 2.2etiqueta: NOK

    Existe uma marcação hierarquizada de títulos e subtítulos na página <h1>...<h6>.
    – ver requisito 2.2 na lista 10 aspetos

    Evidencias:

    Nota: as páginas aqui indicadas são exemplos, devem ser corrigidas todas as situações iguais noutras páginas do site.

    M. Bragança (NOK)

    Evidência checklist: na homepage, a seguir ao título de nível 1, surgem 4 títulos de nível 4 (Contactos/Geoportal/Nopaper/perguntas frequentes), que deveriam passar a ser apenas itens de lista e não cabeçalhos. Esta situação também aparece nas restantes páginas, uma vez que esta seção é comum a todo o site, mas aqui estes títulos de nível 4 aparecem primeiro do que o título nível 1.

    M. Guimarães (NOK)

    • Evidência checklist: na Homepage, hierarquia dos títulos está correta, mas existem demasiados títulos de nível 2 quando poderiam ser apenas lista com itens (caso de "todos os sites do município).
    • Nas pags interiores só existem 4 cabeçalhos (H1 nome da página, e depois sempre os 3 do rodapé), por exemplo em https://www.cm-guimaraes.pt/areas-de-intervencao/ambiente-e-sustentabilidade/mobilidade-e-transportes/modos-suaves deverão existir 4 cabeçalhos de nível 2 abaixo do H1, referentes a MUPI - Cidade ciclável / Metrominuto Guimarães / Metrominuto Caldas das Taipas / Modos suaves em Guimarães. Situação idêntica em: https://www.cm-guimaraes.pt/areas-de-intervencao/protecao-e-seguranca/galeria .

    M. Esposende (NOK)

    • Evidência checklist: na homepage a hierarquia dos títulos está correta, embora existam demasiados títulos de nível 2.
    • Nas páginas interiores passa de título de nível 1 para nível 4, e.g. https://www.municipio.esposende.pt/viver/equipamentos; https://www.municipio.esposende.pt/pages/173, nok

    M. Arcos de Valdevez (NOK)

    • Evidência checklistt: homepage, ok
    • Em https://www.cmav.pt/p/investir, https://www.cmav.pt/informar/orgaos-autarquicos/camara-municipal, e https://www.cmav.pt/contactos, passam de títulos de nível 1 para nível 4 e 5, nok

    M. Águeda (NOK)

    • Evidência checklist, ok
    • Em https://www.cm-agueda.pt/viver/acao-social/agueda-solidaria NOK, situação já referenciada no relatório em jan 2025. Na página Águeda solidária e em muitas outras páginas do site, existe um cabeçalho de nível 1 marcado corretamente, mas não há títulos atribuídos à secção do corpo do documento, porque o primeiro h2 faz parte do conteúdo do rodapé.

    M. Matosinhos (NOK)

    • Evidência checklist: na homepage, existem vários cabeçalhos de nível 2 (carrocel) que surgem antes do cabeçalho nível 1, nok
    • Em https://www.cm-matosinhos.pt/municipio/executivo-municipal/competencias-do-executivo-municipal/marta-moura-laranja-pontes, hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos atribuídos à secção do corpo da página, nok

    CI Região de Aveiro (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.regiaodeaveiro.pt/institucional/quem-somos , hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos atribuídos à secção do corpo da página.

    M. Valpaços (NOK)

    • Evidência checklist: homepage, passa de cabeçalho nível 2 para nível 4, nok
    • Em https://valpacos.pt/municipio/assembleia-municipal , a hierarquia de títulos é violada, passa de nível 1, para nível 4 e depois para nível 6

    M. Sabrosa (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.sabrosa.pt/autarquia/orgaos-autarquicos/assembleia-municipal , hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos devidamente marcados no corpo da página, nok

    M. Albergaria-a-Velha (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.cm-albergaria.pt/municipio/assembleia-municipal/composicao-8 , hierarquia correta mas salta do cabeçalho do nome da página para Contactos, não existem títulos atribuídos à secção do corpo da página, nok

    M. Caminha (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.cm-caminha.pt/viver/acesso-informacao-administrativa, hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos atribuídos à secção do corpo da página, nok

    M. Peniche (OK)

    • Evidência checklist: homepage, ok

    M. Peso da Régua (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.cm-pesoregua.pt/municipio/autarquia/executivo-municipal ou https://www.cm-pesoregua.pt/municipio/autarquia/assembleia-municipal, hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos atribuídos à secção do corpo da página, nok

    M. Pombal (NOK)

    • Evidência checklist: homepage, não existe título de nível 1 (desconhecemos em que site estamos), nok
    • Em https://www.cm-pombal.pt/municipio/camara-municipal , o título de nível 1 encontra-se no rodapé, nok
    • As páginas deste site, começam com títulos nível 2

    M. Montalegre (OK)

    • Evidência checklist: homepage, ok

    M. Sátão (NOK)

    • Evidência checklist: homepage, existe um carrossel com título nível 2, antes do título de nível 1, nok
      • .
    • Em https://www.cm-satao.pt/autarquia/camara-municipal , além do carrocel com título nível 2, a página não tem título nível 1, com nome da página. Título nível 1, está no rodapé. Para além disso não existem títulos atribuídos à secção do corpo da página, nok

    M. Ílhavo (NOK)

    • Evidência checklist: homepage, ok
    • Em https://www.cm-ilhavo.pt/municipio/assembleia-municipal/composicao-e-competencias salta do cabeçalho do nome da página para cabeçalho de rodapé com o nome do município??, não existem títulos atribuídos à secção do corpo da página, nok.

    M. Oliveira do Bairro (NOK)

    • Evidência checklist: homepage, o primeiro título é de nível 2 e é uma imagem??, nok
    • Em https://www.cm-olb.pt/municipio/camara-municipal/competencias , salta do cabeçalho do nome da página para cabeçalhos de rodapé de nível 2 (Ir para a página inicial??), não existem títulos atribuídos à secção do corpo da página, nok

    CM Vagos (NOK)

    • Evidência checklist: homepage, ok
    • Em muitas das páginas interiores apenas existe o título nível 1, não existem títulos atribuídos à secção no corpo da página e.g. https://www.cm-vagos.pt/municipio/assembleia-municipal/composicao , nok

    M. Valongo (NOK)

    • Evidência checklist: em https://www.cm-valongo.pt/municipio/autarquia/mensagem-do-presidente , página erro 404?!, nok
    • Homepage, hierarquia correta embora com demasiados títulos (150?)
    • Em https://www.cm-valongo.pt/municipio/autarquia , hierarquia correta mas salta do cabeçalho do nome da página para cabeçalhos de rodapé, não existem títulos atribuídos à secção do corpo da página

    Recomendações:

Requisito 3.1 - As células que constituem os cabeçalhos da tabela estão marcadas com o elemento th

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #27 Marcação das células que constituem os cabeçalhos da tabela com o elemento <th>

    etiqueta: chk 10 webetiqueta: R 3.1etiqueta: NOK

    As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>.
    – ver requisito 3.1 na lista 10 aspetos

    Bragança:

    NOK
    O 2º elemento th da tabela da página aeródromo está vazio.

    Image

    Recomendamos o preenchimento do elemento th com o texto que descreva os dados constantes das células abaixo do mesmo.

    Guimarães:

    NOK
    A primeira tabela na página Banco Local de Voluntariado (BLV) não tem o texto dos seus cabeçalhos colocado em elementos <th>.

    Image

    Para além disso, a primeira célula que se constitui como cabeçalho está vazia, quando devia conter o texto “Ano”.

    Esposende

    NOK
    O primeiro cabeçalho da tabela presente na página Lista de Inscritos (intitulada “Inscritos”) está marcado como sendo um cabeçalho de linha, quando é um cabeçalho de coluna.

    Image

    Tabela com um cabeçalho incorretamente marcado como sendo de linha

    Recomendamos a alteração do atributo scope do cabeçalho referido, que deve passar a ter o valor "col".

    Arcos valdevez

    Melhoria
    Os cabeçalhos da tabela estão no elemento tbody.

    Image

    Cabeçalhos da tabela no tbody

    Recomendamos a criação de um elemento <thead> antes do elemento <tbody> e a transladação da linha com os cabeçalhos para dentro do elemento <thead>.

    NOK
    A página Agenda Cultural contém uma tabela encaixada noutra tabela. Ambas as tabelas não têm cabeçalhos.

    Image

    Tabelas encaixadas

    Recomendamos ainda, sempre que possível, a não implementação de tabelas encaixadas, já que podem não ser percecionadas adequadamente pelas tecnologias de apoio, para além da grande quantidade de informação que precisa ser analisada para a compreensão dessas tabelas.

    Matosinhos:

    Melhoria
    1ª tabela da página auxílios económicos contém os cabeçalhos no elemento tbody.

    Image

    Tabela com os cabeçalhos no tbody

    O mesmo acontece na segunda e terceira tabela da mesma página, e na tabela presente na página política de cookies.
    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    regiao_de_aveiro:

    Melhoria
    As três tabelas da página Política de Cookies têm os elementos <th> no elemento <tbody>.

    Image

    Primeira tabela da página Política de cookies
    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    Valpaços

    Melhoria
    A tabela existente na página CÂMARA MUNICIPAL APROVA A REDUÇÃO DA TAXA DO IMPOSTO MUNICIPAL SOBRE IMÓVEIS (IMI) PARA FAMÍLIAS COM DEPENDENTES contém os elementos <th> no <tbody>.

    Image

    Tabela com elementos th no elemento tbody

    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    NOK
    Tabela presente na página Calendário das Reuniões de Câmara contém uma tabela encaixada.

    Image

    Tabela encaixada

    Recomendamos a passagem da célula com o nome do mês para o topo da tabela exterior de modo a ocupar toda a linha e devendo ser considerada como cabeçalho (<th>), e a passagem dos botões “Anterior” “Seguinte” para fora das tabelas. Deste modo, a tabela interior pode ser removida.
    As céluas com os dias da semana presentes na tabela exterior são elementos <td>.

    Image

    Recomendamos que as células com os dias da semana presentes na tabela exterior sejam alteradas de <td> para <th>.

    Sabrosa

    Melhoria
    Tabela da página Termos de Utilização possui os cabeçalhos no elemento tbody.

    Image

    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    Albergaria-a-Velha

    Melhoria
    Tabela da página APOIO AO ARRENDAMENTO URBANO PARA FINS HABITACIONAIS possui os cabeçalhos no elemento tbody.

    Image

    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    NOK
    Tabela da página APOIO AO ARRENDAMENTO URBANO PARA FINS HABITACIONAIS não possui os cabeçalhos em elementos th.

    Image

    Recomendamos a substituição dos elementos td dos cabeçalhos por elementos th.

    Caminha:

    Melhoria
    As duas tabelas da página Núcleo Executivo do CLASC contêm os seus cabeçalhos dentro do elemento <tbody>.

    Image

    Primeira tabela da página com cabeçalhos no tbody

    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    Peniche:

    NOK
    Nas três tabelas presentes na página Política de Cookies os textos dos cabeçalhos não estão em elementos <th>.

    Image

    primeira tabela sem elementos <th> nos cabeçalhos

    Image

    Segunda tabela sem elementos <th> nos cabeçalhos

    Nota: esta página foi encontrada a partir do formulário de pesquisa do site.
    Pesquisando manualmente, encontrámos uma página atualizada, em https://www.cm-peniche.pt/ficha-tecnica/avisos-legais/politica-de-cookies, já com os elementos <th>, mas não sabemos se a página antiga ainda é referenciada nalguma outra página (e para todos os efeitos ela é encontrada a partir do motor de pesquisa), pelo que faz sentido manter o problema.
    Esta página atualizada contém os elementos <th> no elemento <tbody>. Visto que estamos perante apenas cabeçalhos de coluna, recomendamos que movam os cabeçalhos para uma linha dentro de um elemento <thead>.

    Peso da régua:

    NOK
    A tabela existente na página DOCUMENTOS FINANCEIROS é uma tabela complexa, que tem como primeira célula um <td> vazio.

    Image

    Tabela com td vazio

    Este elemento <td> deve ser substituído por um elemento <th>, visto que faz parte dos cabeçalhos da tabela, e deve-lhe ser colocado texto que descreva o cabeçalho.
    Sendo uma tabela complexa, com colspans e rowspans, e cabeçalhos de coluna e de linha, é necessário indicar em cada célula de dados a que cabeçalho diz respeito, já que não é garantido que os leitores de ecrã infiram essa relação.
    Para isso, podem ser colocados atributos id em cada cabeçalho, cujos valores devem ser referenciados em cada célula de dados através do atributo headers.
    Ainda em relação a esta tabela, recomendamos que todos os cabeçalhos sejam movidos para um elemento <thead>, ficando o elemento <tbody> reservado para as células de dados.
    Tudo o que foi dito acima aplica-se às outras duas tabelas presentes na mesma página.

    Pombal

    Melhoria
    A tabela presente na página Regulamento Municipal de Alienação de Lotes e Ocupação da Zona Industrial da Guia contém os seus cabeçalhos no elemento tbody.

    Image

    Tabela com cabeçalhos no tbody

    O mesmo acontece na tabela presente na página Política de Cookies.
    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    NOK
    A tabela presente na página Política de Cookies não tem os cabeçalhos em elementos th.

    Image

    Tabela sem elementos th nas células de cabeçalhos

    Recomendamos a substituição dos td das células de cabeçalhos por elementos th.

    Montalegre

    Melhoria
    A tabela existente na página Extensão dos SAR e ETAR de São Vicente da Chã contém os cabeçalhos no elemento tbody.

    Image

    Tabela com headers no tbody

    Recomendamos criar um elemento thead e mover a linha com os cabeçalhos para lá.

    Águeda:

    NOK
    A tabela presente na página Política de Cookies não tem os seus cabeçalhos em elementos th.

    Image

    Tabela sem elementos th

    A tabela presente na página Assembleia Municipal tem os textos dos cabeçalhos em branco.
    Recomendamos a substitiução dos elementos td que contêm os cabeçalhos por elementos th e o preenchimento dos cabeçalhos vazios por textos adequados.

    Melhoria
    A tabela presente na página Política de Cookies contém os seus cabeçalhos no elemento tbody.

    Image

    Tabela com os cabeçalhos no tbody
    Recomendamos criar de um elemento thead e mover a linha com os cabeçalhos para lá.

    Sátão

    NOK
    A segunda tabela da página Ginásio Municipal de Sátão não tem os seus cabeçalhos em elementos th.

    Image

    Tabela sem elementos th
    O mesmo acontece na terceira tabela da mesma página, intitulada “Tabela de descontos”.
    Recomendamos a substitituição dos elementos td dos cabeçalhos por elementos th. Dado que estamos perante cabeçalhos de linha, a cada elemento th deve ser inserido o atributo scope = "row ".

    Ílhavo

    NOK
    A segunda tabela da página Agenda de Eventos, que apresenta o calendário para escolha de data, contém os botões para recuo e avanço nos meses de cada lado do nome do mês, para além de não ter elementos th nos cabeçalhos.

    Image

    Tabela sem elementos th e com botões de navegação entre meses

    Recomendamos que movam os botões para retrocesso e avanço nos meses para fora da tabela e aumentem o valor do atributo colspan associado ao mês, de modo a que essa célula ocupe as 7 colunas. O elemento td onde consta o nome do mês deve ser substituído por um elemto th.

    Melhoria
    A tabela existente na página Horários tem os cabeçalhos no elemento tbody.

    Image

    Recomendamos criar de um elemento thead e mover a linha com os cabeçalhos para lá.

    Oliveira do bairro:

    Melhoria
    A terceira tabela presente na página Acessibilidades, intitulada “Distância e Tempo de Percurso em Via Rodoviária aos Principais Centros Urbanos” contém demasiada informação, misturando semânticas diferentes.

    Image

    Tabela complexa com várias semânticas misturadas

    O texto “Vias”, presente em cinco células, está envolvido dentro de elementos td, quando deveria estar dentro de elementos th.
    No entanto, a colocação desses textos em elementos th pode causar ainda mais ruído para algumas tecnologias de apoio, que vão anunciar os cabeçalhos das linhas superiores em conjunto com os cabeçalhos com o descritivo “Vias”.
    Recomendamos a restruturação da tabela, de modo a facilitar a leitura por parte dos utilizadores de tecnologias de apoio.
    Uma abordagem pode passar pela divisão da tabela em duas, em que a segunda tabela teria apenas as vias para deslocação da origem ao destino.

    Todas as tabelas da página referida são complexas, sendo que as células de dados não têm indicação de quais os cabeçalhos a que estão associadas.
    Recomendamos a inclusão de um atributo id em cada cabeçalho, e de um atributo headers em cada célula de dados que contenha os ids dos cabeçalhos a que cada célula diz respeito. No caso das tabelas desta página, as células de dados referem-se, pelo menos, ao cabeçalho Oliveira do Bairro (origem) e ao cabeçalho que apresenta a cidade de destino. Os dados da terceira tabela referem-se também aos cabeçalhos de segundo nível da cidade de destino (km ou minutos).
    Exemplificando com a terceira tabela, podem colocar no atributo headers de uma célula de dados algo como: "orig-ob dest-agueda agueda-km". Algumas tecnologias de apoio honram a ordem dos ids no atributo headers, lendo assim os cabeçalhos pela ordem indicada e que neste caso faz mais sentido.

    Vagos

    OK
    Não encontrámos tabelas que não tenham os cabeçalhos em elementos th.

Requisito 3.2 - A legenda da tabela está marcada com o elemento caption

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #32 Marcação da legenda da tabela com o elemento <caption>

    etiqueta: chk 10 webetiqueta: R 3.2etiqueta: NOK

    A legenda da tabela está marcada com o elemento <caption>
    – ver requisito 3.2 na lista 10 aspetos

    Bragança:

    Melhoria
    Página aeródromo: O elemento caption tem um texto genérico, que não descreve adequadamente o propósito da tabela.

    Image

    Tabela com a legenda “Tabela de Informações”
    Recomendamos a alteração do texto do elemento caption de modo a descrever adequadamente a tabela. Exemplo: “Informação sobre as pistas do aeródromo”.

    Guimarães

    NOK
    A primeira tabela na página Banco Local de Voluntariado (BLV) não tem o elemento <caption>.

    Image

    Recomendamos a inserção de elementos caption com títulos adequados.

    Esposende

    OK
    Não foram encontradas tabelas sem caption

    Arcos valdevez

    NOK
    A página Agenda Cultural contém uma tabela encaixada noutra tabela. Ambas as tabelas não têm caption.

    Image

    Tabelas encaixadas
    Recomendamos a inserção de elementos caption com títulos adequados.

    NOK
    Página Agenda de Eventos, a tabela que apresenta o calendário para escolha de data não tem caption.

    Image

    Tabela sem caption
    Recomendamos inserir um elemento caption com um título adequado para a tabela.

    Matosinhos

    NOK
    A tabela presente na página política de cookies não possui título.

    Image

    Tabela sem elemento caption
    Recomendamos a introdução de um elemento caption com um texto adequado.

    regiao_de_aveiro

    ok
    Não foram encontradas tabelas sem caption

    Valpaços

    OK
    Não foram encontradas tabelas sem caption

    Sabrosa

    OK
    Não foram encontradas tabelas sem caption

    Albergaria-a-Velha

    NOK
    A tabela da página APOIO AO ARRENDAMENTO URBANO PARA FINS HABITACIONAIS não tem um título.

    Image

    Tabela sem caption

    Recomendamos introduzir um elemento <caption> na tabela com um título adequado.

    Melhoria
    A tabela presente na página Política de cookies não tem um título adequado.

    Image

    Recomendamos a alteração do texto do caption com um título adequado.

    Caminha

    OK
    Não foram encontradas tabelas sem caption

    Peniche

    NOK
    As três tabelas presentes na página Política de Cookies não têm título.

    Image

    primeira tabela sem elemento caption

    Image

    Segunda tabela sem elemento caption

    Pesquisando manualmente, encontrámos uma página atualizada, em https://www.cm-peniche.pt/ficha-tecnica/avisos-legais/politica-de-cookies, em que as três tabelas já têm elementos <caption>, mas não sabemos se a página antiga ainda é referenciada nalguma outra página (e para todos os efeitos ela é encontrada a partir do motor de pesquisa), pelo que faz sentido manter o problema.

    Peso da régua

    OK
    Não foram encontradas tabelas sem caption

    Pombal

    NOK
    A tabela presente na página Política de Cookies não tem um título.

    Image

    Tabela sem caption

    Recomendamos introduzir um elemento <caption> na tabela com um título adequado.

    Montalegre

    OK
    Não foram encontradas tabelas sem caption

    águeda

    NOK
    A tabela presente na página Política de Cookies não tem título.

    Image

    _Tabela sem caption
    A tabela presente na página Assembleia Municipal tem o título vazio.

    Image

    Recomendamos a inserção de um elemento caption com um título adequado.

    sátão

    OK
    Não foram encontradas tabelas sem caption

    Ílhavo

    NOK
    A tabela existente em Política de cookies tem uma descrição que é lida em duplicado.

    Image

    Tabela com título lido em duplicado

    Isso acontece porque a tabela tem o atributo aria-describedby com o id do elemento caption. O caption só por si já fornece o título da tabela, não precisando de elementos auxiliares.
    Para além disso, sendo um elemento nativo, a tabela não precisa do atributo role=”table”, pois semanticamente já é anunciada corretamente sem precisar de elementos auxiliares.
    Recomendamos a remoção dos atributos aria-describedby e role=”table” da tabela.

    A tabela presente na página Eventos tem um título oculto e incorreto.

    Image

    Tabela com caption oculto e título “/”

    Recomendamos inserir um elemento caption com um título adequado para a tabela, por exemplo, “Calendário de eventos”.

    Oliveira do bairro

    OK
    Não foram encontradas tabelas sem caption

    Vagos

    Melhoria
    As duas tabelas presentes na página TARIFÁRIOS não têm títulos adequados.

    Image

    Primeira tabela com o título “Tabela A”
    Recomendamos a alteração do texto do caption de todas as tabelas com títulos adequados.

Requisito 4.1 - Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 4.2 - É possível identificar os campos de preenchimento obrigatório quando se usa apenas um leitor de ecrã

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 4.3 - É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 5.1 - A imagem ou gráfico tem um equivalente alternativo em texto curto e correto

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #50 (Melhorias) Imagens decorativas e não funcionais com textos alternativos repetidos em cards

    etiqueta: chk 10 webetiqueta: melhoriaetiqueta: R 5.1

    A imagem ou gráfico tem um equivalente em texto curto e correto.
    – ver requisito 5.1 na lista 10 aspetos

    Notas gerais
    • No caso das imagens dos cards que sejam acompanhadas de texto, devem ser consideradas como decorativas e não funcionais. Sendo assim, o seu texto alternativo deve ser nulo ou devem ser adicionadas como background-image em CSS.

    Evidências:

    Notas auditoria:

    • a evidência (1) revela imagens link com texto alternativo semelhante ao título da notícia. Pois na página existem cards com imagem e texto, nos quais as imagens possuem texto alternativo. O leitor de ecrã, ao ler o card, repete a informação “Participação de ocorrência”, pois está colocada no link do card, no título e no texto alternativo da imagem.
    • Na evidência (2) Cards de conteúdos da secção “Ação Social” há duplicação de informação pois o texto alternativo das imagens é o mesmo dos títulos dos cards. Texto alternativo “apoios_sociais_municipais”, título “Apoios Sociais Municipais”, o que gera ruído de informações duplicadas para utilizadores com leitor de ecrã NVDA. O mesmo acontece na evidência (3).
    Image Image

    Recomendações de melhoria

    • Para evitar que o leitor de ecrã repita várias vezes a mesma informação, as imagens dos cards devem ser consideradas como decorativas e é necessário incluir o texto alternativo como nulo da seguinte forma: (alt=””). Outra forma é adicionar as imagens via CSS.
    Websites (Melhorias)

    Melhorias devem ser aplicadas nos seguintes websites:

    Websites (OK)

  • issue #49 Há imagens com textos alternativos incorretos

    etiqueta: chk 10 webetiqueta: R 5.1etiqueta: NOK

    A imagem ou gráfico tem um equivalente em texto curto e correto.
    – ver requisito 5.1 na lista 10 aspetos

    Notas gerais
    • As imagens não decorativas deverão ter uma descrição breve associada, nomeadamente através do uso do atributo . Esta legenda deve descrever fielmente o propósito da imagem no contexto em que se encontra.
    • Há imagens informativas que não possuem um texto alternativo.
    • Caso seja necessário incluir uma descrição longa da imagem, esta deve ser colocada próxima da imagem ou numa página à parte que esteja hiperligada à imagem em questão.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) apresenta o cartaz do evento de “Exposição Máscaras: Símbolos de Identidade” com uma imagem informativa apenas visualmente, sendo assim, não contém a descrição completa do conteúdo em seu texto alternativo. Recomendamos alterar o texto alternativo da imagem para algo que descreva o conteúdo da imagem de forma sucinta. As imagens informativas devem incluir um texto alternativo que sirva de síntese do seu conteúdo e que seja lido pelo leitor de ecrã.
    • Na evidência (2) a imagem apresenta um texto alternativo incorreto. O conteúdo visual corresponde a uma micro central hidrelétrica, conforme descrito no parágrafo associado. Contudo, o texto alternativo informado é “Centro de Ciência Viva de Bragança”, o que não condiz com a imagem apresentada. Recomendação de texto alternativo: "Micro central hidrelétrica do Centro de Ciência Viva"
    Image
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela um carrossel de imagens com textos alternativos incorretos “alt= img_1932”, alt="img_1246”, alt="pl026380”, alt="img_1974” e alt="img_1617” sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo das imagens.
    • O mesmo problema da evidência (1) acontece na evidência (2). Recomendamos rever as imagens e incluir um texto alternativo que sirva de síntese do seu conteúdo e que seja lido pelo leitor de ecrã. É necessário rever imagens que podem ser consideradas imagens decorativas e o atributo alt deve ser vazio (alt="")
    Image
    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • Imagens com textos alternativos incorretos. Por exemplo, as evidências (1 e 2) revelam imagens com “alt= imagem” sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo das imagens. Assim como a evidência (3) com “alt= LS”.
    • Imagens não decorativas sem textos alternativos ou incorretos. Identificamos que as páginas de cada notícia, como na evidência (4) a imagem apresentada não possui texto alternativo que descreva o conteúdo da imagem no contexto em que se encontra. Assim como na evidência (5) a galeria da “Loja Social” apresenta um conjunto de imagens expostas exclusivamente de forma visual, sem qualquer texto alternativo (alt) associado. Essa ausência impede que utilizadores de leitores de ecrã obtenham qualquer informação sobre o conteúdo das imagens, tornando a galeria totalmente inacessível para pessoas que utilizam tecnologias assistivas.
    Image
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) há imagens com um textos alternativos incorretos. Por exemplo no “Cartão Municipal Família Numerosa” sua imagem possui “alt= link” este texto não reflete o conteúdo da imagem. É necessário rever imagens que podem ser consideradas imagens decorativas e o atributo alt deve ser vazio (alt="")
    • O mesmo comportamento se repete para as evidências (2, 3, 4, 5 e 6), com imagens que possuem texto alternativos incorretos ou podem ser consideradas decorativas.
    Matosinhos (OK)

    Evidências:

    Nota auditoria:

    • Na evidência (1), existem imagens não decorativas sem texto alternativo, o que impede a correta contextualização dos utilizadores de leitores de ecrã quanto ao conteúdo apresentado. Além disso, não é indicado que se trata de um carrossel interativo de imagens relativo ao evento “Gala do Desporto 2025”.
    • Na evidência (2) identificamos duas imagens com texto alternativo incorretos. Na imagem há informações úteis sobre “ Reabilitação Urbana” que são apresentadas apenas visualmente, por exemplo o objetivo do programa, horário e local. Na página não existe a descrição completa do conteúdo em seu texto alternativo. Recomendamos alterar o texto alternativo das imagens para algo que descreva o conteúdo da imagem de forma sucinta. As imagens informativas devem incluir um texto alternativo que sirva de síntese do seu conteúdo e que seja lido pelo leitor de ecrã.
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • Nas evidências (1 e 2) localizamos imagens que possuem textos alternativos incorretos. Na página de “Notícias”, por exemplo, todas as notícias possuem cards imagens com descrições incorretas e que causam ruídos de informação para utilizadores com leitores de ecrã. É necessário rever imagens que podem ser consideradas imagens decorativas e o atributo alt deve ser vazio (alt=""). No entanto, ao aceder à notícia completa, a imagem deve dispor de uma descrição apropriada.
    Image
    • Na evidência (3) há um carrossel de imagens que possuem textos alternativos incorretos e que não descrevem fielmente o propósito das respetivas imagens.
    Valpaços (NOK)

    Evidências:

    Nota auditoria

    • Na evidência (1) identificamos que não há texto alternativo atribuído as imagens, ausência do elemento .
    • Na evidência (2) a página “Sou Visitante”, foi identificado um carrossel de imagens com textos alternativos incorretos, que não descrevem o propósito das imagens e, com suas descrições atuais, geram ruído para usuários de leitores de ecrã. Por exemplo: a imagem da “Via Ferrata” possui o atributo alt="dji_0043_copiar", que não transmite nenhuma informação relevante sobre o conteúdo visual.

    Recomendação:
    As imagens informativas devem apresentar textos alternativos que expressem o propósito e o contexto do conteúdo, funcionando como uma síntese significativa para utilizadores de tecnologias assistivas.

    Image
    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra um caso de sucesso, em que imagens decorativas estão identificadas como tal.
    • Na evidência (2) apesar do conteúdo do cartaz estar descrito abaixo da imagem. A imagem principal da página não possui um texto alternativo que indique que ali existe uma imagem da professora responsável pela palestra. Recomendamos incluir textos alternativos nas imagens para refletir fielmente o propósito da imagem no contexto em que se encontra. Por exemplo: "Fotografia da Prof. Susana Olhero, palestrante do evento 'Novos Biomateriais na Medicina' no âmbito do ciclo N X Ciência às 5.”
    Albergaria (NOK)

    Evidências:

    Nota de auditoria:

    • Imagens com textos alternativos incorretos. Por exemplo, a evidência (1) revela uma imagem com alt="491999312_664595582991634_8581140420897866126_n” e nas evidências (2 e 3) há um grupo de imagens com alt= “.” sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo das imagens. Se considerado imagem decorativa o atributo alt deve ser vazio (alt="").
    Image
    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1), verifica‑se que o conjunto de imagens presente no banner principal da página não possui textos alternativos adequados. É necessário rever os atributos para garantir que cada imagem descreva fielmente o seu propósito no contexto em que é apresentada.
    Image
    • Na evidência (2) o texto alternativo atual (alt="historia") é insuficiente e não contextualiza o conteúdo visual. Recomenda‑se substituí‑lo por uma descrição mais completa, como por exemplo: alt="Vista aérea da cidade, com uma praça central, monumento e o mar ao fundo.”
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) demonstra a existência de imagens com textos alternativos incorretos. Como exemplo, na notícia “Câmara Municipal reúne com o Secretário de Estado do Desporto, Pedro Dias”, a imagem apresenta o atributo alt="publicacoes_fotos_site", que não contextualiza os utilizadores de leitores de ecrã quanto ao conteúdo da imagem. É necessário rever os atributos para garantir que cada imagem descreva fielmente o seu propósito no contexto em que é apresentada. Caso as imagens dos cards de notícias sejam consideradas meramente decorativas, o atributo alt deve ser vazio (alt=""). No entanto, ao aceder à notícia completa, a imagem deve dispor de uma descrição apropriada.
    Image
    • Na evidência (2) a imagem sobre a “Exposição Retrato da industrialização e Indústria contemporânea em Portugal" não possui texto alternativo, o que impede sua identificação e não contextualiza os utilizadores de leitores de ecrã quanto ao conteúdo da imagem.
    Image
    Peso da Régua NOK

    Evidências:

    Nota de auditoria:

    • Na evidência (1) existe uma imagem não decorativas sem texto alternativo, o cartaz contém informações detalhadas sobre o evento “XXI ENCONTRO DE JANEIRAS” no entanto o conteúdo não é acessível para tecnologias de apoio, e não contextualiza utilizadores de leitores de ecrã sobre o conteúdo das imagens e informações sobre o evento.
    • Na evidência (2) há textos alternativos incorretos em relação ao conteúdo das imagens. Por exemplo, o card de notícia “Assembleia Municipal do Peso da Régua” que possui o texto alternativo alt="2f0a0810”. Recomendamos rever as imagens informativas e devem incluir um texto alternativo que sirva de síntese do seu conteúdo e que seja lido pelo leitor de ecrã.
    Image
    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • As evidências (1 e 2) apresentam imagens com textos alternativos inadequados em relação ao seu conteúdo. Por exemplo, na evidência (1), a página “Plano de Ação de Mobilidade Urbana Sustentável” contém uma imagem com o texto alternativo alt="imagem", que não descreve nem contextualiza o conteúdo para utilizadores de leitores de ecrã.
    Image

    Recomendação
    Revisar todas as imagens e seus textos alternativos para que reflitam corretamente o propósito e o contexto das imagens, garantindo conformidade com as diretrizes de acessibilidade.

    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) demonstra que a página inicial utiliza diversas imagens‑link ao longo do layout com textos alternativos incorretos ou não descritivos. Nas imagens em destaque do banner e nas fotografias de eventos, observam‑se exemplos como alt="foto_interdita__9_", alt="programa_ff" e alt="img_8212". Estes textos não descrevem o conteúdo nem o propósito das imagens, gerando ruído para utilizadores de leitores de ecrã e comprometem a compreensão do conteúdo das imagens, que visualmente comunicam sobre eventos e o cartão de visita do Município com a fotografia do Castelo de Montalegre.
    Image
    • Na evidência (2) há imagens com textos alternativos incorretos. Os textos alternativos alt="GAE_2” e alt="GAE_3” não correspondem ao conteúdo visual das respetivas imagens que possuem informações relevantes para contextualizar sobre a página “Gabinete de Apoio ao Emigrante”.
    • O mesmo problema acontece nas evidências (3) e (4) que possuem imagens com textos alternativos incorretos. Recomendamos incluir textos alternativos nas imagens para refletir fielmente o propósito da imagem no contexto em que se encontra.
    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1), a página “Águeda é Natal” apresenta imagens com textos alternativos inadequados relacionados ao evento. Todas as imagens possuem a mesma descrição alt="Águeda é Natal", o que não reflete corretamente o propósito ou o conteúdo específico de cada imagem no contexto em que se encontram. Essa falta de contextualização impede que utilizadores de leitores de ecrã compreendam as informações visuais e descritivas sobre o evento, que são perceptíveis apenas para quem enxerga as imagens.
      Recomendação: Criar textos alternativos únicos e descritivos para cada imagem, considerando sua função e contexto, de forma a transmitir informações relevantes sobre o evento para pessoas que utilizam tecnologias assistivas.

    • Na evidência (2), foram identificadas imagens com textos alternativos inadequados. Atualmente, os leitores de ecrã anunciam essas imagens com os textos alt="Barra Topo" e alt="Barra de Financiamentos". No entanto, essas descrições não representam corretamente o conteúdo das imagens, que incluem os logotipos “PRR”, “República Portuguesa” e “Financiado pela União Europeia”.
      Recomendação: Avaliar a necessidade de repetir essas imagens em cada pergunta frequente do menu acordeão. Caso não seja essencial, sugerimos mantê-las apenas no final da página, evitando ruído e excesso de informações repetidas, o que melhora a experiência de navegação para pessoas que utilizam tecnologias assistivas.

    Satão (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela o carrossel de imagens da página “Praia Fluvial do Trabulo” onde há imagens com textos alternativos incorretos em relação ao conteúdo das imagens. Por exemplo, a imagem 04 do carrossel com alt="photo_19_04_17__14_11_50”. Sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo das imagens. Recomendamos a inclusão de um texto alternativo mais descritivo das imagens para refletir fielmente o propósito da imagem no contexto em que se encontra.
    Image
    • Na evidência (2), a página “Atividades do mês de janeiro da Universidade Sénior de Sátão” apresenta um cartaz em formato de imagem cujo texto alternativo é incorreto e não descreve os conteúdos. Como toda a programação (datas, horários, eventos e locais) está apenas dentro da imagem, utilizadores de tecnologias de apoio não conseguem aceder à informação da agenda, violando o presente requisito. Caso seja necessário incluir uma descrição longa da imagem, esta deve ser colocada próxima da imagem ou numa página à parte que esteja hiperligada à imagem em questão.
    Ilhavo (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela imagens da página de “Eventos” com textos alternativos incorretos em relação ao conteúdo das imagens. Sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo das imagens. O mesmo acontece na evidência (2) na página de “Calendários das reuniões da Câmara” onde todas as imagens apresentam alt="brasao_do_municipio_de_ilhavo". É necessário rever imagens que podem ser consideradas imagens decorativas e o atributo alt deve ser vazio (alt=""). No entanto, ao aceder à notícia completa, a imagem deve dispor de uma descrição apropriada ao contexto que se encontra.
    Image
    • A evidência (3) revela a página “Assembleia Municipal” onde há texto alternativo incorreto em relação ao conteúdo da imagem, com alt="F_0001 - Cópia" . Sem contextualizar utilizadores de leitores de ecrã sobre o conteúdo da imagem. Recomendamos a inclusão de um texto alternativo descritivo da imagem para refletir fielmente o seu propósito no contexto em que se encontra.
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que a imagem em destaque na página apresenta um texto alternativo incompleto face ao conteúdo visual. O alt="cegonha" não descreve adequadamente o elemento representado nem contextualiza o propósito da imagem na página, que tem um papel distintivo na identidade visual do município. Recomenda-se a atualização do texto alternativo, de modo a torná-lo mais descritivo e alinhado com a função comunicativa da imagem.

    Proposta de texto alternativo:

    “Fotografia da escultura metálica de uma cegonha com asas abertas, em Oliveira do Bairro.”

    Image
    • A evidência (2) revela na notícia “Fernando Pereira nas Conversas da Rádio | 23 de janeiro” a imagem principal da página não possui um texto alternativo que indique que ali existe uma fotografia do cantor Fernando Pereira. Recomendamos incluir texto alternativo na imagem para refletir fielmente o seu propósito no contexto em que se encontra. Por exemplo: "Fotografia do cantor Fernando Pereira, segurando um microfone, em palco iluminado com luzes de espetáculo ao fundo.”
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) foi identificado um slider de imagens no banner da página principal com textos alternativos incorretos. Exemplos: alt="img_4082", alt="paredao_vagueira", alt="dsc04173", alt="dsc04234", alt="img_6697", alt="img_7946_1_". Esses textos alternativos não descrevem adequadamente o conteúdo das imagens, fazendo com que leitores de ecrã apresentem informações irrelevantes logo no início da página. Esse problema gera ruído na navegação e prejudica a experiência de utilizadores que dependem de tecnologias assistivas. Visualmente, as imagens oferecem uma experiência imersiva, destacando locais do município. Essa mesma experiência deve ser refletida para todos os usuários por meio de descrições alternativas corretas e significativas.
    Image
    • Na evidência (2) há uma imagem não decorativa sem texto alternativo ou descrição no texto complementar, o que impede a correta contextualização dos utilizadores quanto ao conteúdo apresentado. Recomendamos incluir texto alternativo para imagem e relacionar o propósito da imagem no contexto em que se encontra.
    Valongo (NOK)

    Evidências:

    Nota auditoria:.

    • Na evidência (1), a imagem do brasão “Sobrado Valongo” não possui texto alternativo, o que faz com que seja completamente ignorada pelos leitores de ecrã. Esta ausência viola o presente requisito, que exige que todas as imagens informativas sejam acompanhadas de um alt que descreva o seu conteúdo ou propósito, garantindo acesso equivalente para utilizadores com deficiência visual.

Requisito 5.2 - O gráfico é acompanhado de uma descrição longa

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #63 Representações gráficas sem descrição longa

    etiqueta: chk 10 webetiqueta: R 5.2etiqueta: NOK

    As imagens-link têm um equivalente alternativo correto.
    – ver requisito 5.3 na lista 10 aspetos

    Notas gerais
    • Gráficos resultantes de análise de dados deverão ser acompanhados da tabela de dados que lhe deu origem, de forma a preservar o acesso à informação completa.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que os gráficos apresentados na página “Gestão de Energia” utilizam imagens complexas sem descrições alternativas completas. Embora exista algum texto embutido na imagem, este não é exposto de forma acessível, impedindo utilizadores de leitores de ecrã de compreender os valores representados. Por exemplo, no gráfico de distribuição da fatura de eletricidade, não é transmitido que “Iluminação Pública” corresponde a 62% do total. A mesma limitação ocorre nas imagens da evidência (2), onde os dados relativos à Iluminação Pública não são disponibilizados em formato textual. Esta falta de equivalentes textuais viola o presente requisito.
    Image

    Recomendações

    Recomenda‑se disponibilizar uma descrição longa para cada gráfico, contendo todos os valores percentuais e categorias representadas, garantindo que a informação visual seja apresentada também em formato textual. Alternativamente, sempre que possível, os dados dos gráficos devem ser disponibilizados em HTML estruturado (listas ou tabelas), assegurando leitura completa por tecnologia

    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) mostra que os mapas de calor “Mapa de ruído diurno” e “Mapa de ruído noturno” são apresentados apenas como imagens, sem qualquer descrição longa que permita interpretar as diferentes zonas, cores ou níveis de intensidade sonora. Além disso, ambos possuem textos alternativos incorretos, limitados a alt="imagem", o que não comunica o propósito nem o conteúdo informativo dos mapas. Como resultado, utilizadores de leitores de ecrã não conseguem aceder aos dados representados visualmente.
    Image
    • Na evidência (2) os mapas turísticos de Guimarães, estão inacessíveis. Os leitores de ecrã anunciam “Este PDF está inacessível. Não foi possível transferir os ficheiros de extração de texto. Tente mais tarde.”

    Recomendações
    Recomenda‑se substituir o texto alternativo genérico por um alt significativo que identifique claramente cada mapa e disponibilizar uma descrição longa que explique as zonas de ruído, as cores utilizadas e os níveis sonoros representados. Alternativamente, a informação deverá ser fornecida também em formato textual estruturado na página, garantindo acesso equivalente a utilizadores de tecnologias de apoio.

    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) apresenta a página “Caracterização” com um infográfico dos dados “Sensus 2021”, sem descrição longa alternativa. Sendo assim, utilizadores de leitores de ecrã não são informados sobre todos os dados refletidos na imagem. Recomendamos a inclusão da descrição complementar próxima a imagem para que seja feita a devida relação dados da imagem e texto alternativo.
    Image
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria

    • Na evidência (1), verifica‑se que os mapas apresentados na página “Espaço florestal” não incluem descrições alternativas adequadas ao seu conteúdo. A ausência de texto alternativo impede que utilizadores de tecnologias de apoio compreendam informações espaciais essenciais, incluindo a distribuição das “Áreas Sociais” representadas no mapa de calor. Este tipo de elemento visual contém dados relevantes para a interpretação do território, mas permanece inacessível quando não há descrição que explique a simbologia, as cores utilizadas e os elementos principais do mapa.
    Image
    Matosinhos (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) evidencia que o ficheiro PDF “Mapa do Concelho de Matosinhos” é apresentado para utilizadores de leitores de ecrã com dados totalmente não estruturados. O documento apresenta um mapa ilustrado com ícones e categorias (tais como hospitais, áreas verdes, monumentos, linhas de metro e outros pontos de interesse), porém não inclui texto alternativo, marcação semântica ou descrição longa que permita compreender o conteúdo visual. Sem estrutura de tags e sem equivalentes textuais, os leitores de ecrã não conseguem interpretar o mapa nem as informações presentes na legenda, comprometendo o acesso aos dados geográficos e turísticos.

    Recomendação:

    É necessária a inclusão de uma descrição longa alternativa a informação geográfica e categorizada apresentada visualmente, detalhando tipos de serviços, categorias do mapa e lista completa dos pontos de interesse com nome, localização e breve descrição. Além disso, recomendamos disponibilizar no website uma alternativa acessível em HTML, com a mesma informação do mapa estruturada em formato textual, garantindo assim o acesso a utilizadores que não conseguem interpretar documentos gráficos.

    Image
    • A evidência (2) revela mapa interativo apresentado na página “Mapa de ocorrências” contém vários marcadores das ocorrências no mapa assinalados apenas de forma visual e dependentes de interação com o rato. Estes marcadores não são acessíveis via teclado e não disponibilizam alternativas textuais que descrevam o conteúdo associado a cada ponto. Além disso, o mapa não possui título e descrição longa que explique a distribuição geográfica, a localização dos marcadores ou a informação que cada ponto representa. Como consequência, utilizadores de leitores de ecrã não conseguem identificar aceder aos pontos de interesse apresentados no mapa.
    Image

    Recomendação:
    Disponibilizar uma alternativa textual equivalente que apresente toda a informação visual de forma acessível. Para isso, deve ser incluída abaixo do mapa uma lista descritiva completa de todos os pontos de interesse, contendo o nome, rua, descrição detalhada e quaisquer informações adicionais relevantes.

    Valpaços (NOK)

    Evidências:

    Nota de auditoria

    • Na evidência (1) verificou‑se que a página “Mapa da Feira” apresenta uma imagem que não possui qualquer descrição textual complementar, nem tabela que represente os espaços e cores identificados no mapa. Além disso, o texto alternativo definido (alt="pavilhao_mapa") é insuficiente, pois não comunica o conteúdo nem o propósito da imagem.Tratando‑se de um mapa informativo com setores, cores e numeração de expositores, é necessária uma descrição longa e detalhada, que permita aos utilizadores de leitores de ecrã compreender a disposição dos espaços do Pavilhão Multiusos, suas categorias e respetivas cores.
    Image
    • A evidência (2) mostra o mapa interativo apresentado na página “Mapa da Cidade e Pontos de Interesse” contém vários pontos de interesse assinalados apenas de forma visual e dependentes de interação com o rato. Estes marcadores não são acessíveis via teclado e não disponibilizam alternativas textuais que descrevam o conteúdo associado a cada ponto. Além disso, o mapa não possui título e descrição longa que explique a distribuição geográfica, a localização dos marcadores ou a informação que cada ponto representa. Como consequência, utilizadores de leitores de ecrã não conseguem identificar aceder aos pontos de interesse apresentados no mapa.
    Image

    Recomendação:
    Disponibilizar uma alternativa textual equivalente que apresente toda a informação visual de forma acessível. Para isso, deve ser incluída abaixo do mapa uma lista descritiva completa de todos os pontos de interesse, contendo o nome, localização, descrição detalhada e quaisquer informações adicionais relevantes.

    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) verificou-se que a imagem com mapa do “Passaporte Douro”, seus pontos de interesse não está acompanhada de qualquer tipo de descrição ou tabela que represente o seu conteúdo de forma textual. Neste caso, é necessário uma descrição longa detalhada sobre o conteúdo da imagem para que utilizadores com leitores de ecrã, consigam perceber o objetivo do mapa e seus pontos de interesse.
    Image

    Recomendações

    • Revisão das páginas, para garantir que todos os elementos deste género são acompanhados de uma descrição detalhada do conteúdo mais relevante. Garantir que o texto alternativo (alt=””) tem um sumário breve sobre a representação gráfica.

    • Adicionar a descrição longa complementar, por exemplo num parágrafo junto ao elemento, numa página à parte com hiperligação para esse elemento ou num ficheiro externo que seja acessível para leitores de ecrã.

    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela a presença de um fluxograma na página, apresentado apenas como imagem e sem qualquer descrição longa alternativa que permita transmitir o seu conteúdo a utilizadores de leitores de ecrã. Embora o elemento tenha um atributo alt, este não descreve adequadamente a informação estrutural, os agentes envolvidos ou as relações representadas no diagrama. Assim, o conteúdo visual do fluxograma permanece inacessível, impedindo a compreensão das etapas e entidades que integram o modelo de implementação do PMIND.
    Image
    • A evidência (2) revela o “Mapa do Concelho” em formato de ficheiro PDF sem uma descrição longa alternativa. O mapa PDF não possui descrição adequada dos pontos de interesse de Peniche, e o leitor de ecrã anuncia “Este PDF está inacessível”
    • A evidência (3) revela um mapa na página “Pontos de Interesse” sem descrição longa, para contextualizar utilizadores de leitores de ecrã sobre os pontos de interesse da Península de Papôa.
    Image

    Recomendações

    Recomenda‑se tornar o fluxograma e mapas acessíveis através da inclusão de um texto alternativo significativo e de uma descrição longa que explique todos os elementos, relações e categorias representadas nas imagens visualmente. A descrição longa de cada imagem, deve ser integrada na página ou disponibilizada através de um link acessível junto à imagem. Sempre que possível, as representações gráficas devem ser reconstruídas em HTML semântico para garantir leitura correta por tecnologias de apoio.

    Peso da Régua NOK

    Evidências:

    Nota de auditoria:

    • A evidência (1) mostra que o mapa interativo apresentado na página “Quintas” contém vários pontos de interesse assinalados apenas de forma visual e dependentes de interação com o rato. Estes marcadores não são acessíveis via teclado e não disponibilizam alternativas textuais que descrevam o conteúdo associado a cada ponto. Além disso, o mapa não possui título e descrição longa que explique a distribuição geográfica, a localização dos marcadores ou a informação que cada ponto representa. Como consequência, utilizadores de leitores de ecrã não conseguem identificar aceder aos pontos de interesse apresentados no mapa.
    Image

    Recomendação:
    Disponibilizar uma alternativa textual equivalente que apresente toda a informação visual de forma acessível. Para isso, deve ser incluída abaixo do mapa uma lista descritiva completa de todos os pontos de interesse, contendo o nome, localização, descrição detalhada e quaisquer informações adicionais relevantes.

    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) mostra que, na página “Mapas Turísticos”, são apresentadas duas imagens referentes ao Mapa da Cidade de Pombal e ao Mapa do Concelho de Pombal. No entanto, nenhuma destas imagens disponibiliza uma descrição longa que traduza, em formato textual, a informação geográfica, os pontos de interesse assinalados ou a estrutura dos percursos representados nos mapas. O texto alternativo existente é insuficiente e não comunica o conteúdo nem o propósito informativo dos mapas. Como resultado, utilizadores de leitores de ecrã não conseguem aceder aos detalhes necessários para compreender a localização espacial, vias principais, pontos turísticos e restantes elementos relevantes
    Image
    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) refere‑se à página “Mapa do risco de incêndio”, na qual o conteúdo principal é apresentado através de um iframe que incorpora diretamente o mapa interativo do IPMA. Embora alguns elementos do mapa sejam detetados pelo NVDA e tecnicamente navegáveis (como botões, datas e listas de seleção de distrito e concelho), a experiência revela uma falta significativa de contexto e perceção global sobre os dados exibidos. Os componentes gráficos dentro do iframe, tais como infográficos, gráficos meteorológicos, indicadores de risco, cores do mapa e detalhes específicos sobre cada região selecionada, não possuem equivalentes textuais completos, nem são devidamente expostos à tecnologia de apoio. O leitor de ecrã reconhece apenas partes isoladas da interface, impedindo o utilizador de compreender o conjunto da informação apresentada.
    Image

    Recomendações
    Fornecer alternativas textuais completas e programaticamente determináveis para todos os elementos gráficos do mapa e atribuir um nome acessível ao iframe (por exemplo, através de title), de modo a comunicar claramente a sua função e localização na página às tecnologias de apoio.

    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela que a imagem analisada corresponde a uma representação gráfica informativa do programa “Rota dos Moinhos”. Como contém grande volume de informação textual essencial, o uso de um texto alternativo simples é insuficiente e não cumpre o presente requisito. todo o conteúdo detalhado deve ser disponibilizado em texto real na página o que não acontece atualmente. Além disso, o alt="Programa do evento” apesar de estar correto, pode ser melhorado para ser mais descritivo em relação ao conteúdo da imagem.
    Image
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) há representações gráficas em ficheiros PDFs na página “Folhetos informativos”, por exemplo o ficheiro “PR4 - Rota das Lagaretas” sem uma descrição longa alternativa. Embora o conteúdo textual esteja navegável, as imagens inseridas no PDF não possuem descrição adequada e são anunciadas pelos leitores de ecrã como “Gráfico sem etiqueta”.
    Image
    Ilhavo (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) localizamos a imagem do “Roteirómetro” que corresponde a um infográfico com conteúdo informativo significativo. No entanto, possui apenas alt="Roteirómetro", o que não descreve os dados apresentados, violando o presente requisito. Recomenda-se substituir o texto alternativo por um nome curto e disponibilizar uma descrição longa que contenha todas as percentagens, categorias e contexto do gráfico.
    Image

    Recomendação de descrição:

    “O infográfico apresenta o progresso das 24 medidas a executar nos primeiros 100 dias do mandato 2025–2029: 20,8% das medidas encontram-se executadas, 70,8% estão em execução e 8,4% permanecem por executar. O velocímetro representa visualmente estas proporções com as cores verde, amarelo e vermelho.”

    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela uma imagem do “Corso carnavalesco” que inclui o percurso do desfile, apresentado em formato de mapa com uma descrição longa incompleta. Embora exista uma legenda para indicar as ruas do percurso, outros elementos importantes como as "Seis zonas de estacionamento" não refletem na descrição textual. Esta omissão impede utilizadores de leitores de ecrã acedam toda a informação disponível no mapa. Recomendamos completar a descrição longa para incluir todos os pontos de interesse apresentados no mapa.
    Image
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela a página “Território”, da Estação Náutica de Vagos, inclui um mapa ilustrativo que não possui texto alternativo (alt) nem descrição longa. Ou seja, não há mecanismos textuais complementares que descrevam o território, nem resumo geográfico. Como consequência, utilizadores de leitores de ecrã não são informados da presença da imagem, nem conseguem aceder ao conteúdo geográfico nela apresentado. A informação essencial é fornecida apenas de forma visual, sendo assim, não existe indicação antes ou depois da imagem que informe o utilizador sobre o tipo de conteúdo exibido (“Mapa do território da Estação Náutica”, por exemplo).
    Image

    Recomendações:

    • Adicionar um texto alternativo significativo e disponibilizar uma descrição longa que apresente os elementos estruturais do mapa, garantindo assim uma perceção equitativa da informação.
    Caminha (NOK)

    Evidência:

    Nota auditoria:

    • A evidência (1) demonstra que a página do evento “Caminhada e Almoço Convívio”, integrada na agenda do Município de Caminha, apresenta um cartaz promocional relativo às Festas de São Sebastião e Nossa Senhora. Esta imagem é considerada complexa, pois agrega uma quantidade significativa de informação textual relevante para o utilizador, incluindo a designação do evento, a data, localização, o programa das atividades com horários previstos, a descrição detalhada do menu servido no evento, valores das atividades e dados referente a participação, a data limite para marcação e os contactos telefónicos para inscrição.
    Printscreen do website de Caminha com imagem complexa

    No entanto, a imagem não apresenta um texto alternativo significativo alt nem é acompanhada por uma descrição textual equivalente no conteúdo da página que permita compreender o conteúdo informativo do cartaz. Desta forma, utilizadores que recorrem a leitores de ecrã ou outras tecnologias de apoio não conseguem aceder à informação disponibilizada visualmente, uma vez que a maior parte do conteúdo essencial do evento é transmitida exclusivamente através da imagem.

    Recomendações:
    Recomenda-se que a imagem seja acompanhada por um texto alternativo adequado que apresente uma breve descrição da sua função, identificando-a como cartaz do evento. No entanto, dado tratar-se de uma imagem complexa que inclui informação detalhada, é igualmente necessário disponibilizar uma descrição textual completa do cartaz no próprio corpo da página. Esta descrição deve reproduzir, em formato textual estruturado, os elementos informativos essenciais presentes no cartaz.

    • Adicionalmente, recomenda-se que a informação principal do evento seja apresentada diretamente em HTML estruturado na página, evitando que dados relevantes como horários, preços ou contactos sejam transmitidos exclusivamente através de uma imagem. Esta abordagem garante que o conteúdo permanece acessível a utilizadores de leitores de ecrã, melhora a compreensão geral da informação e contribui para a conformidade com os critérios de acessibilidade aplicáveis ao conteúdo não textual.
    Notas auditoria

    Não foram encontrados outros gráficos ou representações gráficas que necessitem de descrições longas, nos seguintes websites:

Requisito 5.3 - As imagens-link têm um equivalente alternativo correto

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #64 Imagens-link com textos alternativos incorretos

    etiqueta: chk 10 webetiqueta: R 5.3etiqueta: NOK

    As imagens-link têm um equivalente alternativo correto.
    – ver requisito 5.3 na lista 10 aspetos

    Notas gerais
    • As hiperligações compostas apenas por uma imagem obrigam que esta tenha um equivalente alternativo em texto que represente fielmente o destino da hiperligação.
    • Recomendamos a revisão das imagens-link e atualização dos seus textos alternativos , assegurando que descrevem de forma clara e objetiva o conteúdo e o destino da hiperligação
    • É necessário rever as boas práticas de acessibilidade em todas as páginas dos websites, uma vez que as evidências apresentadas refletem problemas recorrentes e críticos, como textos alternativos incorretos, uso inadequado de atributos e padrões inconsistentes. A correção deve ser aplicada de forma transversal, garantindo que a acessibilidade seja tratada como padrão e não apenas nos apontamentos aqui colocados.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra o carrossel na secção “Os nossos sites” com links que possuem imagens que utilizam textos alternativos incorretos ou não descritivos. Estas imagens direcionam para páginas externas, mas os respetivos textos alternativos não indicam essa ação nem descrevem o conteúdo ou o destino do link. Por exemplo, a imagem‑link “CPCJ” apresenta o texto alternativo alt="cpcj_1", que não transmite qualquer informação útil ao utilizador. Esta prática gera ruído na leitura por tecnologias de apoio e prejudica a compreensão da função das hiperligações. Os logotipos já possuem um título visível associado a imagem, por exemplo “GeoPortal”. Nesses casos, as imagens não acrescentam informação relevante e devem ser tratadas como decorativas, utilizando um texto alternativo vazio (alt="").
    Image
    • Na evidência (2) há imagens link sem textos alternativos ou incorretos, como por exemplo os logotipos "ambiformed" com alt="6" e "Bragança Município" com alt="8" que não transmitem qualquer informação útil ao utilizador.
    Image

    Recomendação: Aplicar alt="" às imagens decorativas. E quando não forem decorativas, incluir um equivalente alternativo em texto que represente fielmente o destino da hiperligação.

    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • (1) Imagens link com texto alternativo incorretos. Por exemplo, alt="captura_de_ecra_2025_12_03_093732”, o texto alternativo da imagem-link deve indicar de forma clara e sucinta qual o destino do link.
    Image
    • Na evidência (2) destacamos a section “headerLinks” em que as imagens link possuem texto alternativo estruturado incorretamente com o elemento . É necessário substituir o texto alternativo para <alt=”Perguntas”> pois este elemento garante a leitura correta pelas tecnologias de apoio.</li> </ul> <img src="https://github.com/user-attachments/assets/6d91a113-1a31-45a2-9e0d-143168827f46" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Esposende (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>a evidência (1) demonstra imagens link com textos alternativos incorretos. Por exemplo o card “OMARE” que possui uma imagem com alt="logo”</li> <li>No caso de imagens-link que direcionam para páginas externas, como é o caso do carrossel que compõe a secção “Atalhos**”** deve-se adicionar atributos ARIA às hiperligações que possuem páginas externas, a indicar isso mesmo, por exemplo: <a href=”...” aria-label=”Ir para OMARE(Observatório Marinho de Esposende)”>.</li> </ul> <img src="https://github.com/user-attachments/assets/4ecfe45b-e60a-4309-87e2-472c94cbed11" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Arcos Valdevez (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>(2) NOK. <a href="https://www.cmav.pt/p/informar">https://www.cmav.pt/p/informar</a></li> <li>(3) NOK. <a href="https://www.cmav.pt/informar/orgaos-autarquicos/juntas-de-freguesia">https://www.cmav.pt/informar/orgaos-autarquicos/juntas-de-freguesia</a></li> <li>(4) NOK. <a href="https://www.cmav.pt/mapa-do-site-26">https://www.cmav.pt/mapa-do-site-26</a></li> <li>(5) NOK. <a href="https://www.cmav.pt/viver/apoio-ao-cidadao/orcamento-participativo">https://www.cmav.pt/viver/apoio-ao-cidadao/orcamento-participativo</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>As evidências (1, 2 e 3) apresentam imagens link com texto alternativo incorretos. Por exemplo, o bloco de notícias da página inicial, é composto por um grupo de imagens link com texto alternativo incorretos. Por exemplo, a imagem cartaz do evento “Thinking sobre o alt="larissa_setembro" , o texto alternativo da imagem-link deve indicar de forma clara e sucinta qual o destino do link. Nesses casos, as imagens não acrescentam informação relevante e devem ser tratadas como <strong>decorativas</strong>, utilizando um texto alternativo vazio (<code>alt=""</code>).</li> </ul> <img src="https://github.com/user-attachments/assets/932a2bbf-fe5a-4b5c-abd5-17c2dced4b7a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na evidência (4), os <strong>links de imagem</strong> apresentam textos alternativos incorretos. No rodapé, o grupo de logotipos “Norte 2020”, “Portugal 2020” e “União Europeia” utiliza o alt="Logos EU", que não descreve o conteúdo nem o destino do link para <strong>Projetos Cofinanciados UE</strong>. Além disso, os logotipos da <strong>APCER</strong> e da <strong>Google Play</strong> estão agrupados num único link, comprometendo a identificação individual de cada imagem pelas tecnologias de apoio.</li> </ul> <img src="https://github.com/user-attachments/assets/aadc4468-1931-4d6d-ba02-cffa02901d5e" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na evidência (5) a imagem link que direciona para a página externa de registo no “Orçamento Participativo” com texto alternativo incorreto que não informa utilizadores sobre esse redirecionamento.</li> </ul> <h5><strong>Matosinhos (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-matosinhos.pt">https://www.cm-matosinhos.pt</a></li> </ul> <p>Nota auditoria:</p> <ul> <li><p>Na evidência (1) as imagens usadas como link em “Contactos”, “Ajuda” e “Selecionar idioma” estão estruturadas de forma incorreta ao utilizarem o atributo <title> no lugar do atributo aria-label. Nem todos os leitores de ecrã anunciam o conteúdo do atributo <code>title</code> por padrão.</p> </li> <li><p>No rodapé da página as imagens link “Facebook”, “Twitter” e outras redes sociais. Apresentam incorretamente o atributo <title> atribuído as imagens, ele é apropriado apenas para links quando usado como informação complementar. Pois não é lido de forma confiável por tecnologias assistivas e muitas vezes nem é percebido por utilizadores.</p> </li> </ul> <img src="https://github.com/user-attachments/assets/eb2912cd-0a83-4153-a209-af4ae9d3fcfb" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendações:</strong><br>Sempre utilize <code>aria-label</code> em links quando o texto visível não for suficientemente claro, garantindo acessibilidade e compreensão para todos os utilizadores.</p> <h5><strong>Região Aveiro (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>A evidência (1) demonstra a presença de imagens que funcionam como links na secção <code>class="linksHomeContainer"</code>, mas que utilizam <strong>textos alternativos incorretos ou pouco descritivos</strong>. Um exemplo é o logótipo “Região de Aveiro Digital – Central de Compras”, que apresenta o texto alternativo <code>alt="botao_rad_central_compras_02"</code>, o qual não descreve o conteúdo nem o destino do link. Esta prática compromete a compreensão para utilizadores de leitores de ecrã, afetando a perceção adequada da função e do propósito dos links.</li> </ul> <img src="https://github.com/user-attachments/assets/1360c24c-dc4c-4455-98ae-0559377b389f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Valpaços (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> </ul> <p>Nota auditoria</p> <ul> <li>A evidência (1) identifica links com imagens cujos textos alternativos são incorretos e não descrevem o propósito da imagem, gerando ruído para utilizadores de leitores de ecrã. Na secção “Notícias”, o carrossel apresenta logótipos de sites externos com textos alternativos inadequados, apesar de cada item já possuir um título visível, como “Licenciamento Zero”. Nesses casos, as imagens não acrescentam informação relevante e devem ser tratadas como <strong>decorativas</strong>, utilizando um texto alternativo vazio (<code>alt=""</code>).</li> </ul> <p><strong>Recomendação</strong>: Aplicar <code>alt=""</code> às imagens decorativas e garantir consistência desta prática em todas as páginas do website.</p> <img src="https://github.com/user-attachments/assets/01e0399d-8e8a-4f6d-aacf-6fecf8bbf52a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na evidência (2) no rodapé da página há um grupo de logótipos como imagens link, com texto alternativo incorreto pois só contempla a logo “Norte 2020”. Ao selecionar o grupo de imagens os utilizadores são direcionados para uma página com erro.</li> </ul> <img src="https://github.com/user-attachments/assets/9e590e4b-7efc-47a2-a4b7-e77f9bd5d678" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Sabrosa (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>A evidência (1) demonstra que a imagem‑link “Livro de Reclamações” utiliza um texto alternativo incorreto (<code>alt="livroreclamacoes"</code>), que não descreve adequadamente o conteúdo nem o destino da ligação. Esta prática prejudica a perceção da funcionalidade do elemento por utilizadores de leitores de ecrã e não cumpre o presente requisito.</li> </ul> <img src="https://github.com/user-attachments/assets/4fbd8ddd-f26e-426a-afe5-eb4d5b97042b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação</strong><br>Ajustar o texto alternativo da imagem‑link para refletir claramente o propósito e o destino do link, por exemplo: alt="Livro de Reclamações, abre em nova janela".</p> <h5><strong>Albergaria (<strong>NOK</strong>)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>Na evidência (1) a secção “Portais do Munícipio” identificamos links com imagens cujos textos alternativos são incorretos e não descrevem o propósito da imagem, gerando ruído para utilizadores de leitores de ecrã. Por exemplo o logótipo “Fórum de juventude” com alt="juventude_cm_aav”. Os logotipos fazem o redirecionamento para as páginas externas, e já possuem um título visível, como “Cineteatro Alba”. Nesses casos, as imagens não acrescentam informação relevante e devem ser tratadas como <strong>decorativas</strong>, utilizando um texto alternativo vazio (<code>alt=""</code>).</li> </ul> <p><strong>Recomendação</strong>: Aplicar <code>alt=""</code> às imagens decorativas e garantir consistência desta prática em todas as páginas do website.</p> <img src="https://github.com/user-attachments/assets/9c8b84bb-098c-4e57-ab59-5bcede8879b5" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Caminha (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-caminha.pt/">https://www.cm-caminha.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>A evidência (1) demonstra a utilização do atributo <code>title</code> nas imagens‑link: "Facebook”, "Youtube”,"Instagram”e "RSS feed” apesar de estas já possuírem um texto alternativo adequado através do atributo <code>alt</code>. O uso do <code>title</code> é desaconselhado, pois o seu conteúdo não é anunciado de forma consistente pelos leitores de ecrã e pode gerar redundância ou ruído na interação. Assim, a presença do atributo não acrescenta valor acessível ao elemento.</li> </ul> <p><strong>Recomendação</strong></p> <p>Remover o atributo <code>title</code> das imagens‑link, mantendo apenas o texto alternativo correto no atributo <code>alt</code></p> <img src="https://github.com/user-attachments/assets/acf822f9-6318-4025-8634-0df7b55c6844" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Peniche (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://www.cm-peniche.pt/servicos-online">https://www.cm-peniche.pt/servicos-online</a></li> <li>(2) Melhorias. <a href="https://www.cm-peniche.pt/municipio/comunicacao/acesso-rapido">https://www.cm-peniche.pt/municipio/comunicacao/acesso-rapido</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>No caso de imagens que funcionam como link e direcionam para páginas externas como ocorre com a imagem “Sigma wsCidadão”, identificámos a utilização do atributo <code>title="Serviços on-line ao cidadão"</code> como alternativa textual. No entanto, este recurso não é adequado, pois nem todos os leitores de ecrã anunciam o conteúdo do atributo <code>title</code> por padrão.</li> </ul> <p>Para garantir acessibilidade, o atributo <code><title></code> deve ser removido e substituído por um atributo ARIA que descreva corretamente a função e o destino da hiperligação.</p> <p><strong>Recomendações</strong></p> <ul> <li>Sempre que possível, evitar o uso de texto incorporado em imagens.<br>Quando a imagem contém apenas texto, recomenda‑se substituí-la por um link em formato de texto, garantindo melhor legibilidade, responsividade e acessibilidade.</li> <li>Caso optem por manter a imagem, recomendamos alterar o texto alternativo para<a href="..." aria-label="Sigma wsCidadão, serviços on-line ao cidadão"></a> Desta forma, os utilizadores de tecnologias de apoio recebem a informação necessária sobre o propósito do link e o facto de este conduzir a uma página externa.</li> </ul> <img src="https://github.com/user-attachments/assets/c4707861-e99c-486b-a423-fb2baf5533ab" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na evidência (2) identificamos imagens-link com repetição do texto alternativo e seus títulos, o que causa ruído para utilizadores com leitores de ecrã.</li> </ul> <img src="https://github.com/user-attachments/assets/ad1f582c-ef41-44bc-b5f9-bdb17298e6af" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Peso da Régua (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>A evidência (1) identifica uma imagem‑link no banner da página com texto alternativo inadequado (<code>alt="foto_capa_tupr"</code>). Este texto não fornece contexto nem descreve o propósito do elemento, deixando utilizadores de leitores de ecrã sem informação sobre o destino da ligação, neste caso referente a página de “Transportes Urbanos de Peso da Régua”. A falta de descrição compromete a perceção da funcionalidade da imagem e viola o presente requisito.</li> </ul> <img src="https://github.com/user-attachments/assets/0440ee09-565d-416c-a673-c8c63b3cdcca" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação</strong></p> <p>Corrigir o texto alternativo para transmitir claramente o propósito e o destino da hiperligação. Exemplo recomendado: alt="Transportes Urbanos de Peso da Régua, aceder à página do serviço”</p> <h5><strong>Pombal (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> </ul> <p><strong>Nota de auditoria:</strong></p> <ul> <li>Na evidência (1) foi identificada a utilização do atributo <code>title</code> nas imagens-links presentes no rodapé “Livro de reclamações” e “Acessibilidade do site”. Este atributo deve ser removido, uma vez que não é anunciado de forma consistente por todos leitores de ecrã. Além disso, os ícones destes links são aplicados via CSS como imagem de fundo (<code>background-image</code>), o que impede a sua exposição na árvore de acessibilidade e impossibilita a definição de texto alternativo adequado.</li> </ul> <img src="https://github.com/user-attachments/assets/a38322fd-8477-41cb-bc50-f9c9168009e5" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação</strong></p> <p>Substituir os ícones aplicados via CSS, por SVG inline dentro do HTML, permitindo controlo total sobre acessibilidade. Como os ícones representam ação para o redirecionamento a outras páginas, recomendamos incluir os textos alternativos: </p> <ul> <li><a href="..." aria-label="Livro de Reclamações, abre em link externo”></a></li> <li><a href="..." aria-label="Acessibilidade do site, abre em nova janela”></a></li> </ul> <h5><strong>Montalegre (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-montalegre.pt/transparencia/projetos-cofinanciados-pela-uniao-europeia-ue">https://www.cm-montalegre.pt/transparencia/projetos-cofinanciados-pela-uniao-europeia-ue</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>A evidência (1) mostra que existem imagens‑link funcionais usadas como botões de partilha para serviços externos, mas que recorrem ao atributo <code>title</code>. Por exemplo, o botão de partilha por email utiliza <code>title="Partilhar no Email"</code>. Como o <code>title</code> não é fiável para leitores de ecrã estes botões ficam sem nome acessível adequado.</li> </ul> <img src="https://github.com/user-attachments/assets/d9d7b83b-f4fe-46c2-bebd-bc39b34a9c1d" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação</strong></p> <p>Substituir os ícones aplicados via CSS, por SVG inline dentro do HTML, permitindo controlo total sobre acessibilidade. E definir um nome acessível com aria-label removendo o <code>title</code>.</p> <h5><strong>Águeda (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>A evidência (1) identifica a imagem‑link no banner da página “Águeda cidade verde green leaf 2026” com texto alternativo inadequado (<code>alt="green_site"</code>). Este texto não fornece contexto nem descreve o propósito do elemento, deixando utilizadores de leitores de ecrã sem informação sobre o destino da ligação, neste caso, a página do evento “Cerimónia de Abertura - European Green Leaf 2026 Águeda”. A falta de descrição compromete a perceção da funcionalidade da imagem e viola o presente requisito. <strong>Recomendação:</strong> Corrigir o texto alternativo para transmitir claramente o propósito e o destino da hiperligação.</li> </ul> <img src="https://github.com/user-attachments/assets/5a0bcc0f-7580-4851-8d51-a14b55977c28" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Satão (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) identificamos no carrossel “Ligações úteis” links com imagens que possuem textos alternativos incorretos. Estas imagens direcionam para páginas externas, mas os respetivos textos alternativos não indicam essa ação nem descrevem o conteúdo ou o destino do link. Por exemplo, a imagem‑link “Qualidade de Água” apresenta o texto alternativo <code>alt="gota"</code>, que não transmite qualquer informação útil ao utilizador. Esta prática gera ruído na leitura por tecnologias de apoio, prejudica a compreensão da função das hiperligações e não cumpre o presente requisito. Nesses casos, que já existe um título associado e descritivo referente ao conteúdo do logotipo, as imagens não acrescentam informação relevante e devem ser tratadas como <strong>decorativas</strong>, utilizando um texto alternativo vazio (<code>alt=""</code>).</li> </ul> <img src="https://github.com/user-attachments/assets/bf5029fa-c558-4c76-8b7d-ae4b0bfe1703" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Ilhavo (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) localizamos no rodapé, um grupo de imagens link com texto alternativo incorreto. Desta forma, o leitor de ecrã não informa sobre o conteúdo das imagens, que são os logótipos “Centro 2020, Portugal 2020 e Fundo Europeu de Desenvolvimento Regional”.</li> </ul> <img src="https://github.com/user-attachments/assets/60777b6f-6c30-4ef2-bc98-4af48ea6f19e" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Oliveira do Bairro (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-olb.pt">https://www.cm-olb.pt</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>A evidência (1) mostra que a imagem “Município Oliveira do Bairro” utiliza um texto alternativo inadequado (<code>alt="Ir para a página inicial"</code>), embora o utilizador já se encontre na página inicial. Além de não refletir o conteúdo da imagem (o logótipo), o texto alternativo apresenta uma função incorreta, o que compromete a perceção do elemento por utilizadores de leitores de ecrã.</li> <li>Foram igualmente identificados outros exemplos de textos alternativos incorretos em imagens‑link, como “Deixe a sua mensagem” (<code>alt="mensagem-white"</code>), “234 732 100” (<code>alt="telefone-white"</code>), “Subscreva a newsletter” (<code>alt="icon_plane_rounded2"</code>) assim como o grupo de imagens com alt="logotipos acessibilidade”. Estes textos não descrevem o conteúdo nem o propósito das hiperligações, prejudicando a navegação assistiva e violando o presente critério.</li> </ul> <img src="https://github.com/user-attachments/assets/0620ddb0-357f-48ab-a27e-4261fe85aff9" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Vagos (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>A evidência (1) identifica um carrossel de links para páginas externas com logótipos cujos textos alternativos são incorretos ou não descritivos. Estes textos não informam o conteúdo das imagens nem o destino das ligações para as respetivas páginas. Exemplos incluem “Banco do voluntariado” com com <code>alt="banner5"</code> “Emissão de Plantas” com <code>alt="banner2"</code> e “Polo de Vagos” com <code>alt="IERA"</code>. Esta prática compromete a perceção das hiperligações e causa ruídos para leitura do conteúdo por utilizadores de leitores de ecrã por não possuir um texto alternativo claro. Nesses casos, as imagens não acrescentam informação relevante e devem ser tratadas como <strong>decorativas</strong>, utilizando um texto alternativo vazio (<code>alt=""</code>).</li> </ul> <p><strong>Recomendação</strong>: Aplicar <code>alt=""</code> às imagens decorativas e garantir consistência desta prática em todas as páginas do website.</p> <img src="https://github.com/user-attachments/assets/46d10d6f-e758-47f6-a49a-c966bb04047f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Valongo (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> <li>(2) NOK. <a href="https://www.cm-valongo.pt/municipio">https://www.cm-valongo.pt/municipio</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>A evidência (1) mostra que o logótipo utiliza um texto alternativo incorreto (alt="Voltar à página principal do site”), que não descreve o conteúdo da imagem. Além disso, foi identificado o uso inadequado do atributo <code>title</code> na imagem. Este atributo não deve ser utilizado para fornecer informação acessível, pois não é anunciado de forma consistente pelos leitores de ecrã e pode criar ruído ou redundância. O <code>title</code> deve ser removido e substituído por um nome acessível adequado, com <code>aria-label</code>.</li> </ul> <img src="https://github.com/user-attachments/assets/8586b334-8c3e-45cd-9c7f-9a2d31c35399" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na evidência (2) foi identificada a utilização do atributo <code>title</code> nas imagens-links presentes no rodapé “Livro de reclamações” e “Acessibilidade do site”. Este atributo deve ser removido, uma vez que não é anunciado de forma consistente por todos leitores de ecrã.</li> </ul> <img src="https://github.com/user-attachments/assets/11828bd0-4a26-4352-a108-0fe219a317c5" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação</strong></p> <p>Substituir os ícones aplicados via CSS, por SVG inline dentro do HTML, permitindo controlo total sobre acessibilidade. Como os ícones representam ação para o redirecionamento a outras páginas, recomendamos incluir os textos alternativos: </p> <ul> <li><a href="..." aria-label="Livro de Reclamações, abre em link externo”></a></li> <li><a href="..." aria-label="Acessibilidade do site, abre em nova janela”></a></li> </ul> </div>

Requisito 6.1 - No corpo de um documento, o rácio de contraste entre a cor do texto normal (menor que 18 pontos ou menor que 14 pontos negrito) e a cor do fundo é superior a 4,5:1

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #47 Problemas de contraste para texto normal

    etiqueta: chk 10 webetiqueta: R 6.1etiqueta: NOK

    No corpo de um documento, o rácio de contraste entre a cor do texto normal (menor que 18 pontos ou menor que 14 pontos negrito) e a cor do fundo é superior a 4,5:1.
    – ver requisito 6.1 na lista 10 aspetos

    Notas gerais
    • Contraste inferior para elementos textuais, elementos da interface e objetos gráficos.
    • Recomendamos a revisão das cores das páginas e dos vários estados dos elementos para garantir os valores mínimos de contraste do texto normal
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) apresenta o breadcrumb "Transparência" e “Comunicação”, que não satisfaz o requisito uma vez que as combinações de cor dos textos possuem um rácio de contraste inferior a 4.5:1 para texto normal. O mesmo acontece nas outras páginas que possuem breadcrumbs Município, Serviços e Participação
    Image
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) apresenta o Breadcrumb com contraste inferior ao recomendado para texto normal. Ao passar o rato com a interação do hover os textos “Início”, “Município” tornam-se não visíveis para utilizadores com baixa visão.
    Image
    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) há textos pouco ou não visíveis especificamente no rodapé e no hover do menu lateral (div= areaDireita_AREA), que apresentam a cor #03506a com rácio de contraste inferior ao recomendado para texto normal.
    Image
    • A evidência (2) identificamos problemas de contraste nas opções do menu lateral, quando as opções estão em foco via teclado, comprometendo a visibilidade do elemento ativo. Além disso, a opção do menu principal “Balcão Virtual” apresenta um rácio de contraste inferior ao recomendado entre as cores #FFFFFF e #00A68C, não cumprindo o presente requisito.
    Image
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • Nas evidências (1) e (2), no menu lateral da página “Viver” e “Investir” não passam na avaliação de contraste. Suas respetivas cores (#AF8D51 e #899074) de plano de fundo em relação aos textos em (#FFFFFF) como cor de primeiro plano. O mesmo acontece na cor dos campos obrigatórios(*) #FF6C79 que possuem rácio de contraste inferior em relação ao plano de fundo (#FFFFFF)
    Image
    • O mesmo acontence na evidência (3) onde a página inicial apresenta no menu principal a opção “Investir” os pares de cores #FFFFFF cor dos textos e #af8d51(cor do plano de fundo) reprovadas na avaliação de contraste. Na mesma página, o botão “Subscrever Newsletter” possui uma interação de hover com a cor (#a03755) que torna o texto pouco visível e não passa na avaliação de contraste em relação ao plano de fundo (#576039).
    Image
    Matosinhos (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) nos formulários, rever contraste dos campos obrigatórios (*) com rácio de contraste inferior entre os pares de cores (#FF6C79) e (#FFFFFF).

    • A evidência (2) demonstra a violação do requisito, uma vez que erros de contraste tornam o texto da data de publicação e de atualização da página invisível, pois a cor do primeiro plano é a mesma do fundo (#FFFFFF).

    Image
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • a evidência (1) revela que o * dos campos obrigatórios com cor #FF6C79 não cumpre o requisito pois possui rácio de contraste inferior em relação ao plano de fundo (#FFFFFF)
    Image
    • a evidência (2) demonstra problemas de contraste no rodapé do website, nas combinações de cores #236EAC(cor do primeiro plano) e #0F4260 (cor de plano de fundo). Sendo assim, não passa na avaliação de contraste.
    Image
    Valpaços (NOK)

    Evidências:

    Nota auditoria

    • na evidência (1) identificamos problemas de contraste nas combinações de cores dos textos (#FFFFFF) com as opções do menu “Eu sou Municípe” (#CE6235), “Sou visitante”(#D4940F), “Balcão virtual” (#83A982)
    Image
    • Na Cor do texto (#999999) com rácio de contraste inferior em relação a cor do plano de fundo (#FFFFFF).
    Image
    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • As evidências (1, 2) apresentam problemas de contraste entre os pares de cores (#FFFFFF e #DCBE97), esta combinação é utilizada em cards e botões da página incial e página “Visitar”.
    Image
    • Na evidência (3) apresentam problemas de contraste entre os pares de cores (#FFFFFF e #8EBE90), esta combinação é utilizada em cards da página “Autarquia”. E também acontece em uma secção do rodapé entre os pares de cores (#FFFFFF e #439246).
    Image
    • Na evidência (4) localiza-se problemas de contraste nos textos do formulário, com os pares de cores (#439246 e #FFFFFFF)
    Image
    Albergaria (NOK)

    Evidências:

    Nota de auditoria:

    • Problemas de contraste em Breadcrumb com os pares de cores #999999 (cor de primeiro plano) e #FFFFFF (cor de plano de fundo), já no botão “voltar” com os pares de cores #FFFFFF (cor de primeiro plano) e #00A5A5 (cor de plano de fundo).

    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) os textos das datas dos eventos apresentam problemas no rácio de contraste entre as cores (#FFFFFF e #4BAAF8) estas são cores se aplicam a outros elementos interativos da página, como por exemplo no campo de pesquisa no topo das páginas.
    • Na evidência (2) as combinações de cores para os textos (#FFFFFF) dos cards da página “Visitar” não passam na avaliação de contraste.
    Image
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) a secção “mostrar destaques” ou “ocultar destaques” apresentam textos com problemas no rácio de contraste entre as cores (#FFFFFF e #3AC0CF). O campo de pesquisa do site, também não passa na avaliação de contraste com as combinações de cores (#FFFFFF e #F5F5F6).
    Image
    • Na evidência (2) os textos e elementos gráficos que utilizam os pares de cores (#979AA1 e #FFFFFF) não passam na avaliação de contraste.
    Image
    Peso da Régua (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela que nos textos da secção “Notícias” há problemas no rácio de contraste entre as cores (#FFFFFF e #C9C9CB).
    Image
    • a evidência (2) revela que nos textos do rodapé “tel” e “e-mail” há problemas no rácio de contraste entre as cores (#FFFFFF80 e #64646B). O mesmo problema de contraste acontece nos textos dos componentes no topo da página “Área do Municípe”, “Contactos” e no campo de pesquisa “Pesquisar conteúdos na plataforma inteira” e breadcrumb do website, nas combinações de cores #64646B (cor de primeiro plano) e #FFFFFF (cor de plano de fundo).
    Image
    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela problemas no rácio de contraste nos rótulos na página “Serviços” os textos que utilizam a cor #3E4242 e #56A295 como cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    • A evidência (2) revela problemas no rácio de contraste nos rótulos do “Formulário comunicação de Ocorrências”, os textos que utilizam a cor #6BCABA e #FFFFFF como cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    • A evidência (3) revela problemas no rácio de contraste do menu principal da página, os textos que utilizam a cor #FFFFFF e #F2AA00 como cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela problemas no rácio de contraste nos elementos gráficos que utilizam as cores, #FFFFFF(cor do primeiro plano) e #009FE3 como cor de plano de fundo. Não passam na avaliação de contraste. Assim como na evidência (2) com as combinações de cores #FFFFFF(cor do primeiro plano) e #00A1E6 como cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela problemas no rácio de contraste no banner principal da página, os textos que utilizam a cor #FFFFFF e #F4A430 como cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problemas no rácio de contraste do menu principal da página, os textos que utilizam a cor #C4D600 e #FFFFFF como cor de plano de fundo. Não passam na avaliação de contraste. O mesmo acontece nas páginas secundárias, por exemplo na evidência (2).
    Image
    Ilhavo (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problemas no rácio de contraste no hover dos textos do menu da página “Município”, nos textos que utilizam a cor #00599B em relação ao plano de fundo com a imagem na cor #10121E . Não passam na avaliação de contraste.
    Image
    • A evidência (2) apresenta a página inicial, com problema de contraste no botão “Serviços Online” no texto que utiliza a cor #808080 em combinação com a cor de plano de fundo da imagem (#185070). Não passa na avaliação de contraste.
    Image
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problemas no rácio de contraste no hover breadcrumb da página “Concelho”, nos textos que utilizam a cor #FFFFFF em relação ao plano de fundo com a imagem na cor #999999 . Não passam na avaliação de contraste. O mesmo problema acontece nas combinações de cores do campo de pesquisa da página, em que o elemento gráfico da busca na cor #FFFFFF em relação ao plano de fundo ##E8F0FE não passa na avaliação de contraste.
    Image
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) revela problemas no rácio de contraste nos cards da secção “AGENDA” nos textos que utilizam a cor #FFFFFF e #27ACE3 como cor de plano de fundo. As combinações de cores não passam na avaliação de contraste. Ainda na evidência (1) no menu principal da página ao utilizar o hover nas opções “Município”, “Viver, “Visitar”, “Investir”, “Participar”, “Serviços”.
    Image
    • A evidência (2) na página visitar, as combinações de cores para os textos que utilizam a cor #FFFFFF e #FCB11B como cor de plano de fundo não passam na avaliação de contraste.
    Image
    Valongo (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problemas no rácio de contraste no texto que utiliza a cor #000000 e #3E4C3B como cor de plano de fundo. As combinações de cores não passam na avaliação de contraste.
    Image

Requisito 6.2 - O rácio de contraste entre a cor do texto de tamanho grande (maior ou igual que 18 pontos ou maior ou igual que 14 pontos negrito) e a cor do fundo é superior a 3:1

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #48 Problemas de contrastes para textos grandes

    etiqueta: chk 10 webetiqueta: R 6.2etiqueta: NOK

    O rácio de contraste entre a cor do texto de tamanho grande (maior ou igual que 18 pontos ou maior ou igual que 14 pontos negrito) e a cor do fundo é superior a 3:1.
    – ver requisito 6.2 na lista 10 aspetos

    Verifica-se que há problemas de contraste para textos de tamanho grande em alguns websites. Recomendamos a revisão das cores das páginas para garantir os valores mínimos de contraste do texto de tamanho grande.

    Notas gerais
    • 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.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problema de contraste nos textos “Visitar”, “Atendimento”, “Contratação pública” e “Serviços online”. Com a interação de hover, a combinação de cores #9E0A26 (cor de primeiro plano) e #C60C30 cor de plano de fundo. Não passam na avaliação de contraste.
    Image
    • A evidência (2) revela um problema de contraste no menu principal da página. Quando a opção “Município” é selecionada através do teclado e de um leitor de ecrã, o texto deixa de ser visível, uma vez que apresenta a mesma cor do plano de fundo (#FFFFFF)
    Image
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • Na página de início o texto “Destacamos” está com a mesma cor do plano de fundo (#FFFFFF) com isso, o texto torna-se não visível na página. Além disso há problemas de contraste com as setas
    Image
    • No menu mobile, os textos das opções “Município”, “Áreas de intervenção” e “Transparência” apresentam o rácio de contraste inferior para a cor do texto de tamanho grande (#000000) em relação a cor de plano de fundo (#0555b4).
    Image
    Esposende (NOK)

    Evidências:
    (1) NOK. Erros de contraste nos pares de cores #ffffff(cor de primeiro plano) #f0b416 (cor de plano de fundo)

    Nota auditoria:

    • Na evidência (1) os cards do carrossel “Eventos” da página inicial apresentam rácio de contraste inferior ao recomendado. Assim como em outros cards de destaque e menus da página que utilizam os mesmos pares de cores #ffffff(cor de primeiro plano) #f0b416 (cor de plano de fundo).
    Image
    Sabrosa (OK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) a secção “Notícias” da página inicial apresenta rácio de contraste inferior ao recomendado para textos grandes. Nas combinações de cores #FFFFFF(cor de primeiro plano) #DCBE97 (cor de plano de fundo).
    Image
    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) a secção “Caminha em eventos” da página inicial o texto apresenta rácio de contraste inferior ao recomendado para textos grandes. Nas combinações de cores #FFFFFF(cor de primeiro plano) #C48C31 (cor de plano de fundo).
    Image
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) identificamos que os textos das secções “Notícias” e “Agenda” com as cores (#0000000A e #FFFFFF) possuem rácio de contraste inferior a 3:1 para textos grandes.
    Image
    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) a secção “Atalhos” da página inicial os textos “Serviços”, “Documentos”, “Informações” e “Lazer” na interação de hover, nas combinações de cores #FFFFFF(cor de primeiro plano) #F46B4E (cor de plano de fundo), apresentam rácio de contraste inferior ao recomendado para textos grandes.
    Image
    Websites (OK)

    Evidências:

    Nota auditoria:

    • passam na avaliação de contraste para texto grande.

Requisito 7.1 - Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado

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

Lista de evidências recolhidas:

Requisito 7.2 - O vídeo ou o áudio deve conter preferencialmente legendas fechadas sincronizadas. Caso não seja possível, no mínimo, deve disponibilizar-se uma transcrição textual

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 8.2 - Quando se retira a CSS, a informação aparece numa ordem lógica

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 8.3 - Quando se retira a CSS, deve ser possível reconhecer a semântica dos diversos elementos

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 8.5 - A maquetização da página é feita sem recorrer ao elemento table

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #33 A maquetização da página é feita sem recorrer ao elemento <table>

    etiqueta: chk 10 webetiqueta: R 8.5etiqueta: NOK

    A maquetização da página é feita sem recorrer ao elemento <table>.
    – ver requisito 8.5 na lista 10 aspetos

    Bragança:

    OK
    Não encontrámos tabelas layout

    Guimarães

    NOK
    Segunda tabela da página Banco Local de Voluntariado (BLV) é de layout, pois o seu conteúdo não é um conjunto de dados mas sim texto que poderia ser estilizado via CSS e fora de qualquer tabela.

    Image

    Tabela de layout

    Esposende

    OK
    Não encontrámos tabelas layout

    Arcos valdevez

    OK
    Não encontrámos tabelas layout

    Matosinhos

    NOK
    Na página juntas de freguesia existe uma tabela layout

    Image

    Tabela layout

    regiao_de_aveiro

    OK
    Não encontrámos tabelas layout

    Valpaços

    OK
    Não encontrámos tabelas layout

    Sabrosa

    OK
    Não encontrámos tabelas layout

    Albergaria-a-Velha

    OK
    Não encontrámos tabelas layout

    Caminha

    OK
    Não encontrámos tabelas layout

    Peniche

    OK
    Não encontrámos tabelas layout

    Peso da régua

    OK
    Não encontrámos tabelas layout

    Pombal

    OK
    Não encontrámos tabelas layout

    Montalegre

    OK
    Não encontrámos tabelas layout

    Águeda

    NOK
    A tabela presente na página Freguesias é de layout.

    Image

    Tabela de layout
    O mesmo acontece na tabela presente na página Município

    sátão

    OK
    Não encontrámos tabelas layout

    Ílhavo

    OK
    Não encontrámos tabelas layout

    Oliveira do bairro

    OK
    Não encontrámos tabelas layout

    Vagos

    OK
    Não encontrámos tabelas layout

Requisito 9.1 - Quando a caixa de diálogo é aberta, o foco (cursor do Browser) move-se para um elemento dentro da caixa de diálogo

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 9.2 - Quando uma caixa de diálogo está aberta, a navegação com teclado (Browser ou Tecnologia de apoio) tem de ficar circunscrita aos elementos que compõem a caixa de diálogo

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 9.3 - A caixa de diálogo tem de ter um mecanismo que permita sair ou fechar a caixa, quer através de teclado quer através de um dispositivo apontador

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 9.4 - Quando a caixa de diálogo fecha, o foco (cursor do Browser) deve voltar ao elemento interativo que a invocou

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 10.1 - Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT

etiqueta: NOK

Lista de evidências recolhidas:

Checklist Conteúdo

etiqueta: NOK

Nível de conformidade:

  • Checklist Conteúdo: 35.3% (6/17)
    • Requisitos avaliados: 17 (17 aplicáveis)
    • Requisitos OK: 6
    • Requisitos NOK: 11

Requisito 1.1 - O sítio Web apresenta um resumo breve do seu propósito, visível sem se fazer scroll

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 1.2 - Os termos mais complexos têm uma definição agregada

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

Lista de evidências recolhidas:

Requisito 2.1 - O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 2.2 - A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 3.1 - Nenhum nível de navegação tem mais de 9 opções

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 3.2 - A navegação principal está sempre visível e sempre no mesmo local

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

Lista de evidências recolhidas:

Requisito 3.3 - As hiperligações de texto não devem ser diferenciadas apenas com base na cor

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 4.1 - Os documentos longos têm um índice no topo com hiperligações internas para o mesmo

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 4.2 - O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #100 O layout do sítio Web é adaptável a plataforma móveis

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

    O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal.
    – ver requisito 4.2 na lista Conteúdo

    Notas gerais
    • O layout do site deve ter comportamento responsive, ou seja, deve-se adaptar às diferentes resoluções de ecrãs, de forma a garantir que a navegação seja fluída e não haja conteúdo cortado.
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela a página “Município” não se adapta às diferentes resoluções. Além disso, outras páginas secundárias apresentam o mesmo problema, sem margens laterais e com os conteúdos comprimidos, demonstra que o site não se adapta às diferentes resoluções de ecrãs.
    Página município de Guimarães com erro de responsividade

    Recomendação

    Garantir que todo o layout do site, especificamente seus textos, e verificar se possuem comportamento responsive e adaptam-se às diferentes resoluções de ecrã, sem necessidade de fazer varrimento horizontal para realizar a leitura dos conteúdos.

    Esposende (NOK)

    Evidências:

    Nota auditoria:

    Erro de responsividade no website Esposende
    Arcos Valdevez (Melhoria)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela problemas de responsividade na página inicial, onde os elementos visuais não se ajustam corretamente ao tamanho do ecrã, comprometendo a visualização e a navegação em dispositivos móveis.
    Erro de responsividade no website Arcos Valdevez
    • A evidência (2) destacamos melhorias necessárias na adaptação das imagens link das redes sociais, que estão distorcidas na versão mobile.
    Imagens das redes sociais distorcidas
    Valpaços (NOK)

    Evidências:

    Nota auditoria:

    • No website há problemas com os títulos que não se adaptam às diferentes resoluções. Por exemplo na evidência (1), na página “Sou visitante”, assim como na evidência (2) com página “Eu sou Munícipe”. Recomendamos rever e corrigir espaçamento e margens responsivas dos títulos.
    Erro de responsividade no website Valpaços
    Albergaria (Melhoria)

    Evidências:

    Nota de auditoria:

    • Na evidência (1), referente à página inicial, observa‑se que embora a versão mobile seja tecnicamente responsiva, a adaptação do layout provoca compressão excessiva entre elementos interativos. Esse encurtamento do espaçamento compromete a legibilidade e pode dificultar a perceção e seleção dos controlos por parte dos utilizadores, sobretudo em ecrãs reduzidos. Tal situação aumenta o risco de erros de navegação e prejudica a experiência de uso. Recomendamos rever e corrigir espaçamento e margens responsivas entre as áreas textuais e clicáveis.
    Erro de responsividade no website Albergaria
    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) demonstra na adaptação do ecrã para a versão iPad, com problema de sobreposição dos ícones das redes sociais (Facebook, Youtube, Instragram e RSS feed) em relação a opção “selecionar idioma”.
    Erro de responsividade na página inicial do website Caminha
    • A evidência (2) revela a página “Projetos de Participação” com problema de responsividade do conteúdo para versões de iPads. Os cards apresentam seus títulos cortados impossibilitando a leitura completa dos títulos. O mesmo problema acontece na evidência (3), na página “Desenvolvimento Rural”. Recomendamos rever o alinhamento dos textos e áreas clicáveis na adaptação de diferentes resoluções.
    Erro de responsividade no website Caminha
    Peso da Régua (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela problemas de responsividade na exibição do menu para as versões mobile, não sendo possível aceder as opções do menu nas versões mobile. Além disso, nas áreas “Espaço do turista”, “Espaço do Munícipe” e “Participar Ocorrências” os ícones não se adaptam às diferentes resoluções, encontram-se ampliados e cortados.
    Erro de responsividade no menu do website Peso da Régua Image
    • Na evidência (2) os botões “Selecionar idioma” e “Área Munícipe” se sobrepõem, demonstrando problemas de responsividade*,* impossibilitando o acesso a as opções.
    Erro de responsividade no website Peso da Régua

    Recomendações

    Reorganização dos elementos do menu, priorizando a hierarquia de interação em dispositivos móveis e alinhamento das áreas clicáveis com espaçamento mínimo.

    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela que o campo de pesquisa não se adapta às diferentes resoluções de ecrã, pois sobrepõe os elementos interativos das redes sociais do Município. O mesmo problema se repete nas páginas principais de todo o website, por exemplo nas evidências (2 e 3). Recomendamos rever e corrigir espaçamento e margens responsivas entre as áreas textuais e clicáveis.
    Erro de responsividade no website Pombal
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) revela que o campo de pesquisa não se adapta às diferentes resoluções de ecrã, pois sobrepõe os elementos interativos das redes sociais do Município. O mesmo problema se repete nas páginas principais de todo o website, por exemplo nas evidências (2 e 3). Recomendamos inclusão de espaçamento mínimo e margens responsivas entre o campo de pesquisa e os ícones das redes sociais, assegurando áreas clicáveis adequadas.
    Erro de responsividade no website Satão
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) o elemento interativo do carrossel, não se adapta às diferentes resoluções, apresenta-se cortado na versão mobile. Recomendamos rever e corrigir espaçamento e margens responsivas das áreas clicáveis.
    Erro de responsividade no website Oliveira do Bairro
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) referente à página inicial, observa‑se que embora a versão mobile seja tecnicamente responsiva, a adaptação do layout provoca compressão excessiva entre elementos interativos. Esse encurtamento do espaçamento compromete a legibilidade e pode dificultar a perceção e seleção dos controlos por parte dos utilizadores, sobretudo em ecrãs reduzidos. Tal situação aumenta o risco de erros de navegação e prejudica a experiência de uso.
    Erro de responsividade da página inicial do Município de Vagos
    • Na página inicial, a secção “Siga-nos” sobrepõe o texto da publicação do website “Conteúdo atualizado em 9 de dezembro de 2025às 16:46”
    Erro de responsividade Município de Vagos
    • Na evidência (2) a opção “Área reservada” não se adapta às diferentes resoluções, e na versão Samsung galaxy S8 a opção chega a desaparecer do ecrã.
    Erro de responsividade na área reservada
    Valongo (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) na secção “Valongo, um território a descobrir!” há problemas de adaptação do ecrã para versão mobile, com a opção “Veja o nosso vídeo”. Recomendamos rever e corrigir espaçamento e margens responsivas entre as áreas clicáveis.
    Erro de responsividade na página inicial do website de Valongo
    Websites (OK)

    Evidências:

    Nota auditoria:

    • passa, sem problemas de responsividade.

Requisito 5.1 - Não existem elementos interativos acionados apenas com a passagem do rato (hover)

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #101 Existem elementos interativos acionados apenas com a passagem do rato (hover)

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

    Não existem elementos interativos acionados apenas com a passagem do rato.
    – ver requisito 5.1 na lista Conteúdo

    Notas gerais

    • Não devem existir elementos de interação, como hiperligações ou botões, que aparecem apenas quando se passa por cima com um dispositivo apontador. Este método de interação não está disponível em aparelhos com interação por toque.
    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página inicial, no carrossel “atalhos” os botões “previous” e “next” , só são ativados quando passamos o rato pelas componentes do carrossel.
    Botões do carrossel ativos apenas com hover
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página incial a opção “Balcão Municipal” é acionada apenas com a passagem do rato. Sendo assim, essas opções não são visíveis para leitores de ecrã e também para dispositivos móveis.
    Opção Balcão Municipal ativa apenas com hover
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • aA evidência (1) revela na página inicial o mapa interativo, é acionado apenas com a passagem do rato (hover) nas regiões que são clicáveis e direcionam para páginas dos municípios. No entanto, o mapa é inacessível com leitores de ecrã e o hover não é perceptível para dispositivos móveis. (Ver notas do Requisito 5.2 - 10 Aspetos)
    Mapa interativo com interação apenas com hover
    Valpaços (NOK)

    Evidências:

    Nota de auditoria

    • A evidência (1) indica que, na página inicial, o chatbot é acionado apenas através da interação por hover. Ao passar o rato, surge a mensagem “Fale connosco – Precisa de ajuda?”. No entanto, quando um elemento interativo depende exclusivamente do hover para ser ativado ou para revelar informação, torna-se inacessível para utilizadores que recorrem a tecnologias de apoio, bem como para quem utiliza dispositivos móveis baseados em toque. Esta limitação compromete a perceção da funcionalidade e impede o acesso equitativo ao serviço disponibilizado.
    Chatbot ativo apenas com hover
    Recomendação

    Garantir que o chatbot pode ser acionado por diferentes métodos de interação incluindo teclado, toque e tecnologias de apoio e que a mensagem associada é apresentada de forma visível e acessível sem depender exclusivamente do hover. (Ver nota do Requisito 8.3 - 10 Aspetos)

    O mesmo acontece para os seguintes websites:

    Websites (OK)

    Albergaria (Site em manutenção)

    Evidências:

    Nota auditoria:

    • Website está indisponível.

Requisito 5.2 - Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos) (vertical e horizontal)

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #102 Os elementos interativos têm uma dimensão mínima de 44px

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

    Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos), vertical e horizontal.
    – ver requisito 5.2 na lista Conteúdo

    Notas Gerais

    • Para garantir que os utilizadores interagem devidamente com um elemento interativo (botões, imagens-link...), a área clicável desse elemento deve ser, no mínimo, 44px de largura e 44px de altura.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo, na página “Caracterização” com os botões das redes sociais dimensão de 40px de largura e 40px de altura, não cumprindo as dimensões mínimas necessárias.
    Image
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • As evidências (1 e 2) revela que há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo, na página “Diretório de serviços” que existem botões com 20.13px de largura e 41px de altura, não cumprindo as dimensões mínimas necessárias.
    Image
    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • As evidência (1 e 2) revelam elementos interativos menores que 44px. Nas páginas “Início” o menu lateral possui um elemento interativo com (21x14px) e na página “Espaço Cidadão” o botão “Voltar” com (30x30px), não cumprem as dimensões mínimas necessárias.
    Image Image
    • As evidências (3 e 4) revelam elementos interativos sobrepostos e menores que 44px.
    Image
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) revela que há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo, os elementos interativos das notícias da página inicial 11x11px, sendo assim não têm a dimensão mínima recomendada do presente requisito.
    Image
    • Na evidência (2) revelam elementos interativos menores que 44px. Na página “Investir” o botão “Voltar” apresenta-se com 33.2px de altura, não cumprindo as dimensões mínimas necessárias.
    Image
    Matosinhos (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que elementos interativos da página inicial não cumprem a dimensão mínima recomendada. Por exemplo, o botão “Condicionamento de trânsito” com altura de 35.2px.
    Image
    • Ainda na página inicial há elementos interativos no rodapé que não têm a dimensão mínima recomendada, por exemplo para o botão “Sugestões e reclamações” que possui altura de 40.8px
    Image
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • a evidência (1) revela que o botão do carrossel com 42x42px, não cumpre a dimensão mínima recomendada.
    Image
    Valpaços (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) a página inicial apresenta uma área de “Informações”, em que os botões das paginações possuem áreas de clique inferior a 44px.
    Image
    • Na evidência (2) revela a página inicial com destaque para o rodapé, há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões “Presidência”, “Vereação”, Câmara Municipal” e “Serviços” que possuem altura de 36.24px, não cumprindo as dimensões mínimas necessárias.
    Image
    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) revela que na página inicial há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo, o botão seletor de eventos da agenda com 11px de largura e 16px de altura, não cumprindo as dimensões mínimas necessárias.
    Image
    Albergaria (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela elementos interativos com área clicável inferior ao recomendado, por exemplo a secção "Alertas" possui um botão com tamanho (12,58x25.6px), não cumprindo as dimensões mínimas necessárias.
    Captura página inicial Albergaria
    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela elementos interativos com área clicável inferior ao recomendado, por exemplo a seta para seleção de páginas com tamanho (23x21px), não cumprindo as dimensões mínimas necessárias.
    Image
    • a evidência (2) revela elementos interativos com área clicável inferior ao recomendado. Por exemplo, o ícone de pesquisar com tamanho (26x26px).
    Image
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela que na página inicial, há elementos interativos com área clicável inferior ao recomendado. Por exemplo, o ícone de pesquisar com tamanho (26x26px).
    Image
    Peso da Régua (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela a página inicial com elementos interativos e área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões “Área do Municípe”e “Contactos” que possuem altura de 30px, não cumprindo as dimensões mínimas necessárias.
    Image
    • a evidência (2) revela a página “Sugestões / Reclamações / Elogios” com elementos interativos e área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões “Submeter” e “Partilhar” que possuem altura de 39.2px, não cumprindo as dimensões mínimas necessárias.
    Image
    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela na página ****inicial, há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões “Acesso rápido”, “Ocorrências” e “Balcão digital” que possuem altura de 27.2px, não cumprindo as dimensões mínimas necessárias.
    Image
    • A evidência (2) revela na página “Município”, há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões das redes sociais “Partilhar e-mail”, “Partilhar no messeger”, “Partilhar no Whatsaap”, “Partilhar no Linkedin” e “Partilhar no facebook” com tamanho de 40x40px, não cumprindo as dimensões mínimas necessárias.
    Image
    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (2) revela na página “Município”, há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo o botão de pesquisa na secção “Agenda” possui altura de 42x42px, não cumprindo as dimensões mínimas necessárias.
    Image
    • A evidência (2) revela na página “Contactos Municipais”,há elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo os botões das redes sociais “Partilhar e-mail”, “Partilhar no messeger”, “Partilhar no Whatsaap”, “Partilhar no Linkedin” e “Partilhar no facebook” com tamanho de 40x40px, não cumprindo as dimensões mínimas necessárias.
    Image
    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela que na página inicial, especificamente na secção de destaques há um carrossel com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura). Por exemplo, os botões seletores com tamanho de 35x35px, não cumprindo as dimensões mínimas necessárias.
    Image
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página inicial, a secção “Agenda” há um elemento interativo com área clicável inferior a dimensão mínima exigida (44px de altura e largura). O botão “Ver todos os eventos” com altura de 23px, não cumprindo as dimensões mínimas necessárias.
    Image
    Ílhavo (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página inicial, a secção “Agenda” há um elemento interativo com área clicável inferior a dimensão mínima exigida (44px de altura e largura). O botão, que permite fechar os destaques, com tamanho de 20x40px, não cumprindo as dimensões mínimas necessárias.
    Image
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página “Município”, há elementos interativos com área clicável inferior ao recomendado. Por exemplo, o botão do menu lateral, na opção “Recursos humanos” com 42.23px de altura. Assim como as imagens link do rodapé, que possuem tamanho inferior ao recomendado por exemplo os botões “Deixe sua mensagem”, “234 732 100” e “Subscreva a Newsletter” com 7.83px de largura e 20px de altura, não cumprindo as dimensões mínimas necessárias.
    Image
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que na página inicial, há elementos interativos com área clicável inferior ao recomendado. Por exemplo, a secção “Notícias” possui um carrossel vertical com um botão de 25px de altura.
    Image

    Recomendações para todos websites
    Devem garantir que os elementos interativos têm uma altura e largura igual ou superior a 44px de área clicável, mesmo que o ícone/imagem tenha um tamanho inferior.

    Website (OK)

    Evidências:

Requisito 5.3 - Há apenas um botão de ação principal por página e o mesmo encontra-se destacado

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #103 Há apenas um botão de ação principal por página e o mesmo encontra-se destacado

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

    Há apenas um botão de ação principal por página e o mesmo encontra-se destacado.
    – ver requisito 5.3 na lista Conteúdo

    Notas gerais

    • Os botões de ação principal devem estar destacados numa página ou num bloco de informação para tornar mais perceptível o local onde os utilizadores devem clicar para realizar uma determinada tarefa.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que na página das “Freguesias” o botão de ação principal “Voltar” não têm destaque suficiente face aos restantes botões da página. Os botões secundários devem estar menos destacados e com um estilo diferente. Ao garantirmos uma hierarquia dos botões, reduzimos a probabilidade de ações secundárias serem confundidas com ações principais.
    Image
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) a página “Inserir feedback” apresenta mais de um elemento com estilo de botão principal, nomeadamente os botões “Anexar”, “Enviar” e itens da barra lateral, todos com o mesmo destaque visual. Isto cria múltiplos focos concorrentes e impede que o utilizador identifique claramente qual é a ação principal da página, violando o presente requisito.
    Image

    Recomendação

    Definir apenas o botão “Enviar” como ação principal, aplicando-lhe um estilo visual distintivo e contrastante.
    Os botões “Anexar” e a barra lateral devem ser convertidos para estilo secundário (por exemplo, contorno ou cor neutra), reduzindo o seu peso visual e eliminando a concorrência com a ação principal.

    • Na evidência (2) o botão de ação principal da página “Voltar”, não encontra-se destacado pois possui o mesmo estilo do rodapé.
    Image
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que na página das “Viver” o ****botão de ação principal “Voltar” não têm destaque suficiente face aos restantes botões da página. Os botões secundários devem estar menos destacados e com um estilo diferente. Ao garantirmos uma hierarquia dos botões, reduzimos a probabilidade de ações secundárias serem confundidas com ações principais.
    Image
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • a evidência (1) revela que na página “Comunicação” não é possível distinguir o qual é o botão de ação principal da página.
    Image

    Recomendações

    Recomendamos remover a barra do botão “Voltar” e aplicar um estilo de botão principal, e tornar as opções “Notícias”, “Eventos”, “Notas de Imprensa”, “Boletim Informativo”, “Galerias de Imagens” e “Galerias de Videos” como botões secundários.

    Valpaços (NOK)

    Evidências:

    Nota auditoria:

    • As evidências (1, 2 e 3) mostram que o botão de ação principal “Voltar” apresenta o mesmo estilo visual dos elementos secundários da página, como por exemplo as cores de fundo utilizadas nos acordeões, reduzindo a sua distinção e clareza funcional além de dificultar a perceção do que é clicável como ação primária.
    Figura 1, Página Espaços Verdes e Ambiente Figura 2, Página do Serviço Municipal de Proteção Civil

    Recomendação
    Os botões de ação principal devem apresentar diferenciação visual clara em relação a elementos secundários e estruturais. Sugere‑se reforçar o peso visual (ex.: maior contraste, preenchimento, borda ou forma distinta) e utilizar cores diferenciadas para garantir que o utilizador reconhece imediatamente a função principal.

    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) mostra que os botões principais e secundários apresentam exatamente o mesmo estilo visual. Esta falta de diferenciação faz com que todos os botões tenham o mesmo peso visual, dificultando que o utilizador identifique quais ações são prioritárias. Recomenda‑se a revisão dos estilos, garantindo que o botão principal se destaca claramente dos botões de ação secundária.
    Image
    • A evidência (2) demonstra que na página “Balcão Virtual” o ****botão de ação principal “Voltar” não têm destaque suficiente face aos restantes botões da página. Neste caso, os botões secundários apresentam-se com um estilo diferente do botão “Voltar”, no entanto devem ser menos destacados. Ao garantirmos uma hierarquia dos botões, reduzimos a probabilidade de ações secundárias serem confundidas com ações principais que auxiliam o utilizador a realizar tarefas no website.
    Image
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela na página “Cultura” o botão de ação principal “Voltar” , onde é possível observar que ele não possui destaque face aos restantes botões da página.
    Image
    Peso da Régua (NOK)

    Evidências:

    Nota de auditoria:

    • as evidências (1 e 2) revelam páginas que existem botões principais e secundários com o mesmo estilo. Consideram-se como botões principais: “Subescrever” e “Submeter”. É possível observar que esses botões são iguais aos botões de ação secundária, como: “Partilhar”
    Image
    • as evidências (3) revela que a página “Editais” apresenta botões principais e secundários com o mesmo estilo. Recomendamos rever os estilos e aplicar ao bloco de conteúdos cores secundárias, para facilitar a perceção da hierarquia da informação e facilitar a navegação.
    Image
    Pombal (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (2) revela que na página “Comunicar Ocorrências” o botão de ação principal “Voltar” não têm destaque suficiente face aos restantes botões da página.
    Image
    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) há botão de ação principal na página, não tem destaque suficiente, e possui o mesmo estilo de textos como o título “Agenda”.
    Image
    • Na evidência (2) na página “Opnião” os botões “Anexo”, “Enviar” e “Inserir Feedback” tem o mesmo peso e estilo visual. O que dificulta o utilizador de diferenciar, qual é o botão de ação principal.
    Image

    Recomendações

    Recomendamos diferenciar o botão “Anexo” como botão secundário. E mover o botão “Inserir Feedback” para o final do bloco de comentários.

    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) o botão “Submeter” não encontra-se destacado, e seu estilo se assemelha aos campos de preenchimento.
    Image
    • A evidência (2) mostra que o botão de ação principal “Voltar” não se encontra visualmente destacado na página, o que pode comprometer a sua perceção por parte dos utilizadores. Recomenda‑se aplicar um estilo claramente diferenciador, como cor contrastante ou maior peso visual para assegurar que o botão principal é facilmente identificável como tal.
    Image
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) a página “Newsletters” revela que o botão de ação principal “Submeter” possui um estilo semelhante a outros elementos interativos da interface, neste caso os cards das newsletter. Sendo assim, pode gerar dificuldade de perçepcão para os utilizadores.
    Image
    Ílhavo (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1), verifica‑se que, na página “Subscrição de Notas Informativas”, o botão de ação principal “Submeter” apresenta um estilo visual muito semelhante ao do botão de ação secundária “Voltar”. Esta falta de distinção compromete a hierarquia de ações e dificulta que o utilizador identifique rapidamente a ação prioritária da página.
      Recomenda‑se diferenciar claramente os estilos dos botões principais e secundários, garantindo que o botão “Submeter” se destaca como a ação primária do fluxo desta página.
    Image
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) revela que na página inicial existem botões principais e secundários com o mesmo estilo, por exemplo nas secções “em foco” “acessos rápidos”. Os botões secundários devem estar menos destacados e com um estilo diferente. Ao garantirmos uma hierarquia dos botões, reduzimos a probabilidade de ações secundárias serem confundidas com ações principais.
    Image
    • Na evidência (2) revela que na página “Newsletter” existem dois botões principais com o mesmo estilo. Os botões secundários devem estar menos destacados e com um estilo diferente. Ao garantirmos uma hierarquia dos botões, reduzimos a probabilidade de ações secundárias serem confundidas com ações principais. É necessário destacar o botão “Submeter” como a ação primária do fluxo desta página.
    Image

    Recomendação geral
    Os botões principais devem ser estilizados de forma diferente dos botões de ação secundária. Pode-se também distinguir os botões através da forma (ex: preenchimento, delineamento, cantos arredondados).

    Websites (OK)

    Albergaria (Site em manutenção)

    Evidências:

    Nota auditoria:

    • Website está indisponível.

Requisito 5.4 - Elementos gráficos interativos têm de aparentar ser clicáveis

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #104 Elementos interativos devem aparentar ser clicáveis

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

    Elementos gráficos interativos têm de aparentar ser clicáveis.
    – ver requisito 5.4 na lista Conteúdo

    Notas Gerais

    • Os elementos interativos devem ter um estilo que demonstre que são clicáveis e, ao mesmo tempo, suficientemente diferente de elementos não clicáveis para que não se confundam.
    • O contraste em elementos interativos deve ser de, no mínimo, 3:1 em relação a cor adjacente. Este contraste é aplicado a todos os estados dos elementos (normal, hover, focus, etc). Quando o elemento possui conteúdo em texto, o contraste deve ser de no mínimo, 4,5:1 com a cor de fundo.
    Bragança (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela contraste inferior nos botões do menu secundário, em elementos interativos que devem aparentar ser clicáveis. Recomendamos a revisão das cores dos vários estados dos elementos para garantir os valores mínimos de contraste em elementos interativos.
    Captura da página Comunicação do website de Bragança
    • A evidência (2) revela que a página inicial apresenta elementos interativos cujos estilos visuais não sugerem clicabilidade. Por exemplo os botões das redes sociais, textos da opção "Selecionar idioma" e da secção "Serviços mais frequentes". A única indicação de interação é a mudança do cursor ao passar o rato, o que não é suficiente para transmitir ao utilizador que se trata de elementos clicáveis. Rever o estilo dos elementos interativos para que seja mais percetível que são clicáveis.
    Captura da página inicial de Bragança
    Guimarães (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) há elementos interativos no site, com rácio de contraste inferior ao recomendado. Por exemplo as setas interativas “before” e “after” com a cor da seta em (#669CCF) em relação a cor de plano de fundo (#FFFFFF) não passam na avaliação de contraste. Em em outros locais do website encontram-se outros elementos interativos com a mesma combinação de cores. Por exemplo em ícones das redes sociais, em botões de “Voltar”. Além disso, há setas com combinações de cores de fundo em vermelho (#D74843), que também não passam na avaliação de contraste.
    Captura da página inicial de Guimarães e elementos interativos com baixo contraste
    • Ainda na página inicial, a secção “todos os sites do município” há elementos interativos, como o “Agenda cultural”, “A oficina” e “Arquivo Municipal”, com um estilo que não aparenta ser clicável, visto que a única indicação de que é clicável é a alteração do cursor. Ou seja, não apresentam nenhum feedback visual para os botões.
    Captura da página inicial de Guimarães
    • Na evidência (2) revela contraste inferior ao recomendado em elementos interativos que devem aparentar ser clicáveis.
    Image

    Recomendações

    Rever o estilo dos elementos não clicáveis para garantir que se distinguem dos elementos interativos. É necessário a revisão das cores dos vários estados dos elementos para garantir os valores mínimos de contraste em elementos interativos.

    Esposende (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (2) revela que no website existem elementos interativos que não possuem contraste suficiente. Por exemplo, na página “Ambiente e Sustentabilidade”, a cor dos botões: das redes sociais, pesquisar e menu lateral. Com um contraste (1,9:1) inferior ao recomendado.
    Captura da página de “Ambiente e Sustentabilidade” website de Esposende
    • A evidência (2) revela que a página inicial apresenta elementos interativos cujos estilos visuais não sugerem clicabilidade. Por exemplo, texto da opção "Selecionar idioma". A única indicação de interação é a mudança do cursor ao passar o rato, o que não é suficiente para transmitir ao utilizador que se trata de elementos clicáveis. Rever o estilo dos elementos interativos para que seja mais percetível que são clicáveis.
    Captura da página Mensagem do Presidente
    Arcos Valdevez (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que a página inicial possui elementos interativos com pouco contraste. Por exemplo, as cores dos botões seletores no carrossel de notícias e eventos, têm um contraste baixo sobre o fundo (2,5:1).
    Captura da página Inicial, Arco Valdevez
    • A evidência (2) demonstra que a página inicial apresenta elementos interativos com contraste insuficiente. Por exemplo, a combinação de cores utilizada no efeito hover do botão “Pesquisar”, que aplica a cor #A03755 sobre o fundo #576039, resulta numa taxa de contraste de apenas (1:1) inferior ao recomendado.
    Avaliação de contraste do website de Arco de Valdevez
    Matosinhos (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que, na página “Município”, existem elementos interativos com contraste insuficiente. As setas utilizadas na barra superior para selecionar as opções de navegação, incluindo “Munícipe”, apresentam contraste muito baixo, tornando‑as pouco visíveis e difíceis de identificar.
    Captura da página Município
    • A evidência (2) revela que na página inicial as opções “mts cultura”, “mts habit”, “mts invest”, “mts jovem”, “mts sport” e “world’s best fish” não apresentam qualquer indicação visual de interatividade. Apesar de funcionarem como links para páginas externas, estes elementos não exibem mudança de estilo ao passar o cursor, nem possuem diferenciação gráfica que os distinga de texto estático. Esta ausência de feedback visual compromete a perceção de clicabilidade e pode dificultar a navegação dos utilizadores.
    Captura da página de Notícias município de Matosinhos
    Região Aveiro (NOK)

    Evidências:

    Nota de auditoria

    • a evidência (1) revela que há elementos interativos no website com pouco contraste. Por exemplo, os botões dos carrosséis suas combinações de cores tem uma taxa de contraste (2,1:1) inferior ao recomendado.
    Image
    Valpaços (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que há elementos interativos no website com pouco contraste. Por exemplo, na página “Ficha Técnica”, a cor das setas do menu lateral, tem um contraste baixo sobre o fundo (1,8:1).
    Captura do Menu lateral da página viver site de Valpaços
    Sabrosa (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) revela que a página de “Notícias” possui um campo de pesquisa que não aparenta ser clicável. O elemento interativo é apresentado apenas com o texto “Pesquisar notícias”, só que quando clicamos no texto abre o campo de input "procurar”. Além disso, o botão pesquisar não está a funcionar (Ver nota Requisito 8.2 - 10 Aspetos)
    Captura da página de Notícias município Sabrosa
    Caminha (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) revela que há elementos interativos no website com pouco contraste. Por exemplo, na página “Ficha Técnica”, a cor das setas do menu lateral, tem um contraste baixo sobre o fundo (1,8:1) Além disso, só depois que clicamos é que o campo de input torna-se visível.
    Captura da Página Ficha Técnica com problemas de contraste
    Peniche (NOK)

    Evidências:

    Nota de auditoria:

    • A evidência (1) demonstra que, na página inicial, a secção “Agenda” contém elementos interativos que não apresentam qualquer indicação visual de clicabilidade, podendo ser facilmente confundidos com texto estático por utilizar o mesmo estilo visual. De forma semelhante, o carrossel situado abaixo da secção “Em destaque” inclui um botão que altera o conteúdo apresentado, mas cuja função interativa não é evidente para o utilizador. Esta falta de pistas visuais compromete a perceção da interatividade e dificulta a navegação.
    Captura da secção Agenda na página inicial
    • a evidência (2) revela que a página “Recursos humanos” possui elementos interativos com pouco contraste. Por exemplo, as cores dos botões “Voltar” e dos botões secundários “Estágios PEPAL”, “Nomeações e Contratações” e “SIADAP” tem um contraste baixo sobre o fundo (1,4:1).
    Captura da Página Recursos Humanos
    • a evidência (3) revela que o menu lateral da página “Viver” possui elementos interativos com pouco contraste. Por exemplo a cor da seta interativa tem um contraste baixo sobre o fundo (2,2:1).
    Captura do Menu lateral da página Viver
    Peso da Régua (NOK)

    Evidências:

    Nota de auditoria:

    • a evidência (1) revela que a página inicial possui elementos interativos com pouco contraste. Por exemplo, as cores dos botões “Área do municípe” e “Contactos” tem um contraste baixo sobre o fundo (1,4:1).
    Página inicial de Peso Régua
    Pombal (OK)

    Evidências:

    Nota de auditoria:

    • A evidência (2) demonstra que a página “Newsletters” contém elementos interativos com contraste insuficiente. O botão “Subscrever”, por exemplo, utiliza a cor #6bcaba, que apresenta um contraste de apenas (1,9:1) face ao fundo, tornando‑se difícil de perceber, especialmente para pessoas com baixa visão.
    Página Newsletter de Pombal, com problemas de contraste
    Montalegre (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1), observamos que a página inicial apresenta elementos interativos, como os botões das redes sociais, cujo estilo visual não sugere clicabilidade. A única indicação de interação é a mudança do cursor ao passar o rato, o que não é suficiente para transmitir ao utilizador que se trata de elementos clicáveis. Rever o estilo dos elementos interativos para que seja mais percetível que são clicáveis.
    Página inicial Montalegre, botões das redes sociais não aparentam ser clicáveis
    Águeda (NOK)

    Evidências:

    Nota de auditoria:

    • Na evidência (1) a página inicial apresenta um campo de pesquisa, que têm um estilo não aparenta ser clicável, visto que a única indicação de que é clicável é a alteração do cursor ao passar o rato por cima do texto “O que procura?”. Recomendamos rever o estilo dos elementos interativos para que seja mais percetível que é uma área clicável.
    Página Inicial Águeda, campo de pesquisa não aparenta ser clicável
    Satão (NOK)

    Evidências:

    Nota auditoria:

    • A evidência (1) demonstra que a página inicial contém elementos interativos com contraste insuficiente. Os ícones dos botões “Atendimento”, “Documentos”, “Biblioteca online” e “IGT/PDM/Planos” por exemplo, utilizam a cor #FFFFFF sobre o fundo #ADDA19 que apresenta um contraste de apenas (1,6:1).
    Botões da página inicial Município de Satão, com baixo contraste
    • A evidência (1) demonstra que a página “Newsletters” contém elementos interativos com contraste insuficiente. Os botões “Submeter”, e os cards das respetivas newsletters, utilizam a cor #C4D600 sobre o fundo #FFFFFF que apresenta um contraste de apenas (1,6:1) inferior ao recomendado.
    Página Newsletter Satão
    Ílhavo (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1), revela que a página inicial apresenta elementos interativos, como os botões das redes sociais, cujo estilo visual não sugere clicabilidade. A única indicação de interação é a mudança do cursor ao passar o rato, o que não é suficiente para transmitir ao utilizador que tratam-se de elementos clicáveis. Recomendamos rever o estilo dos elementos interativos para que seja mais percetível que são clicáveis.
    Página inicial Ílhavo
    • Ainda na página inicial, há elementos interativos no website com pouco contraste. Por exemplo, o carrossel da secção “mais Ílhavo” possui os botões das setas interativas com baixo contraste sobre o fundo (1,5:1).
    Carrossel Mais Ílhavo, e botão com baixo contraste
    Oliveira do Bairro (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1) a página inicial há elementos interativos, como os cards de eventos e notícias, que têm um estilo não aparenta ser clicável, visto que a única indicação de que é clicável é a alteração do cursor. Rever o estilo dos elementos interativos para que seja mais percetível que são clicáveis.
    Image
    Vagos (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1), observa‑se que a página inicial apresenta elementos interativos, especificamente os textos do menu lateral secundário cujo estilo visual não transmite claramente que são clicáveis. Embora o conteúdo esteja sublinhado, não existe qualquer indicação de interatividade durante a navegação, sendo a alteração do cursor a única pista de que se tratam de elementos acionáveis. Recomenda‑se rever o estilo destes elementos para reforçar a perceção de clicabilidade, garantindo maior consistência e clareza na interação.
    Image
    Valongo (NOK)

    Evidências:

    Nota auditoria:

    • Na evidência (1), a secção “Acessos rápidos” apresenta várias opções como “Proteção Civil”, “Reabilitação Urbana”, “Portal do Ambiente” e “Portal dos Resíduos”, que só revelam o seu estado interativo ao passar o cursor. Estes elementos não possuem qualquer indicação visual prévia de que são clicáveis, ao contrário de outras opções da mesma secção, como “Documentação”, que exibem sublinhado no hover. Essa inconsistência visual prejudica a perceção de clicabilidade e pode levar o utilizador a não reconhecer estas opções como interativas.
    Image
    • Ainda na página inicial as imagens link do rodapé “Livro de reclamações” e “Acessibilidade” apresentam-se como elementos interativos com baixo contraste sobre o fundo (2,1:1) e podem não ser perceptíveis como área clicáveis. Recomendamos a revisão das cores dos elementos para garantir os valores mínimos de contraste em elementos interativos.
    Image
    Albergaria (Site em manutenção)

    Evidências:

    Nota auditoria:

    • Website está indisponível.

Checklist Transação

etiqueta: NOK

Nível de conformidade:

  • Checklist Transação: 72.7% (8/11)
    • Requisitos avaliados: 13 (2 N/A excluídos, 11 aplicáveis)
    • Requisitos OK: 8
    • Requisitos NOK: 3
    • Requisitos N/A: 2

Requisito 1.2 - Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 1.3 - Os formulários com mais de uma página têm a sequência de passos ilustrada

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 2.1 - O tamanho dos campos deve refletir o tamanho previsível dos dados

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

Lista de evidências recolhidas:

Requisito 2.4 - Campos obrigatórios devem ser claramente indicados como tal

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

Lista de evidências recolhidas:

Requisito 3.1 - Em ações longas, o sistema deve indicar o que está a acontecer

etiqueta: N/A

Lista de evidências recolhidas:

Requisito 3.2 - Deve ser confirmado o sucesso da transação/envio de informação

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 4.2 - As ações destrutivas nunca devem ser permanentes; deve ser sempre possível desfazer a operação

etiqueta: N/A

Lista de evidências recolhidas:

Outras violações

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

Lista de evidências recolhidas:

  • issue #108 Outras violações- Páginas com erros em links

    etiqueta: melhoriaetiqueta: outras violações
    Descrição do problema

    Links com erro tornam-se inacessíveis quando apresentam falhas no endereço, estão desatualizados ou levam a páginas removidas, impedindo o utilizador de aceder ao conteúdo pretendido e comprometendo a navegação e a experiência do utilizador.

    CM Esposende (Melhoria)

    Evidências:

    Nota auditoria:

    • Link da “Avaliação de Satisfação” do website indisponível.
    Página com erro e sem conteúdo
    • A página “Balcão Virtual” possui um menu lateral com a opção “Serviços online”. Ao selecionar, o utilizador é direcionado para página “Atendimento” que encontra-se um iframe com erro em seu link.
    Serviços online com erro
    CM Valongo (Melhoria)

    Evidências:

    Nota auditoria:

    • Link do vídeo na secção “Valongo, um território a descobrir!” encontra-se indisponível.
    Erro em vídeo
    CM Arco de Valdevez (Melhoria)

    Evidências:

    Nota auditoria:

    • Na evidência (1) encontra-se um link com erro, ao aceder o menu “Viver” na opção “Juntas de Freguesia”.
    Erro na página Juntas de Freguesia

    Recomendação geral de melhorias
    Garantir a atualização e correção de todos os links, substituindo endereços inválidos ou removidos e evitando erros de navegação. Desta maneira é possível assegurar que cada link permanece funcional e conduz ao conteúdo esperado, melhorando a experiência do utilizador

  • issue #106 Outras violações - Erro em setas de navegação na paginação (NOK)

    etiqueta: melhoriaetiqueta: outras violações
    Descrição do problema

    As setas de navegação na paginação estão sobrepostas, dificultando a identificação e o uso correcto dos controlos.

    CM Sabrosa (NOK)

    Evidência:

    Nota auditoria

    • A evidência (1) revela a página de “Notícias” possui erros nos elementos interativos das paginações, a partir da página 2, é possível perceber a sobreposição das setas.
    Image

    Recomendação

    Recomenda‑se a revisão do componente de paginação para corrigir a sobreposição das setas de navegação. A separação adequada dos controlos, com áreas clicáveis distintas e alinhamento consistente, melhora a usabilidade e garante conformidade com as boas práticas de acessibilidade.

  • issue #105 Outras violações - Calculadora ecológica com problemas em tooltips informativas

    etiqueta: melhoriaetiqueta: outras violações

    Descrição do problema
    A calculadora ecológica do website, utiliza um iframe externo com problemas nas tooltips informativas, as quais são ativas apenas com o rato e torna o conteúdo inacessível para leitores de ecrã e dispositivos táteis, pelo que necessita de revisão.

    Bragança (Melhoria)

    Evidência:

    Nota auditoria:

    • A evidência (1) revela que há uma “Calculadora ecológica” com tooltips informativas, que são acionadas apenas com a passagem do rato (hover) o que dificulta a compreensão em caso de dúvida para o utilizador. Apesar de ser um iframe de uma página externa, recomendamos rever o conteúdo disponível pois ele está inacessível por leitores de ecrã e também na interação por toque em dispositivos móveis.
    Calculadora ecológica com tooltips ativas apenas com o rato

    Recomendação
    Rever a calculadora para substituir tooltips dependentes de hover por elementos sempre acessíveis ou acionáveis por toque e teclado, garantindo total compatibilidade com leitores de ecrã.

  • issue #16 Outras violações - O foco do leitor de ecrã retorna para o início após carregamento "automático" de página

    etiqueta: melhoriaetiqueta: outras violações
    Descrição do problema

    Verifica-se que, em determinados momentos durante a navegação no website, ocorre um recarregamento automático da página quando que é feita alguma ação, como, por exemplo, a seleção de uma subopção no menu lateral. Esta situação provoca o retorno do foco do leitor de ecrã para o início da página, o que pode gerar frustração ao utilizador, uma vez que este terá de percorrer novamente todo o conteúdo para regressar à posição anterior e prosseguir com a sua interação. Isso pode estar a acontecer por existir um carregamento de conteúdo via AJAX.

    Por exemplo, no website da Câmara Municipal de Esposende, este comportamento ocorre durante a seleção de uma opção no menu lateral:

    Image

    Opção "Órgãos e Competências" não possui uma lista de opções definida na sua estrutura. Url: https://www.municipio.esposende.pt/pages/2234

    Image

    Ao selecionar a opção "Órgãos e Competências" o foco do leitor de ecrã retorna para o início da página

    Image

    Após selecionar a opção "Órgãos e Competências" é possível identificar na sua estrutura uma lista de subopções que até então não existia e a mudança na URL da página. Url: https://www.municipio.esposende.pt/municipio/camara-municipal/orgaos-e-competencias

    Sugestão de correção:
    • Para garantir que o foco não se perca, é necessário estruturar as opções do menu na árvore e evitar o uso do AJAX
    • Ao abrir uma opção do menu, não deve existir um carregamento para uma nova url pois isso força o foco a retornar para o início.
    Websites que necessitam de correções (NOK):
    Websites que estão a cumprir (OK)

Significado das etiquetas utilizadas