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ção Estado
Avaliação Automática etiqueta: N/A
Avaliação Manual etiqueta: NOK

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

Níveis de conformidade das avaliações manuais
Checklist Conformidade alcançada Resultado
10 aspetos 13.0% (3/23) etiqueta: Não passa
Conteúdo 29.4% (5/17) etiqueta: Não passa
Transação 70.0% (7/10) 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 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: 13.0% (3/23)
    • Requisitos avaliados: 23 (23 aplicáveis)
    • Requisitos OK: 3
    • Requisitos NOK: 20

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

etiqueta: NOK

Lista de evidências recolhidas:

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

    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

    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.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.
    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> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-6.1">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/47" target="_blank" rel="noopener noreferrer">issue#47</a> <strong>Problemas de contraste para texto normal</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 6.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>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.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n61">ver requisito 6.1 na lista 10 aspetos</a></p> </blockquote> <h5><strong>Notas gerais</strong></h5> <ul> <li>Contraste inferior para elementos textuais, elementos da interface e objetos gráficos.</li> <li>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</li> </ul> <h5><strong>Bragança (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/transparencia/comunicacao/editais">https://www.cm-braganca.pt/transparencia/comunicacao/editais</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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 <a href="https://www.cm-braganca.pt/pages/808"><a href="https://www.cm-braganca.pt/pages/808">Município</a></a>, <a href="https://www.cm-braganca.pt/servicos/balcao-unico"><a href="https://www.cm-braganca.pt/servicos/balcao-unico">Serviços</a></a> e <a href="https://www.cm-braganca.pt/participacao/alerta-braganca-ocorrencias"><a href="https://www.cm-braganca.pt/participacao/alerta-braganca-ocorrencias">Participação</a></a></li> </ul> <img src="https://github.com/user-attachments/assets/00bcad2c-067a-4825-bf12-5b39e9fdaa06" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Guimarães (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-guimaraes.pt/municipio/camara-municipal">https://www.cm-guimaraes.pt/municipio/camara-municipal</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/232618ba-1c55-4db9-97ab-91266d259feb" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK Página Início <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>(2) NOK Balcão Virtual <a href="https://www.municipio.esposende.pt/balcao-virtual/balcao-do-empreendedor">https://www.municipio.esposende.pt/balcao-virtual/balcao-do-empreendedor</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/c8545c5a-2486-4965-a428-801a9c3dbe7b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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 <strong>“Balcão Virtual”</strong> apresenta um rácio de contraste inferior ao recomendado entre as cores <strong>#FFFFFF</strong> e <strong>#00A68C</strong>, não cumprindo o presente requisito.</li> </ul> <img src="https://github.com/user-attachments/assets/134e9849-9040-4810-80c0-cbd668f51ed9" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li>(2) NOK <a href="https://www.cmav.pt/p/investir">https://www.cmav.pt/p/investir</a></li> <li>(3) NOK <a href="https://www.cmav.pt/p/investir">https://www.cmav.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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)</li> </ul> <img src="https://github.com/user-attachments/assets/9d7e17d1-526a-47f7-bb29-ee087a76ebde" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/d17fa955-d71b-4b97-be1a-88c68ae3dc83" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Matosinhos (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) NOK. <a href="https://www.cm-matosinhos.pt/municipio">https://www.cm-matosinhos.pt/municipio</a></li> </ul> <p>Nota auditoria:</p> <ul> <li><p>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).</p> </li> <li><p>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).</p> </li> </ul> <img src="https://github.com/user-attachments/assets/a73c77c4-a3be-45ef-b009-35ae692e029d" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Região Aveiro (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> <li>(2) 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) 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)</li> </ul> <img src="https://github.com/user-attachments/assets/42386cbf-4fde-4b27-9f7d-bf89d30bcf54" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/c6c18756-fad6-4a98-afe2-cb3965a8ccdd" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) NOK <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> </ul> <p>Nota auditoria</p> <ul> <li>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)</li> </ul> <img src="https://github.com/user-attachments/assets/5c144aa4-b3ce-49e4-a350-d39fd4156ac2" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>Na Cor do texto (#999999) com rácio de contraste inferior em relação a cor do plano de fundo (#FFFFFF).</li> </ul> <img src="https://github.com/user-attachments/assets/b423f58c-c2c7-4629-9224-92f5371b06fc" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>(2) NOK <a href="https://www.sabrosa.pt/visitar">https://www.sabrosa.pt/visitar</a></li> <li>(3) NOK. <a href="https://www.sabrosa.pt/autarquia">https://www.sabrosa.pt/autarquia</a></li> <li>(4) NOK <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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”.</li> </ul> <img src="https://github.com/user-attachments/assets/df1ebf83-33f4-4cc1-bd04-68c0da4a7476" 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 (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).</li> </ul> <img src="https://github.com/user-attachments/assets/dd25636e-c983-46f8-931c-2fd53d6035a5" 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) localiza-se problemas de contraste nos textos do formulário, com os pares de cores (#439246 e #FFFFFFF)</li> </ul> <img src="https://github.com/user-attachments/assets/5e27a7c4-e7b9-4ce9-acb4-7c75dd3ae09e" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Albergaria (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>NOK <a href="https://www.cm-albergaria.pt/ficha-tecnica">https://www.cm-albergaria.pt/ficha-tecnica</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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).</li> </ul> <h2><strong>Caminha (NOK)</strong></h2> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-caminha.pt/visitar/agenda-proximos-eventos/evento/almoco-convivio-de-feijoada">https://www.cm-caminha.pt/visitar/agenda-proximos-eventos/evento/almoco-convivio-de-feijoada</a></li> <li>(2) NOK <a href="https://www.cm-caminha.pt/visitar">https://www.cm-caminha.pt/visitar</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d927a390-0869-403e-b3f2-6ea12077cfbf" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>(2) NOK <a href="https://www.cm-peniche.pt/viver">https://www.cm-peniche.pt/viver</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/db5b9128-9126-4497-a848-6dc5792d6e96" 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) os textos e elementos gráficos que utilizam os pares de cores (#979AA1 e #FFFFFF) não passam na avaliação de contraste.</li> </ul> <img src="https://github.com/user-attachments/assets/82c58e2f-3217-4d23-9d22-accfa1d35358" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> <li>(2) NOK <a href="https://www.cm-pesoregua.pt/visitar/visitar">https://www.cm-pesoregua.pt/visitar/visitar</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/f7ba18ea-edf6-4c8b-8811-774fd6a63ce3" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/ad69eda3-c78f-4459-b8c0-e983fb4ea5d0" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Pombal (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-pombal.pt/servicos">https://www.cm-pombal.pt/servicos</a></li> <li>(2) NOK. <a href="https://www.cm-pombal.pt/formulario-comunicacao-de-ocorrencias">https://www.cm-pombal.pt/formulario-comunicacao-de-ocorrencias</a></li> <li>(3) NOK <a href="https://www.cm-pombal.pt/inicio">https://www.cm-pombal.pt/inicio</a></li> </ul> <p><strong>Nota de auditoria:</strong></p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/286f5624-4f09-43ba-be1b-deb39b99d1fc" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/085e6e81-16f1-4a9b-8ef0-c596be3cf480" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/e7423a35-bb9d-4815-b7ae-9a5a5fc9f6fa" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Montalegre (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>(2) NOK <a href="https://www.cm-montalegre.pt/turista/onde-comer-e-onde-dormir/alojamento">https://www.cm-montalegre.pt/turista/onde-comer-e-onde-dormir/alojamento</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/e81e39b7-53de-4e7c-b5b3-bf5741dfc1dc" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Águeda (NOK)</strong></h5> <p><strong>Evidências:</strong></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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/f8ddc360-fb60-4819-a39b-0046c7b63260" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-satao.pt/resultados_pesquisa?search_terms=freguesias">https://www.cm-satao.pt/resultados_pesquisa?search_terms=freguesias</a></li> <li>(2) NOK <a href="https://www.cm-satao.pt/areas-de-atividade/ambiente/qualidade-da-agua">https://www.cm-satao.pt/areas-de-atividade/ambiente/qualidade-da-agua</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/2aae55d7-7d04-49cb-b8b7-2ea927db4b64" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-ilhavo.pt/municipio">https://www.cm-ilhavo.pt/municipio</a></li> <li>(2) NOK. <a href="https://www.cm-ilhavo.pt">https://www.cm-ilhavo.pt</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/5b7b949e-0c7c-4632-8e52-58040d39ddca" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/0c60f24b-b592-4218-8ab3-4b61e78f99c1" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-olb.pt/visitar/concelho">https://www.cm-olb.pt/visitar/concelho</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/0abf528f-ca05-4f76-aec6-2dcdd373e550" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> <li>(2) NOK <a href="https://www.cm-vagos.pt/visitar">https://www.cm-vagos.pt/visitar</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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”.</li> </ul> <img src="https://github.com/user-attachments/assets/822bb69d-90d7-4244-8ebd-3239820f8229" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/0c4d5fb8-61f6-4dc1-aca7-befc2356a2e0" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/a4c0a70d-41f0-452c-902b-a286232139eb" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-6.2">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/48" target="_blank" rel="noopener noreferrer">issue#48</a> <strong>Problemas de contrastes para textos grandes</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 6.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>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.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n62">ver requisito 6.2 na lista 10 aspetos</a></p> </blockquote> <p>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.</p> <h5><strong>Notas gerais</strong></h5> <ul> <li>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.</li> </ul> <h5><strong>Bragança (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>(2) NOK. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/0c697619-6282-4490-a46f-9c53319b6b22" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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)</li> </ul> <img src="https://github.com/user-attachments/assets/f25a1a5c-a1e9-404e-8ff3-be6bbbc96668" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Guimarães (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>NOK. Página de Início <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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</li> </ul> <img src="https://github.com/user-attachments/assets/972dd06a-20bb-46a4-bcd7-7a98da5952d4" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/c22d8f1c-b96b-4612-9e38-f6cbf69998fe" 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><strong>Evidências:</strong><br>(1) NOK. Erros de contraste nos pares de cores #ffffff(cor de primeiro plano) #f0b416 (cor de plano de fundo) </p> <ul> <li>Página início: Cards em destaque <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>Página Viver: Banner e Menus de Navegação <a href="https://www.municipio.esposende.pt/pages/173">https://www.municipio.esposende.pt/pages/173</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/623d28f7-ced2-4b81-89ae-1c46ea7cb756" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Sabrosa (OK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK. <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/a03ac435-7ba0-48f7-85aa-78e3a888ca9a" 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><strong>Evidências:</strong></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>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).</li> </ul> <img src="https://github.com/user-attachments/assets/07c5792e-f64e-4bb3-8a45-716a8ec8e300" 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><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>Na evidência (1) identificamos que os textos das secções “Notícias” e “Agenda” com as cores (#0000000A <strong><strong>e #FFFFFF</strong>)</strong> possuem rácio de contraste inferior a 3:1 para textos grandes.</li> </ul> <img src="https://github.com/user-attachments/assets/598716a2-7895-4ba2-9e09-2b61ec8d4638" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Águeda (NOK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) NOK <a href="https://www.cm-agueda.pt/sugestoes-e-reclamacoes">https://www.cm-agueda.pt/sugestoes-e-reclamacoes</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/6085dc53-8240-4d48-aee7-c1aaf8c52435" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Websites (OK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li><strong>Arcos Valdevez (OK)</strong> <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li><strong>Matosinhos (OK)</strong> <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/</a></li> <li><strong>Região Aveiro (OK)</strong> <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li><strong>Valpaços (OK)</strong> <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> <li><strong>Albergaria (OK)</strong> <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> <li><strong>Peso da Régua (OK)</strong> <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> <li><strong>Pombal (OK)</strong> <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li><strong>Montalegre (OK)</strong> <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li><strong>Satão (OK)</strong> <a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a> ****</li> <li><strong>Ilhavo (OK)</strong> <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> <li><strong>Oliveira do Bairro (OK)</strong> <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li><strong>Vagos (OK)</strong> <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> <li><strong>Valongo (OK)</strong> <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>passam na avaliação de contraste para texto grande.</li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-7.1">Requisito 7.1 - Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado</h4> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 1 melhoria que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/34" target="_blank" rel="noopener noreferrer">issue#34</a> <strong>Os botões não estão etiquetados apropriadamente </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.1</span></div> <div class="issue-content"><blockquote> <p>Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n71">ver requisito 7.1 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Os botões do reprodutor multimédia devem ser etiquetados de forma clara. </p> <p>Verificámos que no vídeo mencionado abaixo, o botão para iniciar o reprodutor multimédia está nomeado como “Play” (aria-label = “Play”).</p> <img src="https://github.com/user-attachments/assets/63145d0e-46d5-4019-9c20-4b63a32fb49b" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "2025.12.22 Sessão Ordinária da Assembleia Municipal", disponível na página <a href="https://www.cm-pombal.pt/municipio/assembleia-municipal/transmissoes-em-direto-sessoes">Transmissões em Direto - Sessões</a>, do site do município de Pombal. O botão para reproduzir o vídeo tem aria-label = "Play".</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que adicionem um texto alternativo adequado e em português aos controlos dos botões para serem lidos pelo leitor de ecrã. Por exemplo, “reproduzir vídeo” ou “pausar vídeo”.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-pombal.pt/municipio/assembleia-municipal/transmissoes-em-direto-sessoes">Vídeo "2025.12.22 Sessão Ordinária da Assembleia Municipal", da página Transmissões em Direto - Sessões, do site do município de Pombal.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-7.2">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/44" target="_blank" rel="noopener noreferrer">issue#44</a> <strong>Vídeo inicia com imagem estática prolongada sem contexto</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong></p> <p>Um vídeo acessível deve fornecer contexto claro e contínuo para que todas as pessoas, incluindo, por exemplo, pessoas com deficiência visual ou auditiva, consigam compreender o que está a acontecer. Períodos longos com uma imagem estática, sem som ou narração, podem criar barreiras significativas já que não oferecem qualquer indicação sobre o conteúdo, a duração ou a intenção daquela parte do vídeo.</p> <p>No vídeo mencionado abaixo, a mesma imagem permanece estática durante mais de 8 minutos, sem som, sem narração e sem qualquer indicação do que está a acontecer. Para pessoas cegas ou com baixa visão, este período prolongado sem contexto pode gerar confusão, já que não existe informação que permita perceber o conteúdo ou a duração desta parte inicial.</p> <img src="https://github.com/user-attachments/assets/4037ef05-f8c6-49fc-8daa-785e783a0f9c" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Esposende Smartcity", presente na página <a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeos</a> do site da Câmara Municipal de Esposende como "Esposende Smartcity - o Projeto", apresenta no início uma imagem estática sem qualquer contexto durante mais de 8 minutos.</em></p> <p><strong>Sugestão de Correção</strong><br>Uma possível solução seria editar o vídeo, reduzindo a exibição desta imagem para apenas alguns segundos no início e transferir a informação presente nela para o site do Município de Esposende, por exemplo, na página<a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity"> Esposende SmartCity</a>. Exemplo de texto:</p> <p>“A aplicação móvel Esposende Smart City pode ser descarregada através das seguintes ligações:<br>Google Play: <a href="https://play.google.com/store/apps/details?id=com.innovpoint.appuv&hl=pt_PT">https://play.google.com/store/apps/details?id=com.innovpoint.appuv&hl=pt_PT</a><br>Apple Store: <a href="https://apps.apple.com/pt/app/esposende/id1214944675%E2%80%9D">https://apps.apple.com/pt/app/esposende/id1214944675”</a> </p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong><br><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo “Esposende Smartcity - o Projeto” na página Vídeos, do site da Câmara Municipal de Esposende.</a></p> <p><strong>Websites que Necessitam de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (NA)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/43" target="_blank" rel="noopener noreferrer">issue#43</a> <strong>O idioma das legendas fechadas é diferente do idioma do vídeo </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong><br>A narração, áudio ou audiodescrição dos conteúdos multimédia devem estar no mesmo idioma do site, para que os utilizadores consigam aceder ao conteúdo na língua que escolheram, principalmente quando não sabem a outra língua. </p> <p>O vídeo mencionado abaixo inclui legendas fechadas, mas estas estão em inglês enquanto o áudio está em português. Isto pode dificultar a compreensão para utilizadores que não dominam a língua inglesa.</p> <img src="https://github.com/user-attachments/assets/ace528f7-6f89-4e03-a94b-eaf5adc4caab" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Vídeo Promocional - Município de Sabrosa - 2023", disponível na <a href="https://www.sabrosa.pt/">página inicial</a> do site da Câmara Municipal de Sabrosa. Este vídeo apresenta legendas fechadas em inglês apesar de o áudio estar em português.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que sejam incluídas legendas fechadas e transcrições em português. </p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <p><a href="https://www.sabrosa.pt/">Vídeo "Vídeo Promocional - Município de Sabrosa - 2023", na página inicial do site da Câmara Municipal de Sabrosa. </a></p> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (NA)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/42" target="_blank" rel="noopener noreferrer">issue#42</a> <strong>O idioma das legendas fechadas é diferente do idioma do vídeo</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span></div> <div class="issue-content"><blockquote> <p>O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n72">ver requisito 7.2 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>A narração, áudio ou audiodescrição dos conteúdos multimédia devem estar no mesmo idioma do site, para que os utilizadores consigam aceder ao conteúdo na língua que escolheram, principalmente quando não sabem a outra língua. </p> <p>Os vídeos mencionados abaixo incluem legendas fechadas, mas estas estão em inglês enquanto o áudio está em português. Isto pode dificultar a compreensão para utilizadores que não dominam a língua inglesa.</p> <img src="https://github.com/user-attachments/assets/8b6809b0-fe77-46c7-a3fb-fdfc8e41eb56" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Pedro Tudela e Miguel Carvalhais | zet gallery", disponível no Youtube, apresenta legendas fechadas em inglês, apesar de o áudio estar em português.</em></p> <img src="https://github.com/user-attachments/assets/745551db-1ce8-49ad-8be3-f6af48f0c63d" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Volker Schnüttgen | zet gallery", disponível no Youtube, apresenta legendas fechadas em inglês, apesar de o áudio estar em português.</em></p> <img src="https://github.com/user-attachments/assets/230d6508-999e-4589-aaab-b0cc15a80bfd" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "OESTE GEOPARQUE MUNDIAL DA UNESCO", disponível na página <a href="https://www.cm-peniche.pt/municipio/comunicacao/noticias/noticia-32/geoparque-oeste-lanca-novo-video-promocional-como-territorio-geoparque-mundial-da-unesco">Geoparque Oeste lança novo vídeo promocional como território Geoparque Mundial da UNESCO</a>, do site do Município de Peniche. Este vídeo promocional está narrado em português mas com legendas fechadas em inglês.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que sejam incluídas legendas fechadas e transcrições em português. </p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo “octo____, de Pedro Tutela e Miguel Carvalhais” na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo "Volker Schnüttgen" na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.cm-peniche.pt/municipio/comunicacao/noticias/noticia-32/geoparque-oeste-lanca-novo-video-promocional-como-territorio-geoparque-mundial-da-unesco">Vídeo "OESTE GEOPARQUE MUNDIAL DA UNESCO", na página "Geoparque Oeste lança novo vídeo promocional como território Geoparque Mundial da UNESCO", do site do Município de Peniche.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (NA)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li>Câmara Municipal de Valongo</li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/41" target="_blank" rel="noopener noreferrer">issue#41</a> <strong>Não há legendas nos reprodutores de multimédia</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong></p> <p>As legendas devem descrever todos os sons de um conteúdo multimédia que esteja a ser reproduzido (como música, efeitos sonoros e conversas). De preferência, as legendas devem poder ser ligadas e desligadas, como acontece nas legendas de filmes (ex: Netflix).</p> <p>Verificámos que, nos vídeos mencionados abaixo, não existem legendas nem transcrição textual dos conteúdos.</p> <img src="https://github.com/user-attachments/assets/39701c4b-caee-470a-8785-278405bc0456" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Inauguração de Mulheres do Mar, de Alexandre Farto aka Vhils.”, presente na página <a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeos</a> do site da Câmara Municipal de Esposende com o nome "Inauguração da obra de arte de Vhils, Mulheres...". O vídeo não tem legendas disponíveis.</em></p> <img src="https://github.com/user-attachments/assets/2cd419fe-58ee-4aa3-8690-28399b3e8aa4" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Recriação Histórica do recontro de Valdevez - 2019”, presente na página <a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Cultura e Turismo online</a> do site do Município de Arcos de Valdevez, sem legendas disponíveis.</em></p> <img src="https://github.com/user-attachments/assets/784c489f-934f-4116-a6cb-10a2e1094402" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Paço Giela", presente na página <a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Cultura e Turismo online</a> do site do Município de Arcos de Valdevez, sem legendas disponíveis.</em></p> <img src="https://github.com/user-attachments/assets/75477be7-9e02-4577-98da-39a689ec1331" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Uma viagem pela diversidade cultural, paisagística e turística do nosso Concelho", disponível na página <a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeos</a>, do site do Município de Valpaços. O vídeo apresenta texto inserido diretamente sobre as imagens, mas não disponibiliza legendas ou transcrição que transmitam a informação desse texto.</em></p> <p><strong>Sugestão de Correção</strong></p> <p>Devem ser colocadas legendas em todos os vídeos presentes no website, de forma a garantir que os utilizadores conseguem compreender o conteúdo dos vídeos. Se não for possível garantir legendas, deve-se incluir uma transcrição textual do vídeo.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo “Inauguração da obra de arte de Vhils, Mulheres ...” na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Recriação Histórica do recontro de Valdevez - 2019", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Paço Giela", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Senhor Matosinhos 1967", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Viagens por terras de Bouças", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "Uma viagem pela diversidade cultural, paisagística e turística do nosso Concelho", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://www.cm-pombal.pt/municipio/assembleia-municipal/transmissoes-em-direto-sessoes">Vídeo "2025.12.22 Sessão Ordinária da Assembleia Municipal", na página Transmissões em Direto - Sessões, do site do Município de Pombal.</a></li> <li><a href="https://www.cm-olb.pt/municipio/comunicacao/logotipos-e-manual-de-normas-graficas/logotipo-do-municipio">Vídeo "Apresentação do Logótipo 'Oliveira do Bairro | No Coração da Bairrada'", na página Logótipo do Município, do site de Oliveira do Bairro.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/40" target="_blank" rel="noopener noreferrer">issue#40</a> <strong>Não há legendas nos reprodutores de multimédia</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong></p> <p>As legendas devem descrever todos os sons de um conteúdo multimédia que esteja a ser reproduzido (como música, efeitos sonoros e conversas). De preferência, as legendas devem poder ser ligadas e desligadas, como acontece nas legendas de filmes (ex: Netflix).</p> <p>Verificámos que, no vídeos mencionado abaixo, não existem legendas nem transcrição textual dos conteúdos.</p> <img src="https://github.com/user-attachments/assets/8e198f06-4429-4eb5-b691-ade32f2ab078" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer”, disponível na página <a href="https://www.regiaodeaveiro.pt/pages/496">Território</a>, do site da Região de Aveiro, sem legendas disponíveis.</em></p> <img src="https://github.com/user-attachments/assets/2dc0097a-5ccb-4a27-bdce-624b0975ebe8" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Timelapse & Hyperlapse Concelho Sabrosa - Douro-Portugal (4K)", disponível na página <a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeos</a>, do site do Município de Sabrosa.</em></p> <img src="https://github.com/user-attachments/assets/ab6f7763-7b18-4cc4-acf3-e126bac64136" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Trail Run Sicó", na página <a href="https://www.cm-pombal.pt/servicos/desporto-educacao-e-juventude/desporto/pombal-e-desporto">Pombal é Desporto</a>, do site do Município de Pombal, sem legendas disponíveis.</em></p> <p><strong>Sugestão de Correção</strong></p> <p>Devem ser colocadas legendas em todos os vídeos presentes no website, de forma a garantir que os utilizadores conseguem compreender o conteúdo dos vídeos. Se não for possível garantir legendas, deve-se incluir uma transcrição textual do vídeo.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.regiaodeaveiro.pt/pages/496">Vídeo “Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer” na página Território, do site da Região de Aveiro</a></li> <li><a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeo "Timelapse & Hyperlapse Concelho Sabrosa - Douro-Portugal (4K)", na página Vídeos, do site do Município de Sabrosa.</a></li> <li><a href="https://www.cm-pombal.pt/servicos/desporto-educacao-e-juventude/desporto/pombal-e-desporto">Vídeo "Trail Run Sicó", na página Pombal é Desporto, do site do Município de Pombal.</a></li> <li><a href="https://www.cm-agueda.pt/viver/congressos/congresso-educacao-e-saude-mental">Vídeo "Congresso Educação e Saúde Mental - Caminhos a trilhar", na página Congresso Educação e Saúde Mental, do site do Município de Águeda</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a></li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/39" target="_blank" rel="noopener noreferrer">issue#39</a> <strong>Não existe audiodescrição do vídeo</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong><br>Os vídeos que passam mensagens apenas percetíveis à visão devem conter uma audiodescrição, que é fundamental para que as pessoas cegas ou com baixa visão possam compreender o conteúdo exibido. </p> <p>Verificámos que os vídeos mencionados abaixo não contém uma audiodescrição do conteúdo.</p> <img src="https://github.com/user-attachments/assets/211d36e7-8914-4695-8042-1e893073879d" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Ocupação humana no território de Esposende: da Pré-História à Idade do Bronze", presente na página <a href="https://www.municipio.esposende.pt/viver/patrimonio-cultural">Património Cultural</a> do site da Câmara Municipal de Esposende. Este vídeo não inclui som nem narração e apresenta vários diagramas, mapas e imagens que, sem contexto, se tornam inacessíveis para, por exemplo, pessoas cegas ou com baixa visão.</em></p> <img src="https://github.com/user-attachments/assets/1e04428b-e852-4ddf-bb8c-f23edff784ec" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Centro Interpretativo do Barroco em sua CASA", disponível na página <a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Cultura e Turismo online</a>, do site do Município de Arcos de Valdevez. Este vídeo transmite grande parte da sua mensagem apenas através de imagens mas não inclui audiodescrição.</em></p> <img src="https://github.com/user-attachments/assets/30a1bdcc-6e76-44d9-be25-e59a539af3bf" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Senhor Matosinhos 1967", disponível na página <a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Matosinhos em vídeo</a>, do site do Município de Matosinhos. Este vídeo transmite grande parte da sua mensagem através de imagens mas não inclui audiodescrição.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que sejam adicionadas audiodescrições aos vídeos em questão.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo “Inauguração da obra de arte de Vhils, Mulheres ...” na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/patrimonio-cultural">Vídeo “Ocupação humana no território de Esposende: da Pré-História à Idade do Bronze” na página Património Cultural<br>, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Centro Interpretativo do Barroco em sua CASA", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Recriação Histórica do recontro de Valdevez - 2019", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Paço Giela", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Paço de Giela", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Porta do Mezio em sua CASA", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Abrace a Natureza!", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Naufrágio Veronese 1913", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Senhor Matosinhos 1967", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.regiaodeaveiro.pt/municipios/anadia/noticia/municipio-de-anadia-lanca-video-promocional-do-comercio-local">Vídeo “Anadia Estamos Juntos - Apoie o comércio local do concelho de Anadia!”, na página Município de Anadia lança vídeo promocional do comércio local, do site da Região de Aveiro.</a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "Uma viagem pela diversidade cultural, paisagística e turística do nosso Concelho", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "Ecovia do Rabaçal", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "Campeonato Nacional de Motocross na Pista do Cabeço", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeo "Timelapse & Hyperlapse Concelho Sabrosa - Douro-Portugal (4K)", na página Vídeos, do site do Município de Sabrosa.</a></li> <li><a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeo "Timelapse & Hyperlapse - Douro - Portugal (4K) (Município de Sabrosa -Cultura e Turismo)", na página Vídeos, do site do Município de Sabrosa.</a></li> <li><a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeo "Timelapse & Hyperlapse - Douro - Portugal - Parte 2 - (Município de Sabrosa -Cultura e Turismo)", na página Vídeos, do site do Município de Sabrosa.</a></li> <li><a href="https://www.sabrosa.pt/visitar/multimedia/video">Vídeo "Vídeo Promocional do Município de Sabrosa 1_2017", na página Vídeos, do site do Município de Sabrosa.</a></li> <li><a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeo "1º aniversário do Mercado Municipal "A Praça" 2019" , na página Vídeos, do site do Município de Albergaria-a-Velha</a></li> <li><a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeo "Desperdicio Alimentar" , na página Vídeos, do site do Município de Albergaria-a-Velha</a></li> <li><a href="https://www.cm-pombal.pt/servicos/desporto-educacao-e-juventude/desporto/pombal-e-desporto">Vídeo "Trail Run Sicó", na página Pombal é Desporto, do site do Município de Pombal.</a></li> <li><a href="https://www.cm-valongo.pt/diretorio-servicos/comunicacao/video">Vídeo "Novos Paços do Concelho e Centro Cívico de Valongo", na página Vídeos, do site da Câmara Municipal de Valongo.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (N/A)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/38" target="_blank" rel="noopener noreferrer">issue#38</a> <strong>Não existe audiodescrição do vídeo</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span></div> <div class="issue-content"><blockquote> <p>O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n72">ver requisito 7.2 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Os vídeos que passam mensagens apenas percetíveis à visão devem conter uma audiodescrição, que é fundamental para que as pessoas cegas ou com baixa visão possam compreender o conteúdo exibido.<br>Verificámos que os vídeos mencionados abaixo não têm audiodescrição.</p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que seja adicionada uma audiodescrição aos vídeos em causa.</p> <img src="https://github.com/user-attachments/assets/dc6f4c9e-f5e3-4b9a-be78-abfb8fe7d451" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Programa ambiental PEGADAS", na página <a href="https://www.cm-guimaraes.pt/pegadas/video">Galeria Multimédia</a>, do site do município de Guimarães. Este vídeo tem mensagens eminentemente visuais mas não tem audiodescrição.</em></p> <img src="https://github.com/user-attachments/assets/324d3b07-feac-4208-b154-dd54758c5718" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer", na página <a href="https://www.regiaodeaveiro.pt/pages/496">Território</a>, do site da Região de Aveiro. Este vídeo apresenta conteúdo essencialmente visual e não disponibiliza audiodescrição.</em></p> <img src="https://github.com/user-attachments/assets/25443e44-22c8-46d5-bedf-883d0e83bb8f" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Antes e Depois da Requalificação do Mercado Municipal 'A Praça'", na página <a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeos</a>, do site do Município de Albergaria-a-Velha. Parte deste vídeo apresenta conteúdo essencialmente visual e não disponibiliza audiodescrição.</em></p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/pegadas/video">Vídeo “Programa ambiental PEGADAS”, na página Galeria Multimédia, do site do município de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/pages/496">Vídeo "Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer", na página Território, do site da Região de Aveiro.</a></li> <li><a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeo "Antes e Depois da Requalificação do Mercado Municipal 'A Praça'", na página Vídeos, do site do Município de Albergaria-a-Velha.</a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Viagens por terras de Bouças", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.cm-caminha.pt/visitar/galeria-multimedia/video">Vídeo "Desfile de Carnaval Noturno", na página Vídeo, do site do Município de Caminha.</a></li> <li><a href="https://www.cm-pombal.pt/servicos/desporto-educacao-e-juventude/desporto/pombal-e-desporto">Vídeo "Pombal Athletics - Pombal é Desporto", na página Pombal é Desporto, do site do Município de Pombal.</a></li> <li><a href="https://www.cm-olb.pt/municipio/comunicacao/logotipos-e-manual-de-normas-graficas/logotipo-do-municipio">Vídeo "Apresentação do Logótipo 'Oliveira do Bairro | No Coração da Bairrada'", na página Logótipo do Município, do site de Oliveira do Bairro.</a></li> <li><a href="https://www.cm-vagos.pt/visitar">Vídeo "Vagos, as suas terras, o seu património, a sua história...", na página Visitar, do site do Município de Vagos. </a></li> </ul> <p><strong>Websites que Necessitam de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (N/A)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/37" target="_blank" rel="noopener noreferrer">issue#37</a> <strong>As legendas fornecidas pelos vídeos são automáticas</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O vídeo ou áudio deve conter preferencialmente legendas fechadas sincronizadas.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n72">ver requisito 7.2 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>As legendas automáticas do YouTube utilizam reconhecimento de voz, uma tecnologia que tem evoluído, mas que ainda apresenta limitações. Por esse motivo, o conteúdo transcrito pode não corresponder exatamente ao que é dito no vídeo.</p> <p>Nas páginas mencionadas abaixo é possível ligar e desligar a legenda dos vídeos, no entanto, as legendas fornecidas são automáticas, sendo necessário inserir legendas fechadas para os vídeos. </p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que cada vídeo inclua legendas fechadas. Caso as legendas geradas automaticamente estejam maioritariamente corretas, podem ser reaproveitadas para criar uma nova transcrição do conteúdo.</p> <img src="https://github.com/user-attachments/assets/4e5b94ae-34a8-41c7-9951-7e7230c424a9" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Plano de Desenvolvimento Social – Guimarães 2023”, disponível na página <a href="https://www.cm-guimaraes.pt/areas-de-intervencao/acao-social-e-comunidade/acao-social/area-do-desenvolvimento-e-recursos-sociais/rede-social">Rede Social</a> do site do Município de Guimarães. As legendas apresentadas são geradas automaticamente.</em></p> <img src="https://github.com/user-attachments/assets/9077aabe-5c0c-43d5-a5d8-a44eb30505c7" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Balcão BUPi de Guimarães", disponível na página <a href="https://www.cm-guimaraes.pt/balcao-virtual/balcao-unico-do-predio-bupi">Balcão Único do Prédio (BUPi)</a> do site do Município de Guimarães. As legendas apresentadas são geradas automaticamente.</em></p> <img src="https://github.com/user-attachments/assets/3b231103-9990-4d65-b0ef-6fad076e9bd0" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Museu da Água ao Ar Livre do Rio Vez", na página <a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Cultura e Turismo online</a>, do site do Município de Arcos de Valdevez. As legendas apresentadas são geradas automaticamente.</em></p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/areas-de-intervencao/acao-social-e-comunidade/acao-social/area-do-desenvolvimento-e-recursos-sociais/rede-social">Vídeo "Plano de Desenvolvimento Social - Guimarães 2023", na página Rede Social, do site do município de Guimarães.</a></li> <li><a href="https://www.cm-guimaraes.pt/balcao-virtual/balcao-unico-do-predio-bupi">Vídeo "Balcão BUPi de Guimarães", na página Balcão Único do Prédio (BUPi), do site do município de Guimarães.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos">Vídeo Esposende SmartCity, na página Fotografias e Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo "Escultura Padrão do Mar, de Volker Schnüttgen", na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo "Scratching the Surface – Mulheres do Mar, de ...", na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.municipio.esposende.pt/viver/atualidade/esposende-smartcity/fotografias-e-videos/video">Vídeo "Esposende Smartcity - o Projeto", na página Vídeos, do site da Câmara Municipal de Esposende.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Arcos de Valdevez Onde Portugal Se Fez", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Museu da Água ao Ar Livre do Rio Vez", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo “Juntos Vamos Vencer e Seguir em Frente”, na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Convite de Joel Cleto", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/cultura/historia-e-patrimonio/matosinhos-em-video">Vídeo "Inauguração do Porto de Leixões", na página Matosinhos em Vídeo, do site do Município de Matosinhos. </a></li> <li><a href="https://www.regiaodeaveiro.pt/comunicacao/noticias/noticia/a-apresentacao-do-barco-moliceiro-pela-voz-e-pela-alma-de-quem-os-constroi">Vídeo “Video BM 01 Barco Moliceiro Naval Carpentry Art 1”, na página A apresentação do Barco Moliceiro pela voz e pela alma de quem os constrói., do site da Região de Aveiro.</a></li> <li><a href="https://www.regiaodeaveiro.pt/municipios/anadia/noticia/municipio-de-anadia-lanca-video-promocional-do-comercio-local">Vídeo “Anadia Estamos Juntos - Apoie o comércio local do concelho de Anadia!”, na página Município de Anadia lança vídeo promocional do comércio local, do site da Região de Aveiro.</a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "A Introdução - Feira do Folar 2021", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://valpacos.pt/sou-visitante/comunicacao-e-imagem/video">Vídeo "Ecovia do Rabaçal", na página Vídeos, do site do Município de Valpaços.</a></li> <li><a href="https://valpacos.pt/balcao-virtual/como-aderir-a-fatura-eletronica">Vídeo "Fatura Eletrónica do Município de Valpaços", na página Como aderir à Fatura Eletrónica, do site do Município de Valpaços.</a></li> <li><a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeo "Antes e Depois da Requalificação do Mercado Municipal 'A Praça'", na página Vídeos, do site do Município de Albergaria-a-Velha.</a></li> <li><a href="https://www.cm-albergaria.pt/viver/ambiente-planeamento-e-territorio/mercados-e-feiras/mercado-municipal-a-praca/eventos/video">Vídeo "Desperdicio Alimentar" , na página Vídeos, do site do Município de Albergaria-a-Velha</a></li> <li><a href="https://www.cm-caminha.pt/visitar/galeria-multimedia/video">Vídeo "Desfile de Carnaval Noturno", na página Vídeo, do site do Município de Caminha.</a></li> <li><a href="https://www.cm-caminha.pt/visitar/galeria-multimedia/video">Vídeo "Escritor Luís Espinheira", na página Vídeo, do site do Município de Caminha.</a></li> <li><a href="https://www.cm-caminha.pt/visitar/galeria-multimedia/video">Vídeo "I Gala do Desporto", na página Vídeo, do site do Município de Caminha.</a></li> <li><a href="https://www.cm-satao.pt/noticias/noticia/municipio-de-satao-ofereceu-passeio-gratuito-aos-seniores-do-concelho">Vídeo "Passeio Sénior 2023 - Quinta da Malafaia", na página MUNICÍPIO DE SÁTÃO OFERECEU PASSEIO GRATUITO AOS SENIORES DO CONCELHO, do site do Município de Sátão.</a></li> <li><a href="https://www.cm-vagos.pt/visitar">Vídeo "Vagos, as suas terras, o seu património, a sua história...", na página Visitar, do site do Município de Vagos. </a></li> <li><a href="https://www.cm-valongo.pt/diretorio-servicos/comunicacao/video">Vídeo "Parque das Serras do Porto - documentário natural da autoria de Paulo Ferreira", na página Vídeos, do site do Município de Valongo</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (N/A)</strong></p> <ul> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/36" target="_blank" rel="noopener noreferrer">issue#36</a> <strong>As legendas fornecidas pelos vídeos são automáticas</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong><br>As legendas automáticas do YouTube utilizam reconhecimento de voz, uma tecnologia que tem evoluído, mas que ainda apresenta limitações. Por esse motivo, o conteúdo transcrito pode não corresponder exatamente ao que é dito no vídeo.</p> <p>Na página mencionada abaixo é possível ligar e desligar a legenda dos vídeos, no entanto, as legendas fornecidas são automáticas, sendo necessário inserir legendas fechadas para os vídeos. </p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que cada vídeo inclua legendas fechadas. Caso as legendas geradas automaticamente estejam maioritariamente corretas, podem ser reaproveitadas para criar uma nova transcrição do conteúdo.</p> <img src="https://github.com/user-attachments/assets/0e4c582f-c633-4f4c-b40d-328b338b8a59" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Nunca fui às Berlengas", na página <a href="https://www.cm-peniche.pt/visitar/ilha-da-berlenga/video">Vídeos</a>, do site do Município de Peniche. As legendas apresentadas são geradas automaticamente.</em></p> <img src="https://github.com/user-attachments/assets/a8f4b2cd-b967-4fbd-8f33-c8e88810db69" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Berlengas e Peniche na R T P com Haliotis", disponível na página <a href="https://www.cm-peniche.pt/visitar/ilha-da-berlenga/video">Vídeos</a>, do site do Município de Peniche. As legendas apresentadas são geradas automaticamente.</em></p> <img src="https://github.com/user-attachments/assets/ae7a0381-1710-429a-84a0-033f1374b190" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Cidadania e Desenvolvimento", na página <a href="https://www.cm-pesoregua.pt/atividade-municipal/comunicacao/noticias/noticia/alunos-da-escola-profissional-da-regua-juntos-pelo-meio-ambiente">ALUNOS DA ESCOLA PROFISSIONAL DA RÉGUA JUNTOS PELO MEIO AMBIENTE</a>, do site do município do Peso da Régua. As legendas deste vídeo são geradas automaticamente.</em></p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-peniche.pt/visitar/ilha-da-berlenga/video">Vídeo "'NUNCA FUI ÀS BERLENGAS...' de João Egreja ...", na página Vídeos, do site do Município de Peniche.</a></li> <li><a href="https://www.cm-peniche.pt/visitar/ilha-da-berlenga/video">Vídeo "BERLENGAS E PENICHE NO PROGRAMA PORTUGAL NO ...", na página Vídeos, do site do Município de Peniche.</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/comunicacao/noticias/noticia/alunos-da-escola-profissional-da-regua-juntos-pelo-meio-ambiente">Vídeo "Cidadania e Desenvolvimento", na página ALUNOS DA ESCOLA PROFISSIONAL DA RÉGUA JUNTOS PELO MEIO AMBIENTE, do site do município do Peso da Régua.</a></li> <li><a href="https://www.cm-montalegre.pt/pages/383">Vídeo "Vídeo Promocional do Município de Montalegre", na página Vídeo promocional, do site da Câmara Municipal de Montalegre.</a></li> <li><a href="https://www.cm-agueda.pt/balcao-virtual/bupi-balcao-unico-do-predio">Vídeo "Campanha BUPi 'Não deixe as suas raízes ao acaso'", na página BUPi - Balcão Único do Prédio, do site da Câmara Municipal de Águeda.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a></li> </ul> <p><strong>Websites em que Este Problema Não se Aplica (N/A)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/35" target="_blank" rel="noopener noreferrer">issue#35</a> <strong>A língua da narração/áudio é diferente do idioma do site</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 7.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong></p> <p>A narração, áudio ou audiodescrição dos conteúdos multimédia devem estar no mesmo idioma do site, para que os utilizadores consigam aceder ao conteúdo na língua que escolheram, principalmente quando não sabem a outra língua. </p> <p>Os vídeos mencionados abaixo têm narração, mas está numa língua diferente da do site, pelo que pode não ser compreendido pelos utilizadores que não são fluentes nessa língua. </p> <img src="https://github.com/user-attachments/assets/54afa2be-218b-4904-8d69-38ba6b4b176a" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo "Arcos de Valdevez - Together we will win and move on", disponível na página <a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Cultura e Turismo Online</a>, do site do Município de Arcos de Valdevez. Este vídeo é narrado em inglês.</em></p> <img src="https://github.com/user-attachments/assets/214b457c-061f-4393-9e32-078f7de3429d" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Vídeo “Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional”, disponível na página <a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/arquivo/aqua-add">Aqua-add</a>, do site da Região de Aveiro. Este vídeo é narrado em inglês.</em></p> <p><strong>Sugestão de Correção</strong></p> <p>Recomendamos que seja adicionada uma transcrição da narração em português junto do vídeo. </p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cmav.pt/conhecer/cultura-e-turismo-online">Vídeo "Arcos de Valdevez - "Together we will win and move on", na página Cultura e Turismo online, do site do Município de Arcos de Valdevez.</a></li> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/arquivo/aqua-add">Vídeo “Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional”, na página Aqua-add, do site da Região de Aveiro.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a></li> </ul> <p><strong>Websites em que Este Problema não se Aplica</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-8.2">Requisito 8.2 - Quando se retira a CSS, a informação aparece numa ordem lógica</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/58" target="_blank" rel="noopener noreferrer">issue#58</a> <strong>Ordem dos controles do carrossel não é apropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira a CSS, a informação aparece numa ordem lógica.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n82">ver requisito 8.2 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema:</h5> <p>Os botões presentes no carrossel da <a href="https://github.com/unidade-acesso/report_012/issues/%E2%80%A2%09https:/www.cm-vagos.pt/">página inicial de Vagos</a> não se encontram estruturalmente adjacentes.</p> <img src="https://github.com/user-attachments/assets/c3f1d99d-ba5c-429e-a29d-6affc32f6242" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Tal obriga a que os utilizadores de leitores de ecrã tenham de percorrer vários itens do carrossel para para procederem à navegação entre o botão “Subir” e o botão “Descer”, o que impacta negativamente a experiência de navegação. Com efeito, a probabilidade de o botão “Descer” não ser encontrado, ou de não ser feita a relação entre os dois botões, é muito elevada.</p> <h5>Websites que necessitam de correções (NOK):</h5> <p>Apenas o referido acima.</p> <h5>Websites que estão a cumprir (OK):</h5> <p>Não foi identificado o mesmo problema nos seguintes websites:</p> <ul> <li>CM Bragança: <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Guimarães: <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>CM Esposende: <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>CM Arco de Valdevez: <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>Região de Aveiro: <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li>Valpaços: <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> <li>Sabrosa: <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>Albergaria velha: <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> <li>Águeda: <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li>Oliveira do Bairro: <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li>Caminha: <a href="https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22">https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22</a></li> <li>CM Matosinhos: <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> <li>Peniche: <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>Pombal: <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>Monte Alegre: <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>Sátão: <a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a> </li> <li>Ílhavo: <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a> </li> <li>CM Valongo: <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> <h5>Sugestão de correção</h5> <p>Recomendamos que todos os carrosséis tenham os seus botões estruturalmente adjacentes, fazendo correspondência entre a ordem do html e a ordem visual, de forma a formarem uma estrutura semântica una e assim facilitarem a compreensão e navegação nos vários elementos dos carrosséis.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/25" target="_blank" rel="noopener noreferrer">issue#25</a> <strong>Existem elementos que estão a ser lidos apenas pelos leitores de ecrã</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira a CSS, a informação aparece numa ordem lógica.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n82">ver requisito 8.2 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se, nos websites alvo de análise, a existência de elementos que se encontram indevidamente visíveis às tecnologias de apoio, o que gera ruídos e dificulta a interação por parte dos utilizadores.</p> <p>Por exemplo, nas páginas internas é apresentada um campo de pesquisa "interno" na qual se verifica a existência de um input do tipo <code>type="image"</code>. Esta construção é válida, uma vez que este tipo de input é semelhante a um botão do tipo <code>submit</code>. No entanto, existe uma label associada a este input, o que é incorreto, sendo essa label visível apenas para leitores de ecrã gerando ruídos na navegação:</p> <img src="https://github.com/user-attachments/assets/8bdf1f92-d865-43ad-be1e-cbb20be33d66" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Campo de pesquisa estruturado com o botão do tipo input type="image" e com uma label visível aos leitores de ecrã que possui o mesmo nome do botão "Botão de pesquisar Notícias" do website da <a href="https://www.municipio.esposende.pt/pages/173">CM de Esposende</a></em></p> <hr> <p>Outro tipo de problema encontrado, foi no website da <a href="https://www.cm-pombal.pt/inicio">Câmara Municipal de Pombal</a>, as subopções do menu “Acesso rápido” encontram-se estruturadas no HTML após as opções “Ocorrências” e “Balcão Digital”. Para além disso, estas subopções estão visíveis no código mesmo quando o menu não se encontra expandido.</p> <p>Esta implementação faz com que, ao navegar para as subopções de “Acesso rápido”, seja necessário percorrer previamente as opções “Ocorrências” e “Balcão Digital”. Adicionalmente, o facto de as subopções estarem expostas às tecnologias de apoio mesmo quando não foram abertas pelo utilizador pode causar confusão na navegação e comprometer a experiência de utilização, em particular para utilizadores de leitores de ecrã:</p> <img src="https://github.com/user-attachments/assets/d51e18d3-b8e9-4b1a-9a85-f083e5df2053" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Opções de “Acesso rápido” visíveis para o leitor de ecrã mesmo não estando expandido do website da <a href="https://www.cm-pombal.pt/">CM de Pombal</a></em></p> <img src="https://github.com/user-attachments/assets/7f08fed1-4158-4b56-8b9b-83fa18734e81" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>As subopções estão estruturadas no HTML depois das opções de “Ocorrências” e “Balcão Digital” do website da <a href="https://www.cm-pombal.pt/">CM de Pombal</a></em></p> <h6>Sugestão de correção</h6> <ul> <li>Relativamente ao campo de pesquisa, é necessário verificar todos os locais onde este é apresentado, garantindo que não é utilizada uma label associada a botões do tipo type="image".</li> <li>Para as subopções de “Acesso rápido”, estas devem ser estruturadas de seguida e antes das opções “Ocorrências” e “Balcão Digital”. Devem garantir que as subopções apenas ficam visíveis quando a opção “Acesso rápido” se encontra expandida. Para esse efeito, recomenda-se a efetuarem correcções identificadas também na issue #26 .</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.cm-braganca.pt/transparencia/comunicacao/editais">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/areas-de-intervencao/ambiente-e-sustentabilidade/urbanismo/urbanismo-digital">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/pages/173">Município de Esposende (NOK)</a></li> <li><a href="https://www.cmav.pt/informar/noticias">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/servicos/comunicacao-e-imagem/noticias">CM de Matosinhos (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/comunicacao/noticias">Comunidade Intermunicipal Região de Aveiro (NOK)</a></li> <li><a href="https://valpacos.pt/contactos">CM de Valpaços (NOK)</a></li> <li><a href="https://www.sabrosa.pt/viver/atualidade/agenda">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/municipio/comunicacao/noticias">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/atividades-desenvolvidas">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/municipio/comunicacao/noticias">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/cidadao/balcao-online/taxas-e-licencas">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/perguntas-frequentes">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/balcao-virtual/documentos/editais">Município de Satão (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/viver/editais-e-avisos">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/descobrir/eventos">CM de Valongo (NOK)</a></li> <li><a href="https://www.cm-olb.pt/municipio/comunicacao/noticias">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias">CM de Vagos (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/municipio/comunicacao-e-transparencia/noticias-do-municipio">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias">CM de Caminha (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>É necessário efetuar correções em todos os websites.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/23" target="_blank" rel="noopener noreferrer">issue#23</a> <strong>O botão do menu compacto (mobile e tablet) está visível para leitores de ecrã em desktop</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><h5>Descrição do problema</h5> <p>Com o leitor de ecrã VoiceOver, é possível identificar o botão do menu compacto na versão desktop, utilizando o navegador Safari. Por exemplo, no website da Câmara Municipal de Guimarães, o menu é identificado como uma opção dentro da navegação mesmo estando ocultado via CSS:</p> <img src="https://github.com/user-attachments/assets/b282cb22-93e9-4d97-8675-d25e4f5e31cc" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Botão menu visível dentro da navegação em desktop do website CM Guimarães</em></p> <img src="https://github.com/user-attachments/assets/b27e4fff-8b0a-46f4-a297-d470b715fc99" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>No código é possível identificar que o menu não está escondido via CSS</em></p> <hr> <p>Outro exemplo ocorre no website da CM Bragança. Apesar de o menu estar oculto através do CSS com o atributo display: none, ele continua visível juntamente com as restantes opções do menu principal:</p> <img src="https://github.com/user-attachments/assets/ce83e699-d08c-4633-9af6-f6624960eb6a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Embora o botão menu compacto esteja escondido via CSS através do display:none ele está a ser anunciado pelo leitor de ecrã dentro da navegação do menu principal</em></p> <h6>Sugestão de correção</h6> <ul> <li>Deve ser utilizado o atributo aria-hidden tanto no menu desktop como no menu compacto. O menu que estiver visível no momento deverá ter <code>aria-hidden="false"</code>, enquanto o outro deverá manter <code>aria-hidden="true"</code>.</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.cm-braganca.pt/transparencia/ligacoes-uteis">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/municipio/camara-municipal/publicacoes">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/pages/173">Município de Esposende (NOK)</a></li> <li><a href="https://www.cmav.pt/p/investir">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/urbanismo">CM de Matosinhos (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos">Comunidade Intermunicipal Região de Aveiro (NOK)</a></li> <li><a href="https://valpacos.pt/sou-visitante">CM de Valpaços (NOK)</a></li> <li><a href="https://www.sabrosa.pt/balcao-virtual">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/visitar">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/atividades-desenvolvidas">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/informar">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/cidadao">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/participar">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/conhecer-satao/feiras-festas-e-romarias">Município de Satão (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/investir">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/investir">CM de Valongo (NOK)</a></li> <li><a href="https://www.cm-olb.pt/investir">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/investir">CM de Vagos (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/investir">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/investir">CM de Caminha (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Todos os websites apresentam o mesmo problema.</p> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-8.3">Requisito 8.3 - Quando se retira a CSS, deve ser possível reconhecer a semântica dos diversos elementos</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/60" target="_blank" rel="noopener noreferrer">issue#60</a> <strong>Faixas de avisos que exibem conteúdos automaticamente e não permitem pausar</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema:</h5> <p>Os itens da secção avisos presente na <a href="https://www.cm-matosinhos.pt/">página inicial de Matosinhos</a> estão sempre a passar e não permitem pausa.</p> <img src="https://github.com/user-attachments/assets/d19a5f2c-adf0-4275-b3ac-9257f46e6d06" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Websites que necessitam de correções (NOK):</h5> <p>O referido acima e os seguintes:</p> <ul> <li>Peniche: <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>Pombal: <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>Monte Alegre: <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>Sátão: <a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a></li> <li>Ílhavo: <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> </ul> <h5>Websites que estão a cumprir (OK):</h5> <p>Não foi identificado a faixa de aviso nos seguintes websites:</p> <ul> <li>CM Bragança: <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Guimarães: <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>CM Esposende: <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>CM Arco de Valdevez: <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>Região de Aveiro: <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li>Valpaços: <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> <li>Sabrosa: <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>Albergaria velha: <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> <li>Águeda: <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li>Oliveira do Bairro: <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li>Vagos: <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> <li>Caminha: <a href="https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22">https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22</a></li> <li>Peso da régua: <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> </ul> <h5>Sugestão de correção</h5> <p>Recomendamos a inclusão de um botão para que seja pausada a passagem dos itens na secção avisos em todos os sites.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/59" target="_blank" rel="noopener noreferrer">issue#59</a> <strong>Carrosséis que exibem conteúdos automaticamente e não permitem pausar</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema:</h5> <p>Os dois carrosséis presentes na <a href="https://www.cm-satao.pt/">página inicial de Sátão</a> (secções notícias e agenda) não permitem pausar a passagem dos elementos.</p> <img src="https://github.com/user-attachments/assets/999a324b-2a03-4b95-bbe4-2c847f884b41" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Elementos do carrossel da secção notícias</em></p> <p>Para além disso, não informam quantos itens fazem parte do carrossel,<br>Acresce ainda que os botões para avanço e recuo nos elementos dos carrosséis não estão etiquetados e foram estruturados com uma semântica incorreta não nativa para estes controlos.</p> <img src="https://github.com/user-attachments/assets/f5155301-23d3-4aaa-9429-8e5906065fd3" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Botões do carrossel da secção notícias implementados com um elemento div</em></p> <h5>Websites que necessitam de correções (NOK):</h5> <p>O referido acima, e os seguintes:</p> <ul> <li>CM Bragança: <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Guimarães: <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>CM Esposende: <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>CM Arco de Valdevez: <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>CM Matosinhos: <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> <li>Região de Aveiro: <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li>Valpaços: <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> <li>Sabrosa: <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>Albergaria velha: <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> <li>Peniche: <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>Pombal: <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>Monte Alegre: <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>Águeda: <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li>Ílhavo: <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> <li>Oliveira do Bairro: <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li>Vagos: <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> <li>CM Valongo: <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> <li>Caminha: <a href="https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22">https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22</a> principal. Exibe apenas imagens e está visível para o leitor de ecrã (imagens ##### Websites que estão a cumprir (OK):</li> <li>Peso da régua: <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> </ul> <h5>Sugestão de correção</h5> <p>Recomendamos que seja indicado visualmente o número de elementos de cada carrossel, e que a navegação seja exclusivamente controlada pelo utilizador, que, para além dos dois botões para avançar e retroceder, pode incluir um botão que permita pausar a passagem dos itens.<br>Recomendamos ainda a correta estruturação dos botões (button ao invés de div), bem como a colocação de nomes acessíveis nos mesmos<br>Para mais informações é possível consultar os artigos <a href="https://www.w3.org/WAI/tutorials/carousels/working-example/">Carousel Structure</a> e <a href="https://www.w3.org/WAI/ARIA/apg/patterns/carousel/">Carousel (Slide Show or Image Rotator) Pattern</a> do W3C.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/46" target="_blank" rel="noopener noreferrer">issue#46</a> <strong>O leitor de ecrã identifica mais opções do que é apresentado visualmente no carrossel</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema:</h5> <p>O carrossel existente na secção “Notícias” da <a href="https://www.cm-satao.pt/pages/1100">página inicial do Município de Sátão</a> apresenta três elementos visualmente. No entanto, os dez elementos do carrossel aparecem visíveis para os leitores de ecrã.</p> <img src="https://github.com/user-attachments/assets/eda9e6a5-3e11-40f7-981a-3b056042be73" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Carrossel que mostra todos os itens aos leitores de ecrã</em></p> <p>Tal problema também ocorre no carrossel da secção “Agenda” da página inicial do mesmo site.</p> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li>CM Bragança: <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Guimarães: <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>CM Esposende: <a href="https://www.municipio.esposende.pt/inicio">https://www.municipio.esposende.pt/inicio</a></li> <li>CM Arco de Valdevez: <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>CM Matosinhos: <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> <li>Região de Aveiro: <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li>Valpaços: <a href="https://valpacos.pt/">https://valpacos.pt/</a></li> <li>Sabrosa: <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>Albergaria velha: <a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> <li>Peniche: <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>Pombal: <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>Monte Alegre: <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>Águeda: <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li>Ílhavo: <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> <li>Oliveira do Bairro: <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li>Vagos: <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> <li>CM Valongo: <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> <li>Caminha: <a href="https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22">https://www.cm-caminha.pt/1?events_list_51_page=2&start_date=2026-01-22</a></li> </ul> <h5>Websites que estão a cumprir (OK):</h5> <ul> <li>Peso da régua: <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> </ul> <h5>Sugestão de correção</h5> <p>Recomendamos que os elementos mostrados aos leitores de erã sejam exatamente aqueles que são mostrados visualmente de cada vez, para que os utilizadores destas tecnologias tenham a mesma experiência de navegação dos demais utilizadores.</p> <p>Para mais informações é possível consultar os artigos <a href="https://www.w3.org/WAI/tutorials/carousels/working-example/">Carousel Structure</a> e <a href="https://www.w3.org/WAI/ARIA/apg/patterns/carousel/">Carousel (Slide Show or Image Rotator) Pattern</a> do W3C.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/31" target="_blank" rel="noopener noreferrer">issue#31</a> <strong>Tab estruturada de forma inapropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema</h5> <p>No website da <a href="https://www.cm-pombal.pt/">CM de Pombal</a>, existe um componente <em>tab</em> que não está estruturado de forma adequada. Para além de não ser possível identificá-lo como um tabulador através de leitores de ecrã, existem outros aspetos que deveriam ser implementados para garantir o seu correto funcionamento com o teclado e leitores de ecrã. Por exemplo:</p> <ul> <li>Ao aceder ao conteúdo de uma tab, deve ser possível saltar das opções para o respetivo conteúdo com a tecla TAB.</li> <li>O painel do tabulador deve ser corretamente identificado para que o leitor de ecrã perceba que se trata de uma área de conteúdo associada a cada tab.</li> </ul> <img src="https://github.com/user-attachments/assets/a1f59ac5-b2e3-4c1d-9c26-81d24bedd121" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Leitor de ecrã não identifica como um tabulador(separador) e não é possível fazer o salto para o conteúdo apresentado</em></p> <img src="https://github.com/user-attachments/assets/c9187725-64c6-4cf1-84bd-f5fecb027f10" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Leitor de ecrã não informa que está dentro do conteúdo do tabulador (painel de separador)</em></p> <img src="https://github.com/user-attachments/assets/6c467cb4-1815-4d02-8d9d-26eab536afa2" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Exemplo de construção de uma tab pela W3C indica que é um tabulador, o número de opções e o painel do separador e é possível fazer o salto para o conteúdo com a tecla TAB</em></p> <h6>Sugestão de correção</h6> <ul> <li>É necessário garantir que o tabulador seja construído de forma adequada. Para isso, utilizem os atributos ARIA <code>role="tablist"</code>, <code>role="tab"</code> e <code>role="tabpanel"</code>, para indicar aos leitores de ecrã que se trata de um tabulador.</li> <li>Para garantir uma interação apropriada, utilizem aos atributos <code>aria-selected</code>, <code>aria-controls</code> e <code>tabindex</code>, em conjunto com JavaScript.</li> <li>Para mais informações partilhamos o <a href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/">exemplo de construção de TAB</a> da W3C e <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role">documentação sobre as propriedades role="tab"</a></li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Não foi identificado o componente tab nos seguintes websites: </p> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (OK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (OK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (OK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (OK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/30" target="_blank" rel="noopener noreferrer">issue#30</a> <strong>Existem acordeões construídos de forma inapropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que os acordeões apresentados no website estão a ser construídos de forma inadequada, uma vez que são utilizadas divs em vez de se recorrer a elementos nativos do HTML.</p> <p>Por exemplo, no website da <a href="https://www.cm-braganca.pt/pages/1307?site_help_link_category_id=10">CM de Bragança</a> existem acordeões que estão sendo estruturados como <code>divs</code>:</p> <img src="https://github.com/user-attachments/assets/44a7306a-93b9-449d-ad37-cf8f67fd095b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Acordeão estruturado como div no HTML</em></p> <p>Isto impede que o leitor de ecrã reconheça o elemento como interativo, uma vez que não é indicado que se trata de um botão ou de um link, nem se o elemento se encontra aberto ou fechado:</p> <img src="https://github.com/user-attachments/assets/83ab7b54-18f2-4435-8547-1f01e9f26be6" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Leitor de ecrã não identifica como elemento interativo e não é possível identificar se o conteúdo é possível de expandir ou fechar</em></p> <h6>Sugestão de correção</h6> <ul> <li>Definir o acordeão semanticamente como um botão, garantindo que o seu título é atribuído como um cabeçalho apropriado.</li> <li>É necessário informar as tecnologias de apoio sobre o estado do acordeão (aberto ou fechado). Para esse efeito, deve ser utilizado o atributo <code>aria-expanded</code> em conjunto com JavaScript.</li> </ul> <h5>Websites que estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-braganca.pt/pages/1307?site_help_link_category_id=10">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/areas-de-intervencao/ambiente-e-sustentabilidade/urbanismo/urbanismo-digital/perguntas-frequentes">CM de Guimarães (NOK)</a></li> <li><a href="https://www.cmav.pt/viver/administracao-e-territorio/urbanismo/urbanizacao-e-edificacao/perguntas-frequentes">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/pages/1975?site_help_link_category_id=12">CM de Matosinhos (NOK)</a></li> <li><a href="https://valpacos.pt/perguntas-frequentes-2">CM de Valpaços (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/municipio/camara-municipal/composicao-2025-2029#faq-0">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/viver/servicos-municipais/bem-estar-e-saude-animal/perguntas-frequentes">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/participar/orcamento-participativo-de-peniche-ano-2017/perguntas-frequentes">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/perguntas-frequentes/aguas-e-saneamento">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/cultura/festas-e-romarias">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/perguntas-frequentes">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/balcao-virtual/perguntas-frequentes">Município de Satão (NOK</a></li> <li><a href="https://www.cm-olb.pt/municipio/recursos-humanos/procedimentos-concursais/perguntas-frequentes-faq">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/servicos/perguntas-frequentes">CM de Vagos (NOK)</a></li> <li><a href="https:/www.cm-valongo.pt/ficha-tecnica/mapa-do-site">CM de Valongo (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/ficha-tecnica/mapa-do-site">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/pages/947?site_help_link_category_id=25">Município de Esposende (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Não foi identificado acordeões nos seguintes websites:</p> <ul> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/29" target="_blank" rel="noopener noreferrer">issue#29</a> <strong>O chatbot e o componente de contactos/fale connosco não estão estruturados de forma apropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><h5>Descrição do problema</h5> <p>Verifica-se que, em alguns websites, está a ser apresentado componentes flutuantes no rodapé, como o chatbot e componente de contactos/fale connosco. Eles estão construídos de forma inadequada, uma vez que são estruturadas como <code>div</code> em vez de elementos nativos do HTML.</p> <p>Por exemplo, na página inicial do website da <a href="https://www.cm-braganca.pt/cm-braganca">CM de Bragança</a> existe um chatbot que está acessível apenas pelo rato e está sendo construído com o uso de <code>div</code>:</p> <img src="https://github.com/user-attachments/assets/781cef94-29ac-4235-a11e-49a178fa25d0" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Chatbot construído com divs e está inacessível com o teclado e leitor de ecrã no website da <a href="https://www.cm-braganca.pt/cm-braganca">CM de Bragança</a></em></p> <hr> <p>Outro exemplo acontece no website da <a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a>, onde é possível identificar a opção de contactos apresentado no rodapé que está construído com <code>divs</code>. Isso faz com que o componente não seja acessível através do teclado nem por leitores de ecrã:</p> <img src="https://github.com/user-attachments/assets/dc9a4025-8937-471e-814b-6a2dc08f1ddf" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Componente fixo está construído como div no website <a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a></em></p> <hr> <p>No website de <a href="https://www.cm-peniche.pt/">CM de Peniche</a> é apresentado no rodapé a opção "Fale connosco" que está sendo estruturado como <code>div</code>:</p> <img src="https://github.com/user-attachments/assets/9a8688cc-27cb-4d5b-a23c-2cfec59598d3" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Componente "Fale connosco" estruturado como div no website da <a href="https://www.cm-peniche.pt/">CM de Peniche</a></em></p> <h6>Sugestão de correção</h6> <ul> <li>Devem rever todos os websites que apresentem o chatbot e/ou componente flutuante no rodapé, como contactos/fale connosco.</li> <li>Devem garantir que o chatbot ou outro componente fixo apresentado no rodapé seja acessível através do rato, do teclado e de tecnologias de apoio. Para isso, recomendamos que, sempre que possível, sejam utilizados elementos nativos de HTML, como botões ou links.</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (NOK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (NOK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (NOK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (NOK</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Não foi identificado o chatbot ou outro componente flutuante e fixo como os contactos ou fale connosco nos seguintes websites:</p> <ul> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/26" target="_blank" rel="noopener noreferrer">issue#26</a> <strong>Existem elementos interativos (links, botões) estruturados com a tag div</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n83">ver requisito 8.3 na lista 10 aspetos</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Ao desativar o CSS, é possível identificar links e botões que não possuem semântica adequada, uma vez que estão a ser estruturados com divs. Esta prática pode causar problemas de navegação utilizando o teclado e com leitores de ecrã, pois estes elementos não recebem foco via teclado nem são corretamente anunciados pelos leitores de ecrã.</p> <p>Por exemplo, no website da CM de Pombal, a opção de "Acesso rápido" está sendo estruturada como uma <code>div</code>:</p> <img src="https://github.com/user-attachments/assets/e7fff64c-fd39-4c0d-9265-085d470e7a3f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Não é possível aceder ao link com o teclado através das teclas <code>TAB</code> e <code>SHIFT + TAB</code> no topo da página da <a href="https://www.cm-pombal.pt/">CM de Pombal</a></em></p> <img src="https://github.com/user-attachments/assets/4c3ec984-e583-484a-8498-54a542f600e4" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Leitor de ecrã não anuncia que é um link ou um botão no topo da página da <a href="https://www.cm-pombal.pt/">CM de Pombal</a></em></p> <img src="https://github.com/user-attachments/assets/2f2f71b8-c6ba-4494-9f59-bef0d54c001f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Na estrutura a opção "Acesso rápido" está como div no topo da página da <a href="https://www.cm-pombal.pt/">CM de Pombal</a></em></p> <hr> <p>Outro exemplo identificado são os controles do carrossel, que estão sendo estruturados como <code>divs</code>, como por exemplo, o website da <a href="https://www.municipio.esposende.pt/inicio">CM de Esposende</a>:</p> <img src="https://github.com/user-attachments/assets/894dc178-4127-47c6-b360-4aad3147d86a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Controles do carrosel estão sendo estruturados como divs</em></p> <hr> <p>No website da <a href="https://www.regiaodeaveiro.pt/comunicacao/galerias-de-imagens?image_gallery_detail_20_image_gallery_id=congresso-regiao-de-aveiro-2025-sessoes-tematicas">Comunidade Intermunicipal da Região de Aveiro</a> foram identificados modais cujas opções de voltar, avançar e fechar se encontram estruturadas como <code>div:</code></p> <img src="https://github.com/user-attachments/assets/48ae758d-20e9-4a58-a1e1-21b68f6b5d5b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Opções de avançar, voltar e fechar modal estão estruturadas como divs</em></p> <hr> <p>Os controlos utilizados para pausar a animação e ampliar as imagens nas galerias do website da <a href="https://www.cm-pesoregua.pt/visitar/dormir/turismo-de-habitacao/poi/quinta-do-vallado">CM Peso da Régua</a> estão estruturados como <code>div</code>. Adicionalmente, as imagens que deveriam ser clicáveis não estão estruturadas como imagens-link, o que impede que os leitores de ecrã reconheçam estas imagens como interactivas:</p> <img src="https://github.com/user-attachments/assets/d6d91e2d-e9f9-415e-a76a-6a5bdc1f163b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Pausar e ampliar view estão sendo estruturadas como divs</em></p> <img src="https://github.com/user-attachments/assets/d7d674fe-a262-44b5-8b04-c498a62be6ea" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Controles da galeria ampliada estão estruturados como divs</em></p> <img src="https://github.com/user-attachments/assets/7f06cd41-c0ec-4ec8-bf58-89cffc9dc798" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Leitor de ecrã não identifica a imagem como sendo interativa</em></p> <h6>Sugestão de correção</h6> <ul> <li>É importante garantir que todos os elementos interativos do website — como botões, links, controlos de carrosséis, modais, galerias de imagens e outros elementos acionáveis — sejam construídos utilizando elementos nativos do HTML.</li> <li>Deve ser dada especial atenção aos elementos que atualmente só podem ser acionados com o rato, pois na maioria dos casos isto indica uma ausência de semântica adequada no código. A verificação deve focar-se principalmente nos controlos de carrosséis, modais, galerias de imagens e outros elementos interativos críticos, garantindo que todos possam ser utilizados sem dependência exclusiva do ponteiro do rato.</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <p><a href="https://www.municipio.esposende.pt/">Município de Esposende (NOK)</a><br><a href="https://www.cm-pombal.pt/">CM de Pombal (NOK)</a><br><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (NOK)</a>: campo de pesquisa e seleção de idioma<br><a href="https://www.regiaodeaveiro.pt/comunicacao/galerias-de-imagens?image_gallery_detail_20_image_gallery_id=congresso-regiao-de-aveiro-2025-sessoes-tematicas">Comunidade Intermunicipal da Região de Aveiro</a><br><a href="https://valpacos.pt/">CM de Valpaços (NOK)</a><br><a href="https://www.sabrosa.pt/">CM de Sabrosa (NOK)</a><br><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (NOK)</a><br><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/executivo-reune-esta-quarta-feira-em-reuniao-ordinaria-91">CM de Caminha (NOK)</a><br><a href="https://www.cm-peniche.pt/municipio/contactos/poi-89/05-centro-de-alto-rendimento-de-peniche">CM de Peniche (NOK)</a><br><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (NOK)</a><br><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (NOK)</a><br><a href="https://www.cm-agueda.pt/visite/agueda-e-natal">CM de Águeda (NOK)</a><br><a href="https://www.cm-satao.pt/">Município de Satão (NOK</a><br><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (NOK)</a><br><a href="https://www.cm-olb.pt/viver/iniciativas/galeria-5">CM Oliveira do Bairro (NOK)</a><br><a href="https://www.cm-vagos.pt/municipio/comunicacao/agenda-proximos-eventos/evento/hora-do-conto-e-oficina-de-artes-elmer-e-o-passarao">CM de Vagos (NOK)</a><br><a href="https://www.cm-valongo.pt/participar/biodivercities/projeto-biodivercities-valongo/galeria-de-imagens">CM de Valongo (NOK)</a><br><a href="https://www.cm-braganca.pt/transparencia/comunicacao/noticias/noticia/bencao-de-finalistas">CM de Bragança (NOK)</a><br><a href="https://www.cmav.pt/informar/galerias-multimedia/fotografias?image_gallery_detail_8_image_gallery_id=feira-artes-e-oficios-soajo">CM de Arcos de Valdevez (NOK)</a></p> <h5>Websites que estão a cumprir (OK)</h5> <p><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/12" target="_blank" rel="noopener noreferrer">issue#12</a> <strong>A lista de opções apresentado como conteúdo principal não está estruturado de forma apropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><h5>Descrição do problema</h5> <p>Verifica-se que a lista de opções, quando apresentada nos diferentes websites, apesar de estar estruturalmente definida em HTML como uma lista através das tags <code>ul</code> e <code>li</code>, não está a ser reconhecida pelas tecnologias de apoio como tal. Esta situação resulta da utilização indevida de atributos ARIA, que acabam por sobrepor ou anular a semântica nativa do HTML.</p> <p>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:</p> <img src="https://github.com/user-attachments/assets/b2bfd596-37a1-4beb-95c4-fb78aa383385" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Uso dos atributos role="none", role="menu" e role="menuitem" de forma inapropriada na lista de opções do website CM Bragança</em></p> <img src="https://github.com/user-attachments/assets/9530a0b9-93c3-4f98-88d6-6083775628e7" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Uso dos atributos role="none", role="menu" e role="menuitem" de forma inapropriada na lista de opções do website CM Arcos de Valdevez</em></p> <h6>Sugestão de correção:</h6> <p>Remover os atributos role=none, role=menu e role=menuitem da lista de opções. Isso deve ser aplicado em todos os websites que estão com o mesmo problema.</p> <h5>Websites que necessitam de correções (NOK):</h5> <ul> <li><a href="https://www.cm-braganca.pt/transparencia/comunicacao">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/municipio/heraldica">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/municipio/camara-municipal/atos-oficiais-e-documentacao">Município de Esposende (NOK)</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/municipe">CM de Matosinhos (NOK)</a></li> <li><a href="https://valpacos.pt/eu-sou-municipe">CM de Valpaços (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos">Comunidade Intermunicipal Região de Aveiro (NOK)</a></li> <li><a href="https://www.sabrosa.pt/balcao-virtual">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/investir">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/investir">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/visitar">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/municipio">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/informar">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/cidadao">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/participar">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/autarquia">Município de Satão (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/investir">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-olb.pt/investir">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/municipio">CM de Vagos (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/investir">CM de Valongo (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Todos os websites apresentam o mesmo problema.</p> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-8.5">Requisito 8.5 - A maquetização da página é feita sem recorrer ao elemento <table></h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/33" target="_blank" rel="noopener noreferrer">issue#33</a> <strong>A maquetização da página é feita sem recorrer ao elemento <table></strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 8.5</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>A maquetização da página é feita sem recorrer ao elemento <code><table></code>.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n85">ver requisito 8.5 na lista 10 aspetos</a></p> </blockquote> <h5>Bragança:</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Guimarães</h5> <p>NOK<br>Segunda tabela da página <a href="https://www.cm-guimaraes.pt/areas-de-intervencao/acao-social-e-comunidade/acao-social/servicos-protocolados/banco-local-de-voluntariado-blv">Banco Local de Voluntariado (BLV)</a> é 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.</p> <img src="https://github.com/user-attachments/assets/aaccd65d-e339-4282-baed-e1eccdddadb2" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tabela de layout</em></p> <h5>Esposende</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Arcos valdevez</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Matosinhos</h5> <p>NOK<br>Na página <a href="https://www.cm-matosinhos.pt/municipio/juntas-de-freguesia">juntas de freguesia</a> existe uma tabela layout</p> <img src="https://github.com/user-attachments/assets/b9f88324-1d4a-470f-a70f-c0a8f8a8fb3b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tabela layout</em></p> <h5>regiao_de_aveiro</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Valpaços</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Sabrosa</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Albergaria-a-Velha</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Caminha</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Peniche</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Peso da régua</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Pombal</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Montalegre</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Águeda</h5> <p>NOK<br>A tabela presente na página <a href="https://www.cm-agueda.pt/pages/83">Freguesias</a> é de layout.</p> <img src="https://github.com/user-attachments/assets/64df2899-3b7b-40b6-9760-81cff1477fef" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tabela de layout</em><br>O mesmo acontece na tabela presente na página <a href="https://www.cm-agueda.pt/municipio">Município</a></p> <h5>sátão</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Ílhavo</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Oliveira do bairro</h5> <p>OK<br>Não encontrámos tabelas layout</p> <h5>Vagos</h5> <p>OK<br>Não encontrámos tabelas layout</p> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-9.1">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/51" target="_blank" rel="noopener noreferrer">issue#51</a> <strong>O foco não é direcionado para dentro da modal</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando a caixa de diálogo é aberta, o foco (cursor do Browser) move-se para um elemento dentro da caixa de diálogo<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n91">ver requisito 9.1 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Quando uma modal é aberta, o foco do teclado deve ser automaticamente direcionado para dentro dela. Isto garante que os utilizadores que navegam com o teclado, incluindo aqueles que recorrem a tecnologias de apoio, possam interagir facilmente com o conteúdo apresentado e percebam que uma nova interação está disponível.</p> <p>Em cada uma das páginas mencionadas abaixo, encontra-se um componente que, ao ser ativado, abre uma modal. No entanto, o foco não é automaticamente direcionado para o seu conteúdo.</p> <img src="https://github.com/user-attachments/assets/d50760f6-245e-47c3-b621-91c69e34b7bc" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Janela de modal da galeria de imagens na página <a href="https://www.municipio.esposende.pt/loja-social/galeria">Galeria</a> do site do Município de Esposende. Quando a janela de modal é expandida, o foco do teclado não é direcionado para dentro desta.</em></p> <img src="https://github.com/user-attachments/assets/3c8a03b5-10b5-493a-9a62-de4b9b8954c8" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Janela de modal da página <a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Guimarães inicia Plano de Ação para enfrentar alterações climáticas</a>, do site do Município de Guimarães. Quando a janela de modal é expandida, o foco do teclado não é direcionado para dentro desta.</em></p> <img src="https://github.com/user-attachments/assets/54cb5244-e56d-4bf7-81b4-db9b153720f1" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Janela de modal da página <a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Aprovado projeto do Eixo Rodoviário Aveiro-Águeda</a>, do site da Comunidade Intermunicipal da Região de Aveiro. Quando a janela de modal é expandida, o foco do teclado não é direcionado para dentro desta.</em></p> <img src="https://github.com/user-attachments/assets/e604ea9f-c9ae-409a-ae57-d1790cd01b7b" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Janela de modal da página <a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL</a> do site do Município de Caminha. Quando a janela de modal é expandida, o foco do teclado não é direcionado para dentro desta.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos ajustar o foco para que, ao abrir a modal, o cursor seja automaticamente direcionado para dentro da janela da modal.</p> <p><strong>Observação Técnica</strong><br>Notámos alguns pontos interessantes acerca das modais presentes nas páginas </p> <ul> <li><a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Guimarães inicia Plano de Ação para enfrentar alterações climáticas</a> (Município de Guimarães) </li> <li><a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Aprovado projeto do Eixo Rodoviário Aveiro-Águeda</a> (Comunidade Intermunicipal da Região de Aveiro) </li> <li><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL</a> (Município de Caminha)</li> <li><a href="https://www.cm-agueda.pt/viver/comunicacao/noticias-agueda/noticia/aviso-fiscalizacao-das-areas-de-estacionamento-da-cidade-de-agueda">Aviso :: Fiscalização das áreas de estacionamento da Cidade de Águeda</a> (Município de Águeda)</li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias/noticia-80/red-urbansol-em-vagos-capacita-tecnicos-municipais-de-portugal-e-espanha">RED URBANSOL EM VAGOS CAPACITA TÉCNICOS MUNICIPAIS DE PORTUGAL E ESPANHA</a> (Município de Vagos)</li> </ul> <p>No primeiro caso, a modal da página <a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Guimarães inicia Plano de Ação para enfrentar alterações climáticas</a> apresenta um carrossel com apenas duas imagens, sendo as duas imagens iguais.</p> <p>No segundo, terceiro, quarto e quinto casos, as modais das páginas <a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Aprovado projeto do Eixo Rodoviário Aveiro-Águeda</a>, <a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL</a>, <a href="https://www.cm-agueda.pt/viver/comunicacao/noticias-agueda/noticia/aviso-fiscalizacao-das-areas-de-estacionamento-da-cidade-de-agueda">Aviso :: Fiscalização das áreas de estacionamento da Cidade de Águeda</a> e <a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias/noticia-80/red-urbansol-em-vagos-capacita-tecnicos-municipais-de-portugal-e-espanha">RED URBANSOL EM VAGOS CAPACITA TÉCNICOS MUNICIPAIS DE PORTUGAL E ESPANHA</a>, contêm apenas uma imagem cada uma.</p> <p>Tendo isto em conta, questionamos a utilidade de utilizar uma modal/carrossel nestes casos, uma vez que este componente acrescenta complexidade técnica sem necessidade quando o conteúdo é estático e reduzido. Uma alternativa mais simples seria apresentar as imagens diretamente na própria página.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/pegadas/video">Modal do vídeo “Programa ambiental PEGADAS”, na página "Galeria Multimédia", do site do Município de Guimarães </a></li> <li><a href="https://www.municipio.esposende.pt/loja-social/galeria">Modal da galeria de imagens da página "Galeria" do site do Município de Esposende.</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Modal da página "Estádio Doutor Diogo Alves Vaz Pereira" do site da Câmara Municipal de Montalegre.</a></li> <li><a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Modal da galeria de imagens da página "Guimarães inicia Plano de Ação para enfrentar alterações climáticas", do site do Município de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Modal da página "Aprovado projeto do Eixo Rodoviário Aveiro-Águeda" do site da Comunidade Intermunicipal da Região de Aveiro.</a></li> <li><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">Modal da página "CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL" do site do Município de Caminha.</a></li> <li><a href="https://www.cm-agueda.pt/viver/comunicacao/noticias-agueda/noticia/aviso-fiscalizacao-das-areas-de-estacionamento-da-cidade-de-agueda">Modal da página "Aviso :: Fiscalização das áreas de estacionamento da Cidade de Águeda" do site do Município de Águeda.</a></li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias/noticia-80/red-urbansol-em-vagos-capacita-tecnicos-municipais-de-portugal-e-espanha">Modal da página "RED URBANSOL EM VAGOS CAPACITA TÉCNICOS MUNICIPAIS DE PORTUGAL E ESPANHA" do site do Município de Vagos.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-montalegre.pt">Câmara Municipal de Montalegre </a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-9.2">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/52" target="_blank" rel="noopener noreferrer">issue#52</a> <strong>O foco não está limitado à modal</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>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<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n92">ver requisito 9.2 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Manter o foco do teclado dentro da caixa de diálogo garante que os utilizadores possam interagir com o seu conteúdo sem distrações de outros elementos na página. Este controlo do foco facilita a navegação, ajudando os utilizadores a compreenderem a sua posição na interface.</p> <p>Quando a janela de modal está aberta, é possível percorrer pelo restante conteúdo do website que se encontra abaixo dela.</p> <img src="https://github.com/user-attachments/assets/a87cebf1-b243-42a6-909c-240d18789183" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Modal do vídeo “Programa ambiental PEGADAS”, na página <a href="https://www.cm-guimaraes.pt/pegadas/video">Galeria Multimédia</a>, do site do município de Guimarães. Apesar de a modal estar expandida, continua a ser possível navegar pelo restante conteúdo que se encontra abaixo desta.</em></p> <img src="https://github.com/user-attachments/assets/3a806b7b-43b3-4d11-9557-184b31d68663" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Modal da página <a href="https://www.municipio.esposende.pt/loja-social/galeria">Galeria</a> do Município de Esposende. O foco não fica limitado à modal expandida.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que ao utilizar o teclado ou leitor de ecrã, o foco seja limitado apenas para o conteúdo da modal. Enquanto a janela de modal estiver aberta, a navegação por outras opções do website não deve ser possível.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/pegadas/video">Modal do vídeo “Programa ambiental PEGADAS”, na página Galeria Multimédia, do site do município de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/loja-social/galeria">Modal da galeria de imagens da página Galeria do site do Município de Esposende.</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Modal da página Estádio Doutor Diogo Alves Vaz Pereira do site da Câmara Municipal de Montalegre.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a></li> </ul> <p><strong>Websites que Cumprem (OK)</strong></p> <ul> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-9.3">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</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/56" target="_blank" rel="noopener noreferrer">issue#56</a> <strong>Seleção do botão “Cancelar” e da tecla “Esc” avança etapas indevidamente </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.3</span></div> <div class="issue-content"><blockquote> <p>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<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n93">ver requisito 9.3 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong></p> <p>Verificámos que, na página <a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">Participação de Ocorrência</a> do Município de Matosinhos, ao selecionar o link “Enviar” no final do formulário, é aberta uma caixa de diálogo com três etapas (“Termos do Serviço”, “Declarações e Consentimentos” e “Confirmação”). Em qualquer uma destas etapas, ao selecionar o botão “Cancelar” ou ao premir a tecla Esc, a caixa de diálogo avança para a etapa seguinte.</p> <p>Desta forma, caso o utilizador, depois de abrir esta modal, queira, por exemplo, sair da caixa de diálogo e corrigir algum dado inserido anteriormente no formulário, vai ter necessariamente de selecionar três vezes o botão “Cancelar” ou a tecla “Esc”. Além disso, se quiser regressar a uma etapa anterior dentro da própria caixa de diálogo, é obrigado a sair completamente da modal e reiniciar o processo desde a primeira etapa. Isto não é intuitivo e pode ser especialmente confuso para quem está a utilizar, por exemplo, leitores de ecrã.</p> <img src="https://github.com/user-attachments/assets/9ec581a2-257e-4d50-8b26-61f240c1cd3e" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Caixa de diálogo da página <a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">Participação de Ocorrência</a> da Câmara Municipal de Matosinhos, aberta após selecionar o link “Enviar”. A imagem mostra a modal na segunda etapa, “Declarações e Consentimentos”, de um total de três etapas. Selecionar o botão "Cancelar" ou premir a tecla 'Esc' faz a caixa de diálogo avançar para a etapa seguinte.</em></p> <p><strong>Sugestão de Correção</strong></p> <p>Recomendamos a inclusão de um botão (<code><button></code>) dedicado a fechar a modal, com texto alternativo adequado. Adicionalmente, o botão “Cancelar” pode, por exemplo, ser reformulado como um botão “Anterior”, que irá aparecer na caixa de diálogo a partir da segunda etapa e que permitirá ao utilizador voltar à etapa anterior na caixa de diálogo. </p> <p><strong>Exemplo de Conteúdo que Necessita de Correções</strong></p> <ul> <li><a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">Janela de modal associada ao link "Enviar", na página Participação de Ocorrência, do site da Câmara Municipal de Matosinhos.</a></li> </ul> <p><strong>Website que Necessita de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos</a></li> </ul> <p><strong>Websites Onde Este Problema Não se Aplica (N/A)</strong> </p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/55" target="_blank" rel="noopener noreferrer">issue#55</a> <strong>O elemento para fechar a modal não possui um texto alternativo </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>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<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n93">ver requisito 9.3 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>As modais devem apresentar um botão de fechar claramente visível e acessível através do teclado. Além disso, podem permitir que os utilizadores as fechem pressionando a tecla 'Esc'. Essas opções garantem que utilizadores de teclado e leitores de ecrã consigam interagir com a modal de forma eficaz.</p> <p>Verificámos que, nas páginas mencionadas abaixo, o elemento que permite fechar a janela de modal não possui um texto alternativo associado.</p> <img src="https://github.com/user-attachments/assets/c8d917ab-30a0-406f-acf5-ee46c4abf7d1" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Análise do elemento para fechar a janela modal do vídeo Programa Ambiental PEGADAS, na página <a href="https://www.cm-guimaraes.pt/pegadas/video">Galeria Multimédia</a> do site do Município de Guimarães, através da ferramenta Google Inspector. O elemento para fechar a modal não está visível na interface gráfica. Código HTML do elemento está destacado com um retângulo de borda preta.</em></p> <img src="https://github.com/user-attachments/assets/5ab93ad0-01be-41fe-9707-962a4be4c555" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Análise, no Google Inspector, do elemento responsável por fechar a janela modal da página <a href="https://www.municipio.esposende.pt/loja-social/galeria">Galeria</a> do site do Município de Esposende. O elemento não possui texto alternativo. Código HTML do elemento está destacado com um retângulo de borda preta.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que convertam estes elementos gráficos para botões (<code><button></code>), visível na interface gráfica, e que associem um texto alternativo apropriado como, por exemplo, “Fechar a a janela de modal”.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/pegadas/video">Elemento para fechar a modal do vídeo “Programa ambiental PEGADAS”, na página Galeria Multimédia, do site do município de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/loja-social/galeria">Elemento para fechar a modal da galeria de imagens da página Galeria do site do Município de Esposende.</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Elemento para fechar a modal da página Estádio Doutor Diogo Alves Vaz Pereira do site da Câmara Municipal de Montalegre.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> <p><strong>Websites que Cumprem (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/54" target="_blank" rel="noopener noreferrer">issue#54</a> <strong>O elemento para fechar a modal não está acessível pelo teclado</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>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<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n93">ver requisito 9.3 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>As modais devem apresentar um botão de fechar claramente visível e acessível através do teclado. Além disso, podem permitir que os utilizadores as fechem pressionando a tecla 'Esc'. Essas opções garantem que utilizadores de teclado e leitores de ecrã consigam interagir com a modal de forma eficaz.</p> <p>Não é possível aceder ao elemento para fechar a modal através do teclado (através das teclas Tab e Shift+Tab).</p> <img src="https://github.com/user-attachments/assets/bb0de193-42f1-4444-8ead-dd9e2c27ea47" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Análise, no Google Inspector, do elemento responsável por fechar a janela modal da página <a href="https://www.municipio.esposende.pt/loja-social/galeria">Galeria</a> do site do Município de Esposende. Código HTML do elemento está destacado com um retângulo de borda preta.</em></p> <img src="https://github.com/user-attachments/assets/34c08e7e-196d-4f8b-b327-31c900c624ac" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Análise, no Google Inspector, do elemento responsável por fechar a janela modal da página <a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Estádio Doutor Diogo Alves Vaz Pereira</a> do site da Câmara Municipal de Montalegre. Código HTML do elemento está destacado com um retângulo de borda preta.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos rever este componente da modal para garantir que está corretamente implementado e totalmente acessível por teclado. Sugerimos reconstruir semanticamente o elemento como um botão (<code><button></code>) por forma a assegurar foco, interação por teclado e compatibilidade com tecnologias de apoio.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/loja-social/galeria">Modal da galeria de imagens da página Galeria do site do Município de Esposende.</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Modal da página Estádio Doutor Diogo Alves Vaz Pereira do site da Câmara Municipal de Montalegre.</a></li> </ul> <p><strong>Websites que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre</a></li> </ul> <p><strong>Websites que Cumprem (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/53" target="_blank" rel="noopener noreferrer">issue#53</a> <strong>Não existe um botão para fechar a modal </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p><strong>Descrição do Problema</strong><br>As modais devem apresentar um botão de fechar claramente visível e acessível através do teclado. Além disso, podem permitir que os utilizadores as fechem pressionando a tecla 'Esc'. Essas opções garantem que utilizadores de teclado e leitores de ecrã consigam interagir com a modal de forma eficaz.</p> <p>Verificámos que, na página mencionada abaixo, a janela de modal não possui um botão para fechar.</p> <img src="https://github.com/user-attachments/assets/72dcbbe3-e945-4464-9472-6d9f800c387b" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Modal da galeria de imagens da página <a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Guimarães inicia Plano de Ação para enfrentar alterações climáticas</a> do site do Município de Guimarães. Esta modal não tem nenhum mecanismo, para além da tecla de atalho ESC, que permita fechar esta modal.</em> </p> <img src="https://github.com/user-attachments/assets/432caf55-f676-4b50-b553-24dbddbf8f3f" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Modal da página <a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL</a> do site do Município de Caminha. Esta modal não tem nenhum mecanismo, para além da tecla de atalho ESC, que permita fechar esta modal.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que seja adicionado um mecanismo para fechar esta modal para além do atalho ESC pelo teclado. Uma solução é incluir um botão(<code><button></code>) visível, com um texto alternativo claro e descritivo - por exemplo, <em>“Fechar a caixa de diálogo da galeria de imagens”</em> - que permita ao utilizador encerrar a modal de forma intuitiva.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Modal da galeria de imagens da página "Guimarães inicia Plano de Ação para enfrentar alterações climáticas" do site do Município de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Modal da página "Aprovado projeto do Eixo Rodoviário Aveiro-Águeda" do site da Comunidade Intermunicipal da Região de Aveiro.</a></li> <li><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">Modal da página "CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL" do site do Município de Caminha.</a></li> <li><a href="https://www.cm-agueda.pt/viver/comunicacao/noticias-agueda/noticia/aviso-fiscalizacao-das-areas-de-estacionamento-da-cidade-de-agueda">Modal da página "Aviso :: Fiscalização das áreas de estacionamento da Cidade de Águeda" do site do Município de Águeda.</a></li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias/noticia-80/red-urbansol-em-vagos-capacita-tecnicos-municipais-de-portugal-e-espanha">Modal da página "RED URBANSOL EM VAGOS CAPACITA TÉCNICOS MUNICIPAIS DE PORTUGAL E ESPANHA" do site do Município de Vagos.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> <p><strong>Websites que Cumprem (OK)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a></li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-9.4">Requisito 9.4 - Quando a caixa de diálogo fecha, o foco (cursor do Browser) deve voltar ao elemento interativo que a invocou</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/57" target="_blank" rel="noopener noreferrer">issue#57</a> <strong>O foco é perdido quando a janela modal é fechada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 9.4</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Quando a caixa de diálogo fecha, o foco (cursor do Browser) deve voltar ao elemento interativo que a invocou<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-10aspetos#n94">ver requisito 9.4 na lista 10 aspetos</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Garantir que o foco retorne ao botão que acionou a modal é uma prática que beneficia especialmente pessoas que utilizam navegação por teclado ou leitores de ecrã, ajudando-as a manter-se orientadas dentro da interface.</p> <p>Ao fechar uma modal, se o foco é perdido ou deslocado para um local inesperado, os utilizadores precisarão percorrer novamente a interface até chegar no local desejado para continuar a interação desejada.</p> <p>Nas páginas mencionadas abaixo, existem janelas modais que, ao serem fechadas, não devolvem o foco ao elemento interativo que as acionou.</p> <img src="https://github.com/user-attachments/assets/0f434126-075d-4d5f-9af0-8037d6607602" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-guimaraes.pt/pegadas/video">Galeria Multimédia</a>, do site do Município de Guimarães. Quando a janela de modal do vídeo “Programa ambiental PEGADAS” é fechada, o foco é perdido.</em></p> <img src="https://github.com/user-attachments/assets/9ed9f911-645c-419d-b133-046abed1bfab" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.municipio.esposende.pt/loja-social/galeria">Galeria</a> do site do Município de Esposende. Quando a janela de modal é fechada, o foco é perdido.</em></p> <img src="https://github.com/user-attachments/assets/764fca4e-7c79-4aa6-ba5f-b7d4c5aa52b3" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">Participação de Ocorrência</a> do site da Câmara Municipal de Matosinhos. Quando a janela de modal é fechada, o foco é perdido.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos reverem todas as páginas que apresentem esse tipo de componente para garantir que, ao fechar a modal, o foco retorne ao elemento que ativou a caixa de diálogo.</p> <p>Para mais informações, recomendamos a consulta da página <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/">Modal Dialog Example do W3C</a>.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/pegadas/video">Modal do vídeo “Programa ambiental PEGADAS”, na página Galeria Multimédia, do site do município de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/loja-social/galeria">Modal da galeria de imagens da página Galeria do site do Município de Esposende.</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/desporto/galeria-89">Modal da página Estádio Doutor Diogo Alves Vaz Pereira do site da Câmara Municipal de Montalegre.</a></li> <li><a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">Janela de modal associada ao link "Enviar", na página Participação de Ocorrência, do site da Câmara Municipal de Matosinhos.</a></li> <li><a href="https://www.cm-guimaraes.pt/noticia-84/guimaraes-inicia-plano-de-acao-para-enfrentar-alteracoes-climaticas">Modal da galeria de imagens da página "Guimarães inicia Plano de Ação para enfrentar alterações climáticas", do site do Município de Guimarães</a></li> <li><a href="https://www.regiaodeaveiro.pt/municipios/aveiro/noticia/aprovado-projeto-do-eixo-rodoviario-aveiro-agueda-15">Modal da página "Aprovado projeto do Eixo Rodoviário Aveiro-Águeda" do site da Comunidade Intermunicipal da Região de Aveiro.</a></li> <li><a href="https://www.cm-caminha.pt/visitar/comunicacao/noticias/noticia/caminha-vai-ser-a-meca-da-cerveja-artesanal">Modal da página "CAMINHA VAI SER A MECA DA CERVEJA ARTESANAL" do site do Município de Caminha.</a></li> <li><a href="https://www.cm-agueda.pt/viver/comunicacao/noticias-agueda/noticia/aviso-fiscalizacao-das-areas-de-estacionamento-da-cidade-de-agueda">Modal da página "Aviso :: Fiscalização das áreas de estacionamento da Cidade de Águeda" do site do Município de Águeda.</a></li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/noticias/noticia-80/red-urbansol-em-vagos-capacita-tecnicos-municipais-de-portugal-e-espanha">Modal da página "RED URBANSOL EM VAGOS CAPACITA TÉCNICOS MUNICIPAIS DE PORTUGAL E ESPANHA" do site do Município de Vagos.</a></li> </ul> <p><strong>Websites que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites em que Não Foram Encontradas Modais (N/A)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-chk10-r-10.1">Requisito 10.1 - Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/45" target="_blank" rel="noopener noreferrer">issue#45</a> <strong>Preservação do texto em PDF</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk 10 web</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 10.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><p>A análise do critério cingiu-se a apenas 2 tipos de documentos:</p> <ul> <li>planos de atividades, prestação de contas, com textos e números</li> <li>cartas, declarações, avisos, de caráter público, com mensagens em texto</li> </ul> <p>O objetivo do requisito é analisar como é que a entidade faz chegar ao cidadão as suas mensagens escritas. Não tem por objetivo analisar Mapas, plantas ou outro tipo de imagens.</p> <h5>Resultados globais encontrados</h5> <ul> <li>1/20 OK. Ou seja, todos os websites têm PDFs em que não é possível ler o texto com leitor de ecrã.</li> <li>Localizaram-se alguns PDFs com texto selecionável, mas que ao efetuar copy/paste para um editor de texto revelaram não ser equivalentes alternativos ao glifos existentes para perceção visual.</li> </ul> <h5>Bragança (NOK)</h5> <p><a href="https://www.cm-braganca.pt/">https://www.cm-braganca.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/cmbraganca2020/uploads/document/file/166/Demonstra__o_de_resultados.pdf">https://www.cm-braganca.pt/cmbraganca2020/uploads/document/file/166/Demonstra__o_de_resultados.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-braganca.pt/cmbraganca2020/uploads/writer_file/document/59/2010071521594878474.pdf">https://www.cm-braganca.pt/cmbraganca2020/uploads/writer_file/document/59/2010071521594878474.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>a evidência (1) mostra um documento de prestação de contas. Apresenta-se numa imagem: não é possível selecionar texto, não é possível pesquisar ao nível do documento; não é pesquisável por motores de busca</li> <li>na evidência (2) mostra um aviso ao público, só de texto, mas que se apresenta como imagem de texto.</li> <li>nas páginas de resultados, o seletor de páginas estava a reportar Erro 500. (p.e. passar da página 1 de resultados para a página 2 de resultados, não foi possível)</li> </ul> <h5>Guimarães (NOK)</h5> <p><a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-guimaraes.pt/cmguimaraes/uploads/document/file/22251/relatorioponderacao.pdf">https://www.cm-guimaraes.pt/cmguimaraes/uploads/document/file/22251/relatorioponderacao.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-guimaraes.pt/cmguimaraes/uploads/document/file/23220/certidaoata1.pdf">https://www.cm-guimaraes.pt/cmguimaraes/uploads/document/file/23220/certidaoata1.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>(1) uma certidão - só texto - que é apresentado numa imagem de texto</li> <li>(2) certidão só de texto apresentada numa imagem de texto</li> </ul> <p>Nota: não se conseguiu usar o seletor de páginas na pesquisa.</p> <h5>Esposende (NOK)</h5> <p><a href="https://www.municipio.esposende.pt/">https://www.municipio.esposende.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.municipio.esposende.pt/cmesposende/uploads/document/file/4317/publicacao_correio_do_minho_21outubro2022.pdf">https://www.municipio.esposende.pt/cmesposende/uploads/document/file/4317/publicacao_correio_do_minho_21outubro2022.pdf</a></li> <li>(2) NOK. <a href="https://www.municipio.esposende.pt/cmesposende/uploads/document/file/2490/DEL_CM.pdf">https://www.municipio.esposende.pt/cmesposende/uploads/document/file/2490/DEL_CM.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>(1) Edital em que partes são selecionáveis e partes que não são. 60% é selecionável. A caixa "nota" não é lida; a tabela de daos não é lida.</li> <li>(2) Deliberação em que o texto é selecionável, mas... ao selecionar p.e. a palavra "tempos" copiar/colar no editor de texto resultou em "VWHPSRVTXHVHYLYHPVmRPXLWRGLItFHLV" (!?)</li> </ul> <h5>Arcos de Valdevez (NOK)</h5> <p><a href="https://www.cmav.pt/">https://www.cmav.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cmav.pt/cmarcos/uploads/writer_file/document/2275/ata_6.pdf">https://www.cmav.pt/cmarcos/uploads/writer_file/document/2275/ata_6.pdf</a></li> <li>(2) OK. <a href="https://www.cmav.pt/cmarcos/uploads/document/file/287/alteracao_ao_regulamento_do_cemiterio_municipal_de_arcos_de_valdevez_.pdf">https://www.cmav.pt/cmarcos/uploads/document/file/287/alteracao_ao_regulamento_do_cemiterio_municipal_de_arcos_de_valdevez_.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>(1) NOK. Ata só com texto e tabelas de dados. Apresenta-se como uma imagem de texto.</li> <li>(2) OK. Regulamento só com texto. O texto é selecionável e o copy/paste funciona bem.</li> </ul> <h5>Matosinhos (NOK)</h5> <p><a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-matosinhos.pt/cmmatosinhos2020/uploads/document/file/10096/edital_66_2024.pdf">https://www.cm-matosinhos.pt/cmmatosinhos2020/uploads/document/file/10096/edital_66_2024.pdf</a></li> <li>(2) OK. <a href="https://www.cm-matosinhos.pt/cmmatosinhos2020/uploads/writer_file/document/29162/aviso_19617_2022___renovacao_da_comissao_de_servico___varios_dirigentes.pdf">https://www.cm-matosinhos.pt/cmmatosinhos2020/uploads/writer_file/document/29162/aviso_19617_2022___renovacao_da_comissao_de_servico___varios_dirigentes.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>(1) edital só com texto que se apresenta em imagem de texto</li> <li>(2) aviso só com texto que se apresenta em texto selecoinável e com copy/paste para editor de texto correto.</li> </ul> <h5>Região de Aveiro (NOK)</h5> <p><a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></p> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.regiaodeaveiro.pt/regiaodeaveiro/uploads/document/file/2012/subvencoes_publicas_2020.pdf">https://www.regiaodeaveiro.pt/regiaodeaveiro/uploads/document/file/2012/subvencoes_publicas_2020.pdf</a></li> <li>(2) NOK. <a href="https://www.regiaodeaveiro.pt/regiaodeaveiro/uploads/document/file/2505/sei_ata_9_15_05_2023_rgpd.pdf">https://www.regiaodeaveiro.pt/regiaodeaveiro/uploads/document/file/2505/sei_ata_9_15_05_2023_rgpd.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) subvenções - só texto disposto em tabela e colocado em landscape. É selecionável, mas o texto que está sincronizado não está correto. Qualquer palavra que se selecione resulta em "y y y " (!?)</li> <li>(2) ata em texto que se apresenta como imagem de texto</li> </ul> <p>Nota: não se conseguiu usar o seletor de páginas da pesquisa para passar da 1ª para a 2ª página de resultados.</p> <h5>Valpaços (NOK)</h5> <p><a href="https://valpacos.pt/">https://valpacos.pt/</a></p> <p>Evidência</p> <ul> <li>(1) NOK. <a href="https://valpacos.pt/cmvalpacos/uploads/document/file/4859/cdudef.pdf">https://valpacos.pt/cmvalpacos/uploads/document/file/4859/cdudef.pdf</a></li> <li>(2) OK. <a href="https://valpacos.pt/cmvalpacos/uploads/writer_file/document/1509/regulamento_pdf.pdf">https://valpacos.pt/cmvalpacos/uploads/writer_file/document/1509/regulamento_pdf.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Lista de candidatos em texto que se apresenta como imagem de texto</li> <li>(2) Regulamento em texto que se apresenta como texto selecionável.</li> </ul> <h5>Sabrosa (NOK)</h5> <p><a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></p> <p>Evidência</p> <ul> <li>(1) NOK. <a href="https://www.sabrosa.pt/cmsabrosa/uploads/document/file/810/Edital_-_Benef_cios_concedidos_e_pagos_no_ano_2016_27-01-2016.pdf">https://www.sabrosa.pt/cmsabrosa/uploads/document/file/810/Edital_-_Benef_cios_concedidos_e_pagos_no_ano_2016_27-01-2016.pdf</a></li> <li>(2) OK. <a href="https://www.sabrosa.pt/cmsabrosa/uploads/document/file/3904/bep_eae.pdf">https://www.sabrosa.pt/cmsabrosa/uploads/document/file/3904/bep_eae.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) edital em texto que se apresenta como imagem de texto</li> <li>(2) anúncio BEP. Texto selecionável.</li> </ul> <h5>Albergaria (NOK)</h5> <p><a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></p> <p>Evidência</p> <ul> <li>(1) OK. <a href="https://www.cm-albergaria.pt/albergaria/uploads/document/file/7042/edital_153___resultados_do_2o_metodo_de_selecao.pdf">https://www.cm-albergaria.pt/albergaria/uploads/document/file/7042/edital_153___resultados_do_2o_metodo_de_selecao.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-albergaria.pt/albergaria/uploads/writer_file/document/2845/apda.pdf">https://www.cm-albergaria.pt/albergaria/uploads/writer_file/document/2845/apda.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Edital de texto selecionável.</li> <li>(2) Declaração em texto apresentado numa imagem de texto</li> </ul> <h5>Caminha (NOK)</h5> <p><a href="https://www.cm-caminha.pt/">https://www.cm-caminha.pt/</a></p> <p>Evidências</p> <ul> <li>(1) NOK. <a href="https://www.cm-caminha.pt/cmcaminha/uploads/document/file/10104/anuncio.pdf">https://www.cm-caminha.pt/cmcaminha/uploads/document/file/10104/anuncio.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-caminha.pt/cmcaminha/uploads/document/file/6632/proposta.pdf">https://www.cm-caminha.pt/cmcaminha/uploads/document/file/6632/proposta.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Anúncio de procedimentos em texto mas que se apresenta como imagem de texto.</li> <li>(2) Proposta de preço em texto, mas que se apresenta como imagem de texto.</li> </ul> <h5>Peniche (NOK)</h5> <p><a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></p> <p>Evidência</p> <ul> <li>(1) OK. <a href="https://www.cm-peniche.pt/cmpeniche/uploads/document/file/10279/cess_cctr_av1set2025.pdf">https://www.cm-peniche.pt/cmpeniche/uploads/document/file/10279/cess_cctr_av1set2025.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-peniche.pt/cmpeniche/uploads/document/file/4040/sdigitaliza11033011184.pdf">https://www.cm-peniche.pt/cmpeniche/uploads/document/file/4040/sdigitaliza11033011184.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Aviso em texto e uma tabela. Apresenta-se com texto selecionável.</li> <li>(2) Declaração em texto. Apresenta-se como uma imagem de texto. Não se consegue selecionar, copiar, ler com sintetizador, ler em braille, pesquisar, ...</li> </ul> <h5>Peso da Régua (NOK)</h5> <p><a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></p> <p>Evidência</p> <ul> <li>(1) OK. <a href="https://www.cm-pesoregua.pt/cmpesodaregua/uploads/document/file/111/agenda_abril08.pdf">https://www.cm-pesoregua.pt/cmpesodaregua/uploads/document/file/111/agenda_abril08.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-pesoregua.pt/cmpesodaregua/uploads/document/file/1302/aprovacao___regulamento_sobre_atividades_diversas_sujeitas_a_licenciamento.pdf">https://www.cm-pesoregua.pt/cmpesodaregua/uploads/document/file/1302/aprovacao___regulamento_sobre_atividades_diversas_sujeitas_a_licenciamento.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Agenda Municipal em que o texto é pesquisável, copiável e lido com sintetizador de fala e/ou braille.</li> <li>(2) Edital só de texto, mas apresenta-se como uma imagem de texto não selecionável.</li> </ul> <h5>Pombal (NOK)</h5> <p><a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></p> <p>Evidências</p> <ul> <li>(1) NOK. <a href="https://www.cm-pombal.pt/cmpombal/uploads/document/file/1880/edital_n_o_16_cmp__2024_de_02_08_2024_publicidade_das_deliberacoes.pdf">https://www.cm-pombal.pt/cmpombal/uploads/document/file/1880/edital_n_o_16_cmp__2024_de_02_08_2024_publicidade_das_deliberacoes.pdf</a></li> <li>(2) OK. <a href="https://www.cm-pombal.pt/cmpombal/uploads/document/file/1183/avison_10798_2024_2_regulamentoincentivonatalidadeapoiofamilia_bercofeliz.pdf">https://www.cm-pombal.pt/cmpombal/uploads/document/file/1183/avison_10798_2024_2_regulamentoincentivonatalidadeapoiofamilia_bercofeliz.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Edital em texto, mas apresenta-se em imagem texto.</li> <li>(2) Aviso em texto com texto selecionável, pesquisável, copiável e percetível de forma não visual - usando por exemplo leitor de ecrã.</li> </ul> <h5>Montalegre (NOK)</h5> <p><a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></p> <p>Evidência</p> <ul> <li>(1) NOK. <a href="https://www.cm-montalegre.pt/cmmontalegre/uploads/document/file/4879/emissao_atestado_medico___presidenciais_2026.pdf">https://www.cm-montalegre.pt/cmmontalegre/uploads/document/file/4879/emissao_atestado_medico___presidenciais_2026.pdf</a> </li> <li>(2) OK. <a href="https://www.cm-montalegre.pt/cmmontalegre/uploads/document/file/1479/municipio_de_montalegre___plano_estrategico_municipal.pdf">https://www.cm-montalegre.pt/cmmontalegre/uploads/document/file/1479/municipio_de_montalegre___plano_estrategico_municipal.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Informação dirigida a pessoas "portadoras de deficiência" em texto que se apresenta em imagem de texto não selecionável, não pesquisável, pixelizável quando ampliada, impossível de ler com sintetizador de fala e/ou braille, ....</li> <li>(2) Plano estratégico que se apresenta com texto selecionável. Inclusivamente o texto das tabelas é selecionável</li> </ul> <h5>Águeda (NOK)</h5> <p><a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></p> <p>Evidência</p> <ul> <li>(1) OK. <a href="https://www.cm-agueda.pt/cmagueda/uploads/document/file/428/Presta__o_de_Contas_2007.pdf">https://www.cm-agueda.pt/cmagueda/uploads/document/file/428/Presta__o_de_Contas_2007.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-agueda.pt/cmagueda/uploads/document/file/5450/leonardo_cp_n_o_77_22_assinado.pdf">https://www.cm-agueda.pt/cmagueda/uploads/document/file/5450/leonardo_cp_n_o_77_22_assinado.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>a evidência (1) é um bom exemplo em como o requisito 10.1 da checklist é um requisito mínimo. O texto apresentado é acessível. Apesar do documento ter outros elementos semânticos como tabelas e gráficos, estes estão fora do âmbito do requisito 10.1. </li> <li>(2) texto de um contrato programa que não se consegue ler com leitor de ecrã.</li> </ul> <p>nota: ao entrar em <a href="https://www.cm-agueda.pt/cmagueda/uploads/writer_file/document/458/20111021133217641600.pdf">https://www.cm-agueda.pt/cmagueda/uploads/writer_file/document/458/20111021133217641600.pdf</a> e ao clicar com o rato em cima do documento, ele provocou sistematicamente este erro:</p> <img src="https://github.com/user-attachments/assets/c32f9fc1-3e20-4a5e-a4e0-8a94e9dd9098" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Sátão (NOK)</h5> <p><a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a></p> <p>Evidência</p> <ul> <li>(1) NOK. <a href="https://www.cm-satao.pt/cmsatao/uploads/document/file/960/tmdp_2024.pdf">https://www.cm-satao.pt/cmsatao/uploads/document/file/960/tmdp_2024.pdf</a></li> <li>(2) OK. <a href="https://www.cm-satao.pt/cmsatao/uploads/document/file/1321/alteracao_ao_artigo_4_o_do_capitulo_iii_do_regulamento_municipal_da_urbanizacao_e_edificacao_e_taxas__publicado_no_apendice_n_o_60_ao_diario_da_republica__2_a_serie__n_o_124__de_29_de_junho_de_2006_.pdf">https://www.cm-satao.pt/cmsatao/uploads/document/file/1321/alteracao_ao_artigo_4_o_do_capitulo_iii_do_regulamento_municipal_da_urbanizacao_e_edificacao_e_taxas__publicado_no_apendice_n_o_60_ao_diario_da_republica__2_a_serie__n_o_124__de_29_de_junho_de_2006_.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) minuta de uma ata em texto que se apresenta como imagem de texto.</li> <li>(2) aviso em texto selecionável.</li> </ul> <h5>Ilhavo (NOK)</h5> <p><a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></p> <p>Evidências</p> <ul> <li>(1) NOK. <a href="https://www.cm-ilhavo.pt/cmilhavo2020/uploads/document/file/7406/edital_134_19.pdf">https://www.cm-ilhavo.pt/cmilhavo2020/uploads/document/file/7406/edital_134_19.pdf</a></li> <li>(2) OK. <a href="https://www.cm-ilhavo.pt/cmilhavo2020/uploads/document/file/9577/balanco_social_2024.pdf">https://www.cm-ilhavo.pt/cmilhavo2020/uploads/document/file/9577/balanco_social_2024.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) edital em texto com imagem de texto não selecionável.</li> <li>(2) apesar de ser uma tabela o texto é selecionável</li> </ul> <h5>Oliveira do Bairro (NOK)</h5> <p><a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></p> <p>Evidências</p> <ul> <li>(1) NOK. <a href="https://www.cm-olb.pt/oliveiradobairro/uploads/document/file/11407/ordem_de_trabalhos_12_06_2025.pdf">https://www.cm-olb.pt/oliveiradobairro/uploads/document/file/11407/ordem_de_trabalhos_12_06_2025.pdf</a></li> <li>(2) NOK. <a href="https://www.cm-olb.pt/oliveiradobairro/uploads/document/file/11841/ata_4_proc_9_pcc_2025.pdf">https://www.cm-olb.pt/oliveiradobairro/uploads/document/file/11841/ata_4_proc_9_pcc_2025.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) ordem de trabalhos em texto que não se consegue ler com leitor de ecrã, não é pesquisável, selecionável, etc.</li> <li>(2) ata em texto que não se consegue ler com leitor de ecrã, ...</li> </ul> <h5>Vagos (OK)</h5> <p><a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></p> <p>Evidências</p> <ul> <li>(1) OK. <a href="https://www.cm-vagos.pt/cmvagos/uploads/document/file/3926/aviso_dr_11nov2019.pdf">https://www.cm-vagos.pt/cmvagos/uploads/document/file/3926/aviso_dr_11nov2019.pdf</a></li> <li>(2) OK. <a href="https://www.cm-vagos.pt/cmvagos/uploads/document/file/4974/p0301_cira_mgc_so_f3_1_m_vagos_fs080v00_jun_elem_op_lot_v01.pdf">https://www.cm-vagos.pt/cmvagos/uploads/document/file/4974/p0301_cira_mgc_so_f3_1_m_vagos_fs080v00_jun_elem_op_lot_v01.pdf</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>(1) Aviso em texto que se apresenta em texto selecionável</li> <li>(2) Dodumento explicativo de serviço. Encontra-se em texto selecionável</li> </ul> <h5>Valongo (NOK)</h5> <p><a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></p> <p>Evidência</p> <ul> <li>(1) NOK. <a href="https://www.cm-valongo.pt/cmvalongo/uploads/document/file/10301/2025___7a_alteracao_do_orcamento_e_das_grandes_opcoes_do_plano.pdf">https://www.cm-valongo.pt/cmvalongo/uploads/document/file/10301/2025___7a_alteracao_do_orcamento_e_das_grandes_opcoes_do_plano.pdf</a></li> <li>(2) <a href="https://www.cm-valongo.pt/cmvalongo/uploads/document/file/828/5591098f99da8.pdf">https://www.cm-valongo.pt/cmvalongo/uploads/document/file/828/5591098f99da8.pdf</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>(1) Documento texto que se apresenta na horizontal com imagens de texto não selecionável.</li> <li>(2) Ata em texto que se apresenta em texto selecionável.</li> </ul> </div> </li> </ul></div> </div> <div class="checklist-section"> <h3 id="checklist-conteudo">Checklist Conteúdo</h3> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p><strong>Nível de conformidade:</strong></p> <ul> <li><strong>Checklist Conteúdo</strong>: 29.4% (5/17) <ul> <li>Requisitos avaliados: 17 (17 aplicáveis)</li> <li>Requisitos OK: 5</li> <li>Requisitos NOK: 12</li> </ul> </li> </ul> <h4 class="requirement-title" id="req-conteudo-r-1.1">Requisito 1.1 - O sítio Web apresenta um resumo breve do seu propósito, visível sem se fazer scroll</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/68" target="_blank" rel="noopener noreferrer">issue#68</a> <strong>O resumo do propósito não está legível</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O sítio Web apresenta um resumo breve do seu propósito, visível sem fazer scroll.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n11">ver requisito 1.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que, em determinados websites, o resumo do propósito não se encontra devidamente legível. Por exemplo, no website do <a href="https://www.municipio.esposende.pt/">Município de Esposende</a> observa-se uma sobreposição de conteúdos que compromete a leitura do resumo do propósito na resolução mobile:</p> <img src="https://github.com/user-attachments/assets/3767436a-cbd0-424c-b375-b575ceb873f8" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito está sobreposto a outros elementos quando visto em mobile</em></p> <hr> <p>Outro exemplo pode ser observado no website da <a href="https://valpacos.pt/">CM de Valpaços</a>, onde se verifica que o resumo do propósito se encontra sobreposto a uma imagem com baixo contraste, e isso compromete a legibilidade do texto quando visto na resolução tablet:</p> <img src="https://github.com/user-attachments/assets/771805ce-6454-4eed-9102-2a7a383262c6" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito com contraste abaixo do recomendado (1,4:1) na resolução tablet</em></p> <hr> <p>Na <a href="https://www.cm-montalegre.pt/">CM Monte Alegre</a> o resumo do propósito está sobreposto a outro elemento interativo, o menu e seleção de idioma, que precisa ser corrigido:</p> <img src="https://github.com/user-attachments/assets/ec4498c7-4972-4987-bab7-6d4e948cc66e" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito do site está sobreposto a outros elementos interativos prejudicando a legibilidade do conteúdo</em></p> <h5>Sugestão de correção</h5> <ul> <li>O resumo do propósito deverá estar sempre visível, independente da resolução (desktop, tablet e mobile).</li> <li>Para problemas de contraste, recomendamos efetuarem as devidas correções relacionadas com a issue #47</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (NOK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (OK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (OK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (OK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (OK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/67" target="_blank" rel="noopener noreferrer">issue#67</a> <strong>O resumo do propósito do website deixa de aparecer em determinadas resoluções</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O sítio Web apresenta um resumo breve do seu propósito, visível sem fazer scroll.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n11">ver requisito 1.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que não existe um resumo sobre o propósito do website na página inicial quando visto em resoluções diferentes.</p> <p>No website da <a href="https://www.cm-braganca.pt/">CM de Bragança</a> é apresentado um resumo do propósito do site na versão desktop e tablet. Nas resoluções para dispositivos móveis esta frase deixa de ser exibida:</p> <img src="https://github.com/user-attachments/assets/979ca01e-248e-47ac-bf97-ba9751044bfd" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito apresentado na resolução desktop e tablet</em></p> <img src="https://github.com/user-attachments/assets/c2e6046c-37f1-4bda-88f0-babca28bf479" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito deixa de aparecer na resolução mobile</em></p> <hr> <p>No website da <a href="https://www.cmav.pt/">CM de Arcos de Valdevez</a> o resumo do propósito deixa de aparecer nas resoluções tablet e mobile: </p> <img src="https://github.com/user-attachments/assets/a63ed5b9-ea97-46c5-9d52-d42af188521a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito apresentado deixa de aparecer na resolução tablet</em></p> <img src="https://github.com/user-attachments/assets/bed8e5cd-adf8-4738-b1b1-8dec43746dc3" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito apresentado deixa de aparecer na resolução mobile</em></p> <hr> <p>No website da <a href="https://www.cm-vagos.pt/">CM de Vagos</a> o resumo do propósito deixa de aparecer na resolução tablet: </p> <img src="https://github.com/user-attachments/assets/34c6d2f1-555b-4ef1-a15f-b6f9fca78a5f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito apresentado deixa de aparecer na resolução tablet</em></p> <h5>Sugestão de correção</h5> <ul> <li>O resumo do propósito deverá estar sempre visível, independente da resolução (desktop, tablet e mobile).</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (OK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (OK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (OK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/66" target="_blank" rel="noopener noreferrer">issue#66</a> <strong>O propósito do site está parcialmente visível sem fazer scroll</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O sítio Web apresenta um resumo breve do seu propósito, visível sem fazer scroll.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n11">ver requisito 1.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que em alguns websites, o resumo do propósito está parcialmente visível na secção principal, sendo necessário efetuar o scroll para continuar a sua leitura. Por exemplo, no website da <a href="https://www.cm-ilhavo.pt/">CM Ílhavo</a> para dar continuidade na leitura do propósito é necessário efetuar um scroll:</p> <img src="https://github.com/user-attachments/assets/901df99f-b79c-4e9f-bcb7-c7517bbce139" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resumo do propósito parcialmente visível na secção principal do telemóvel</em></p> <hr> <p>Na <a href="https://www.cm-valongo.pt/">CM de Valongo</a> o mesmo acontece em resoluções específicas, como o iPhone SE, é necessário fazer um scroll:</p> <img src="https://github.com/user-attachments/assets/e39094e9-75db-4d9f-bd13-7f288b8efef4" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Necessário efetuar scroll para ler o resumo do propósito na resolução do iPhone SE</em></p> <h5>Sugestão de correção</h5> <ul> <li>Devem garantir que o resumo do propósito seja visível imediatamente na página. Como alternativa podem incluir no topo do website para torna-lo sempre visível independente da resolução ou página. Como exemplo, podemos mencionar o website da <a href="https://www.acessibilidade.gov.pt/">acessibilidade.gov</a> e <a href="https://selo.usabilidade.gov.pt/">selo.gov</a></li> </ul> <h5>Websites que necessitam de ajustes (NOK)</h5> <ul> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (OK)</a>: não apresenta resumo do propósito em mobile</li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (OK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (OK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (OK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-1.2">Requisito 1.2 - Os termos mais complexos têm uma definição agregada</h4> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 3 melhorias que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/71" target="_blank" rel="noopener noreferrer">issue#71</a> <strong>O glossário não está construído de forma apropriada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.2</span></div> <div class="issue-content"><blockquote> <p>Os termos mais complexos têm uma definição agregada.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n12">ver requisito 1.2 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que o glossário de termos complexos apresentado em cada website não se encontra devidamente estruturado. Apesar de existir uma organização por letra inicial, esta não está implementada sob a forma de cabeçalhos, o que compromete a navegação e a acessibilidade do conteúdo. Tendo em conta que se trata de uma página com um volume elevado de informação, é fundamental disponibilizar mecanismos que permitam ao utilizador filtrar os termos ou navegar rapidamente entre as diferentes letras iniciais, de forma a garantir uma pesquisa mais eficiente, intuitiva e precisa.</p> <p>Por exemplo, no website da Câmara Municipal de Bragança, o glossário encontra-se organizado por letras iniciais. No entanto, essas letras não estão devidamente estruturadas como cabeçalhos:</p> <img src="https://github.com/user-attachments/assets/b2648c02-9202-4f89-9a9c-9e2d72e1d4ae" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Letras iniciais utilizadas para organizar o conteúdo do glossário não estão estruturadas como cabeçalhos</em></p> <h6>Sugestão de correção</h6> <ul> <li>Recomendamos que as letras iniciais sejam estruturadas como cabeçalhos, de forma a melhorar a organização do conteúdo, permitindo saltos através dos leitores de ecrã.</li> <li>Recomendamos corrigirem também os problemas relativos aos cabeçalhos do critério #9</li> </ul> <h5>Websites que necessitam de correções (NOK):</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (NOK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (NOK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (NOK</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (NOK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK):</h5> <p>Todos os websites apresentam o mesmo problema.</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/70" target="_blank" rel="noopener noreferrer">issue#70</a> <strong>Existem termos complexos que não estão inseridos no glossário</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.2</span></div> <div class="issue-content"><blockquote> <p>Os termos mais complexos têm uma definição agregada.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n12">ver requisito 1.2 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Foram encontrados termos considerados complexos que não possuem descrição apresentada no glossário do website.</p> <h5>Sugestão de correção</h5> <ul> <li>Rever o conteúdo do website para garantir que os termos complexos sejam incluídos no glossário.</li> <li>Embora seja possível localizar o termo "RSS feed" em ficha técnica, em alguns momentos é possível ver no menu. Faz sentido apresentar esse conteúdo junto a formulários, uma vez que se trata de uma informação mais técnica?</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li><a href="https://www.municipio.esposende.pt/viver/coesao-social/noticias">Município de Esposende: Notícias (NOK)</a>: termo "coesão social" apresentado no menu</li> <li><a href="https://www.cm-braganca.pt/sessoes-participativas-pnm">CM de Bragança: Sessoes participativas pnm (NOK)</a>: sigla "PNM" sem descrição faz com que o significado do termo "sessões participativas PNM" não seja claro</li> <li><a href="https://www.cmav.pt/informar/orgaos-autarquicos/camara-municipal/executivo-da-camara-municipal">CM de Arcos de Valdevez: Transparência municipal (NOK)</a>: termo "pelouros" - remover?</li> <li><a href="https://www.sabrosa.pt/viver/comunicacao/boletim-municipal/2018">CM de Sabrosa (OK)</a>: termo "Boletim Municipal"</li> <li><a href="https://www.cm-caminha.pt/viver/documentacao/recursos-humanos?folders_list_19_folder_id=251/">CM de Caminha: Recursos Humanos (OK)</a>: termo "Balanço social"</li> <li><a href="https://www.cm-peniche.pt/municipio/fundos-comunitarios/projetos-qren">CM de Peniche: Projetos QREN (OK)</a>: sigla "QREN", termo "Projetos QREN"</li> <li><a href="https://www.cm-peniche.pt/municipio/camara-municipal/pelouros">CM de Peniche: Camara municipal (OK)</a>: : termo "pelouros" - remover?</li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a>: termo "Participação de Ocorrência"</li> <li><a href="https://www.cm-montalegre.pt/rss-feed">CM Monte Alegre: RSS feed (OK)</a>: termo técnico "RSS feed"</li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a>: termo técnico "RSS feed" (embora esteja dentro de ficha técnica)</li> <li><a href="https://www.cm-ilhavo.pt/aluguer-de-espacos">CM Ílhavo (OK)</a>: termo técnico "RSS feed"</li> <li><a href="https://www.cm-agueda.pt/rss-feed">CM de Águeda (OK)</a>: termo técnico "RSS feed"</li> <li><a href="https://www.cm-olb.pt/pages/863">CM Oliveira do Bairro (OK)</a>: termo técnico "RSS feed"</li> <li><a href="https://www.cm-vagos.pt/ficha-tecnica/rss-feed">CM de Vagos (NOK)</a>: termo "RSS feed"</li> <li><a href="https://www.cm-valongo.pt/ficha-tecnica">CM de Valongo (OK)</a>: termo "RSS"</li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a>: termo "RSS feed</li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a>: termo "RSS feed</li> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a>: termo "RSS feed</li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a>: termo "RSS feed</li> <li><a href="https://valpacos.pt/">CM de Valpaços (OK)</a>: termo "RSS feed</li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a>: termo "RSS feed</li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <p>Todos os websites apresentam termos que podem ter uma definição</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/69" target="_blank" rel="noopener noreferrer">issue#69</a> <strong>Existem siglas sem definição no website</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.2</span></div> <div class="issue-content"><blockquote> <p>Os termos mais complexos têm uma definição agregada.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n12">ver requisito 1.2 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>O uso de abreviações sem a respetiva explicação pode gerar confusão entre diferentes tipos de leitores. Por exemplo, pessoas estrangeiras podem não reconhecer determinadas siglas, e utilizadores que recorrem a ferramentas de ampliação ou leitores de ecrã podem perder o contexto envolvente do texto, o que dificulta a correta compreensão do conteúdo.</p> <p>A utilização da ferramenta ReadSpeaker não resolve esta limitação, uma vez que não fornece o significado das abreviações.</p> <h5>Sugestão de correção</h5> <ul> <li>Podem incluir no website uma página de glossário para siglas. Pode ser utilizado como referência o <a href="https://www.acessibilidade.gov.pt/glossario/">glossário do site da Acessibilidade</a></li> <li>Outra alternativa seria dentro do próprio glossário incluir a informação de termos complexos, e outra secção para abreviatura e siglas</li> </ul> <h5>Websites que necessitam de correções (NOK)</h5> <ul> <li>CM de Bragança: <a href="https://www.cm-braganca.pt/sessoes-participativas-pnm">https://www.cm-braganca.pt/sessoes-participativas-pnm</a> </li> <li>CM de Guimarães:<a href="https://www.cm-guimaraes.pt/areas-de-intervencao/noticia/smpc-emite-aviso-a-populacao-para-precipitacao-persistente-e-vento-forte-nos-proximos-dias">https://www.cm-guimaraes.pt/areas-de-intervencao/noticia/smpc-emite-aviso-a-populacao-para-precipitacao-persistente-e-vento-forte-nos-proximos-dias</a>: sigla "PNM" sem descrição faz com que o significado do termo "sessões participativas PNM" não seja claro</li> <li><a href="https://www.cmav.pt/informar/avisos-e-anuncios?folders_list_44_folder_id=392">CM de Arcos de Valdevez: Avisos e anuncios (NOK)</a>: abreviação LN não está clara no link</li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (OK)</a>: sigla "CIAC"</li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro: Barco Moliceiro e Carpintaria Naval</a>: sigla INCPI apresentada nos links</li> <li><a href="https://valpacos.pt/eu-sou-municipe/urbanismo-e-ambiente/reabilitacao-urbana">CM de Valpaços: Reabilitação Urbana)</a>: sigla "IFRRU"</li> <li><a href="https://www.sabrosa.pt/viver/comunicacao/noticias/noticia/aviso-a-estrada-municipal-323-entre-sabrosa-e-pinhao-com-circulacao-condicionada">CM de Sabrosa: Noticias</a></li> <li><a href="https://www.cm-caminha.pt/viver/documentacao/recursos-humanos?folders_list_19_folder_id=251/">CM de Caminha: Recursos Humanos (OK)</a>: siglas "SIADAP" e "PEPAL"</li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a>: termo "RSS feed"</li> <li><a href="https://www.cm-agueda.pt/evento-6/susie-filipe-em-rempo-real">CM de Águeda: Eventos Susie Filipe - 'Em Rempo Real' (OK)</a>: sigla "CAA"</li> <li><a href="https://www.cm-montalegre.pt/transparencia/projetos-cofinanciados-pela-uniao-europeia-ue#faq-26">CM Monte Alegre: Transparencia (OK)</a>: sigla "HITTS" apresentado no link</li> <li><a href="https://www.cm-satao.pt/autarquia/pprg">Município de Satão: PPRG (OK</a>: sigla "PPRG"</li> <li><a href="https://www.cm-ilhavo.pt/viver/areas-de-intervencao/acao-social-e-saude">CM Ílhavo: Ação Social e Saúde (OK)</a>: sigla "IPSS"</li> <li><a href="https://www.cm-olb.pt/municipio/assembleia-municipal/gabinete-de-apoio">CM Oliveira do Bairro (OK)</a> e <a href="https://www.cm-olb.pt/contactos/contactos-uteis">CM Oliveira do Bairro (OK)</a>: sigla "TELF" (telefone e faz juntos), T. (telefone) e F. (fax)</li> <li><a href="https://www.cm-vagos.pt/viver/acao-social-e-habitacao/acao-social/cpcj">CM de Vagos: Ação social (NOK)</a>: sigla "CPCJ"</li> <li><a href="https://www.cm-valongo.pt/diretorio-servicos/areas-de-intervencao/intervencao-social/igualdade-de-genero/reunioes-da-equipa-do-pmind">CM de Valongo (OK)</a>: sigla "PMIND"</li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-1.3">Requisito 1.3 - Cada bloco de conteúdo contém a sua data de atualização</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/72" target="_blank" rel="noopener noreferrer">issue#72</a> <strong> Existem conteúdos sem data de atualização</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Cada bloco de conteúdo contém a sua data de atualização.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n13">ver requisito 1.3 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que foram encontradas páginas sem data de atualização. Por exemplo, no website da Câmara Municipal de Matosinhos, foram identificados conteúdos cuja data da última atualização não está sendo apresentada:</p> <img src="https://github.com/user-attachments/assets/48ec49d8-1d15-40ef-a22c-41e6d9296038" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Página Executivo Municipal não possui data de atualização de seu conteúdo</em></p> <hr> <p>O website da Câmara Municipal de Sabrosa se mantém o mesmo problema identificado anteriormente, nomeadamente a ausência da data de última atualização nas páginas:</p> <img src="https://github.com/user-attachments/assets/246744c8-6d98-4f04-b4e2-1507cbf64887" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Página Presidente não possui data de atualização de seu conteúdo</em></p> <h5>Sugestão de correção</h5> <ul> <li>Recomendamos rever todas as páginas do website pra garantir que cada uma delas apresente de forma clara a sua respetiva data de atualização.</li> <li>A informação deve ser legível, com tamanho e contraste apropriado.</li> </ul> <h5>Websites que não estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-matosinhos.pt/municipio/executivo-municipal">CM de Matosinhos: Executivo municipal (NOK)</a></li> <li><a href="https://www.sabrosa.pt/autarquia/orgaos-autarquicos/presidente">CM de Sabrosa: Presidente (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (OK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (OK)</a></li> <li><a href="https://www.cm-caminha.pt/">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (OK)</a></li> <li><a href="https://www.cm-montalegre.pt/">CM Monte Alegre (OK)</a></li> <li><a href="https://www.cm-agueda.pt/">CM de Águeda (OK)</a></li> <li><a href="https://www.cm-satao.pt/">Município de Satão (OK</a></li> <li><a href="https://www.cm-ilhavo.pt/">CM Ílhavo (OK)</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-valongo.pt/">CM de Valongo (OK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (OK)</a></li> <li><a href="https://www.cmav.pt/">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-vagos.pt/">CM de Vagos (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (OK)</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-2.1">Requisito 2.1 - O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/76" target="_blank" rel="noopener noreferrer">issue#76</a> <strong>Etiquetas dos campos de preenchimento possuem tamanho abaixo do recomendado</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n21">ver requisito 2.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se a existência de formulários cujo tamanho de fonte da etiqueta está abaixo do recomendado (16 pixels). Por se tratar de uma informação essencial para o correto preenchimento do formulário, consideramos este elemento como informação primária, devendo, portanto, ter um tamanho mínimo de 16 pixels.</p> <p>No website da <a href="https://www.cm-guimaraes.pt/ficha-tecnica/acessibilidade/contactos-da-autarquia">CM de Guimarães: Contactos da autarquia</a>, é possível identificar a existência de formulários cujas etiquetas apresentam um tamanho inferior a 16 pixels:</p> <img src="https://github.com/user-attachments/assets/01f4fce3-0bf0-4465-baab-fcaad494bf95" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Etiqueta dos campos de formulário com tamanho de fonte abaixo do recomendado (14,6 pixels)</em></p> <h6>Sugestão de correção</h6> <ul> <li>É necessário rever todos os formulários e campos de pesquisa, assegurando que o tamanho das etiquetas (labels) seja, no mínimo, de 16 pixels.</li> </ul> <h5>Websites que não estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/ficha-tecnica/acessibilidade/contactos-da-autarquia">CM de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/municipio/area-do-municipe/lista-de-empresas/formulario-de-registo-de-empresa">Município de Esposende (OK)</a></li> <li><a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">CM de Matosinhos (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/contactos/caixa-de-contacto">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> <li><a href="https://valpacos.pt/pages/976">CM de Valpaços (OK)</a></li> <li><a href="https://www.cm-caminha.pt/viver/servicos-municipais/balcao-virtual/area-do-municipe/ocorrencias/formulario-de-registo-de-ocorrencias">CM de Caminha (OK)</a></li> <li><a href="https://www.cm-peniche.pt/recolha-de-monstros-domesticos-formulario-on-line">CM de Peniche (OK)</a></li> <li><a href="https://www.cm-satao.pt/balcao-virtual/atendimento/sugestao-reclamacao">Município de Satão (OK</a> </li> <li><a href="https://www.cm-ilhavo.pt/pergunte-nos">CM Ílhavo (OK)</a></li> <li><a href="https://www.cm-olb.pt/viver/apoio-ao-municipe/atendimento/elogios-reclamacoes-sugestoes">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-braganca.pt/formulario">CM de Bragança (OK)</a></li> <li><a href="https://www.cmav.pt/investir/start-arcos/programa-de-apoio-ao-comercio-procom-2021/candidatura/formulario-de-candidatura">CM de Arcos de Valdevez (OK)</a></li> <li><a href="https://www.cm-vagos.pt/municipio/comunicacao/newsletter">CM de Vagos (OK)</a></li> <li><a href="https://www.sabrosa.pt/balcao-virtual/area-do-municipe/formulario-de-registo-de-ocorrencias">CM de Sabrosa (OK)</a></li> <li><a href="https://www.cm-pesoregua.pt/sugestoes-reclamacoes-elogios">CM Peso da Régua (OK)</a></li> <li><a href="https://www.cm-pombal.pt/sugestoes-reclamacoes-elogios">CM de Pombal (OK)</a></li> <li><a href="https://www.cm-montalegre.pt/cidadao/bupi-balcao-unico-do-predio/agendamento-de-atendimento-bupi">CM Monte Alegre (OK)</a></li> <li><a href="https://www.cm-agueda.pt/sugestoes-e-reclamacoes">CM Águeda (OK)</a></li> <li><a href="https://www.cm-albergaria.pt/municipio/contactos">CM Albergaria Velha (OK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-valongo.pt/servicos/contactos-uteis">CM de Valongo (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/75" target="_blank" rel="noopener noreferrer">issue#75</a> <strong>A informação sobre contactos no rodapé possui tamanho inferior a 16px</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n21">ver requisito 2.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se que os websites alvo da análise apresentam o contacto principal da câmara municipal no rodapé da página. Contudo, apesar da relevância dessa informação, a mesma encontra-se classificada como conteúdo secundário e é apresentada com um tamanho de fonte inferior a 16 píxeis. </p> <p>Como por exemplo, no website da <a href="https://www.cm-vagos.pt/municipio">CM de Vagos</a> é possível identificar que a informação está sendo apresentada com tamanho de fonte de 13 pixels:</p> <img src="https://github.com/user-attachments/assets/305ef056-d2a2-42eb-9e63-1bdf5d958198" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Informação de contactos do município com tamanho de fonte abaixo de 16 pixels</em></p> <h6>Sugestão de melhoria</h6> <ul> <li>Rever a informação apresentada nos websites, de forma a garantir que o conteúdo utilize um tamanho mínimo de letra de 16 pixels.</li> </ul> <h5>Websites que não estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/resultados_pesquisa?search_terms=galeria">Município de Esposende (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/municipe/participacao-de-ocorrencia">CM de Matosinhos (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/contactos/caixa-de-contacto">Comunidade Intermunicipal da Região de Aveiro (NOK)</a></li> <li><a href="https://valpacos.pt/balcao-virtual/servicos-online-11">CM de Valpaços (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/viver/servicos-municipais/balcao-virtual/area-do-municipe/ocorrencias/formulario-de-registo-de-ocorrencias">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-satao.pt/balcao-virtual/atendimento/sugestao-reclamacao">Município de Satão (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/municipio/contactos-uteis/outros">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/apoio-ao-emigrante/gabinete-de-apoio-ao-emigrante">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/municipio">CM de Vagos (NOK)</a></li> <li><a href="https://www.sabrosa.pt/autarquia/contactos/poi-79/appacdm-de-sabrosa">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/area-do-municipe/servicos-online">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/municipio/municipio/demografia">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/municipio/contactos/forcas-de-seguranca/poi/gnr-guarda-nacional-republicana-posto-territorial-de-agueda">CM Águeda (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/servicos/contactos-uteis">CM de Valongo (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (não avaliado)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-pombal.pt/comunicar-ocorrencias">CM de Pombal (OK)</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/74" target="_blank" rel="noopener noreferrer">issue#74</a> <strong> O conteúdo tem um tamanho de texto inferior a 12pt (16px)</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n21">ver requisito 2.1 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Verifica-se, nos websites alvo de análise, a existência de conteúdos cujo tamanho de fonte se encontra abaixo do valor recomendado, nomeadamente inferior a 16 pixels</p> <p>No website da <a href="https://www.cm-guimaraes.pt/pages/866">CM de Guimarães: Ponte</a>, é possível identificar conteúdos com tamanho de fonte abaixo do recomendado (16 pixels).</p> <img src="https://github.com/user-attachments/assets/1153494c-fdb9-405e-b986-422d1ba5b03c" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Conteúdo principal apresentado na tabela possui tamanho de fonte abaixo do recomendado (12,8 pixels)</em></p> <hr> <p>Isso acontece em outros websites, como por exemplo, no website da <a href="https://www.cm-matosinhos.pt/contactos/camara-municipal/poi/biblioteca-municipal-de-sao-mamede-de-infesta">CM de Matosinhos: biblioteca-municipal-de-sao-mamede-de-infesta (OK)</a> é possivel identificar que o conteúdo possui tamanho de fonte menor que 16 pixels: </p> <img src="https://github.com/user-attachments/assets/e5ac222f-8cfb-4ccd-95f0-d09e022e28de" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Conteúdo principal apresentado na tabela possui tamanho de fonte abaixo do recomendado (14,4 pixels)</em></p> <hr> <p>No website do <a href="https://www.municipio.esposende.pt/resultados_pesquisa?search_terms=galeria">Município de Esposende</a> é possível ver que o resultado da pesquisa apresenta um tamanho de fonte abaixo de 16 pixels:</p> <img src="https://github.com/user-attachments/assets/1ec96e77-441c-4cfb-a7ea-9e50fdd2c101" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Resultado da página de pesquisa possui tamanho de fonte abaixo do recomendado (12,8 pixels)</em></p> <hr> <p>No website da <a href="https://valpacos.pt/balcao-virtual/servicos-online-11">CM de Valpaços (OK)</a> existem instruções transmitidas em texto cujo tamanho está abaixo de 16 pixels:</p> <img src="https://github.com/user-attachments/assets/5bb6c15e-07ca-4dee-a22d-3e308189e3e1" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Instruções em texto possuem tamanho abaixo do recomendado (14 pixels)</em></p> <hr> <p>No website da <a href="https://www.cm-peniche.pt/">CM de Peniche (OK)</a> é possível verificar que as opções do menu possuem tamanho abaixo do recomendado, 16 pixels:</p> <img src="https://github.com/user-attachments/assets/e06759a7-4b81-437e-b9e4-8332199a27a0" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Opções do menu principal estão com tamanho abaixo do recomendado (14 pixels)</em></p> <hr> <p>No website do <a href="https://www.cm-satao.pt/balcao-virtual/atendimento/sugestao-reclamacao">Município de Satão</a> é possível verificar que as mensagens de erro possuem tamanho abaixo de 16 pixels:</p> <img src="https://github.com/user-attachments/assets/20e52ea2-94ec-4558-8641-89bb6b630f2c" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Mensagem de erro do formulario de sugestão e reclamação possui tamanho abaixo do recomendado (13 pixels)</em></p> <h6>Sugestão de correção</h6> <ul> <li>Devem garantir que todos os conteúdos apresentem um tamanho de fonte mínimo de 16 pixels. Isso inclui os conteúdos específicos de cada página, instruções e mensagens de erro.</li> <li>O menu principal deve ter as suas opções com tamanho de fonte de no mínimo, 16 pixels.</li> </ul> <h5>Websites que não estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-guimaraes.pt/pages/866">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/resultados_pesquisa?search_terms=galeria">Município de Esposende (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/contactos/camara-municipal/poi/biblioteca-municipal-de-sao-mamede-de-infesta">CM de Matosinhos (NOK)</a></li> <li><a href="https://valpacos.pt/balcao-virtual/servicos-online-11">CM de Valpaços (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/viver/documentacao/contratacao-publica/ajustes-diretos">CM de Caminha: Ajustes diretos (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/">CM de Peniche (NOK)</a> </li> <li><a href="https://www.cm-satao.pt/balcao-virtual/atendimento/sugestao-reclamacao">Município de Satão (NOK</a></li> <li><a href="https://www.cm-ilhavo.pt/municipio/contactos-uteis/outros">CM Ílhavo (OK)</a></li> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (NOK)</a> </li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/apoio-ao-emigrante/gabinete-de-apoio-ao-emigrante">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/participar">CM de Vagos (NOK)</a> e <a href="https://www.cm-vagos.pt/servicos/servicos-online">CM de Vagos: Serviços (NOK)</a>: opções com tamanho de texto abaixo do recomendado e possui texto com caixa alta </li> <li><a href="https://www.sabrosa.pt/autarquia/contactos/poi-79/appacdm-de-sabrosa">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/area-do-municipe/servicos-online">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/municipio/contactos-e-horarios/agendamentos-de-atendimentos-presenciais">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/municipio/municipio/demografia">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/municipio/contactos/forcas-de-seguranca/poi/gnr-guarda-nacional-republicana-posto-territorial-de-agueda">CM Águeda (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/investir/medidas-de-incentivos#faq-1/">CM Albergaria Velha (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-valongo.pt/servicos/contactos-uteis">CM de Valongo (OK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/comunicacao/noticias/noticia/cira-reune-em-bruxelas">Comunidade Intermunicipal da Região de Aveiro (OK)</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-2.2">Requisito 2.2 - A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/77" target="_blank" rel="noopener noreferrer">issue#77</a> <strong>O conteúdo tem um tamanho de texto inferior a 10pt (13.3px)</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n22">ver requisito 2.2 na lista Conteúdo</a></p> </blockquote> <h5>Descrição do problema</h5> <p>Existem conteúdos com tamanho abaixo da recomendação mínima permitida para elementos secundários.</p> <p>Por exemplo, no website da <a href="https://www.cm-albergaria">CM Albergaria Velha</a> é possível verificar que a informação sobre o contacto possui tamanho abaixo de 13,3 pixels:</p> <img src="https://github.com/user-attachments/assets/210de804-c5b9-440f-9c01-0a06bc9f6545" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Contacto da Câmara do município possui tamanho de fonte abaixo do recomendado (12,8 pixels)</em></p> <hr> <p>Outro exemplo acontece no website da <a href="https://www.cm-matosinhos.pt/">CM de Matosinhos</a> em que é possível identificar links no rodapé com tamanho abaixo do mínimo de 13,3 pixels:</p> <img src="https://github.com/user-attachments/assets/dc97a791-3225-48fa-b2e8-76ca6e0523ad" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tamanho da fonte dos links apresentados no rodapé é de 12,8 pixels</em></p> <hr> <p>No website do <a href="https://www.cm-satao.pt/autarquia/camara-municipal/executivo-municipal#faq-6">Município de Satão</a> é possível identificar textos dentro dos acordeões com tamanho de fonte abaixo do mínimo recomendado (13,3 pixels);</p> <img src="https://github.com/user-attachments/assets/c6bdae45-3bde-4637-aafa-64ebe226680f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Conteúdo com tamanho de fonte abaixo do recomendado (10 pixels)</em></p> <hr> <p>No website da <a href="https://www.cmav.pt/informar/agenda-de-eventos/agenda-cultural/evento-77/arcos-a-mesa-cozido-a-moda-dos-arcos-70">CM de Arcos de Valdevez (OK)</a> é possível identificar o texto dos breadcrumbs com tamanho de fonte abaixo do mínimo recomendado (13,3 pixels):</p> <img src="https://github.com/user-attachments/assets/bd6d0a2a-e15e-4218-bdd4-79ddc9b04f60" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tamanho do texto dos breadcrumbs está abaixo do recomendado (12,8 pixels)</em></p> <hr> <p>No website da <a href="https://www.sabrosa.pt/">CM de Sabrosa</a> a data de atualização do website possui tamanho abaixo do mínimo recomendado (13,3 pixels):</p> <img src="https://github.com/user-attachments/assets/ac53f163-106f-4fdb-bbd6-c0289475bae9" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Tamanho do texto da data de atualização está abaixo do recomendado (12 pixels)</em></p> <h6>Sugestão de correção</h6> <ul> <li>Devem garantir que os conteúdos considerados como secundários apresentem um tamanho de fonte mínimo de 13,3 pixels. Recomendamos evitar utilizar esse tamanho para links ou outros tipos de conteúdo que permitam ações por parte do utilizador, como botões.</li> <li>Mensagens de erro, etiquetas são exemplos de conteúdos que não podem ser considerados como secundários. Por esse motivo, recomendamos rever as notas levantadas na issue #74 pois elas se complementam</li> </ul> <h5>Websites que não estão a cumprir (NOK)</h5> <ul> <li><a href="https://www.cm-albergaria.pt/">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/ficha-tecnica/acessibilidade/contactos-da-autarquia">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/">Município de Esposende (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/">CM de Matosinhos (NOK)</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro (NOK)</a></li> <li><a href="https://valpacos.pt/">CM de Valpaços (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/resultados_pesquisa?search_terms=tabela">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/resultados_pesquisa?search_terms=formularios">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-satao.pt/autarquia/camara-municipal/executivo-municipal#faq-6">Município de Satão (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/municipio/camara-municipal/recursos-humanos/galeria">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-braganca.pt/">CM de Bragança (NOK)</a></li> <li><a href="https://www.cmav.pt/informar/agenda-de-eventos/agenda-cultural/evento-77/arcos-a-mesa-cozido-a-moda-dos-arcos-70">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/municipio/contactos/farmacias/poi-21/farmacia-arrochela">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/">CM de Pombal (NOK)</a> </li> <li><a href="https://www.cm-montalegre.pt/pages/461">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt">CM Águeda (NOK)</a></li> <li><a href="https://www.sabrosa.pt/">CM de Sabrosa (OK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.cm-olb.pt/">CM Oliveira do Bairro (OK)</a></li> <li><a href="https://www.cm-vagos.pt">CM de Vagos (OK)</a></li> <li><a href="https://www.cm-valongo.pt/servicos/contactos-uteis">CM de Valongo (OK)</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-3.1">Requisito 3.1 - Nenhum nível de navegação tem mais de 9 opções</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/80" target="_blank" rel="noopener noreferrer">issue#80</a> <strong>O menu secundário apresenta mais de 9 opções em alguns dos seus níveis </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Nenhum nível de navegação tem mais de 9 opções.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n31">ver requisito 3.1 na lista Conteúdo</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>As <a href="https://www.nngroup.com/videos/number-items-navigation-menu/">boas práticas</a> recomendam que nenhum nível do menu deve ter mais do que 9 opções. A navegação deve ser equilibrada e não deve exigir muito esforço cognitivo por parte dos utilizadores, que normalmente retêm entre 5 a 9 opções na memória de curto prazo.</p> <p>Nos componentes especificados abaixo, existem níveis do menu secundário (incluindo menus laterais e de rodapé) que contêm mais de 9 opções, o que significa que está acima do número de opções recomendado.</p> <img src="https://github.com/user-attachments/assets/7ef11e2c-59e3-4f70-b23b-619d54824fb9" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Opção de 1º nível "Balcão Municipal", no site do Município de Arcos de Valdevez, com 10 subopções.</em></p> <img src="https://github.com/user-attachments/assets/b0ac5af9-79ca-4acc-982b-47c95824ba59" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Parte do rodapé do site do Município de Arcos de Valdevez com 13 opções.</em></p> <img src="https://github.com/user-attachments/assets/723d1e49-380c-449b-88c9-0a2f4a2f9500" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Parte do rodapé do site da Comunidade Intermunicipal da Região de Aveiro. A primeira lista não ordenada (<code><ul> <li></code>), abaixo do cabeçalho de nível 2 "Municípios", tem 11 itens. A segunda lista não ordenada (<code><ul> <li></code>), abaixo do cabeçalho de nível 2 "Atividades", também tem 11 itens.</em> </p> <img src="https://github.com/user-attachments/assets/fbe60c36-5b41-4846-afd0-9bfa4c941ff6" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Opção de 2º nível "Freguesias", com 15 subopções, no site do Município de Caminha.</p> <p><strong>Sugestão de Correção</strong><br>Deve ser feita uma revisão da arquitetura de informação do menu de forma a garantir que não ultrapasse 9 opções em cada nível do mesmo.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li><a href="https://www.cmav.pt/">Opção de 1º nível “Balcão Municipal”, com 10 subopções, no site do Município de Arcos de Valdevez</a></li> <li><a href="https://www.cmav.pt/">Rodapé do site do Município de Arcos de Valdevez</a></li> <li><a href="https://www.regiaodeaveiro.pt/">Rodapé do site da Comunidade Intermunicipal da Região de Aveiro</a></li> <li><a href="https://www.cm-caminha.pt/viver/freguesias">Opção de 2º nível "Freguesias", com 15 subopções, no site do Município de Caminha</a></li> <li><a href="https://www.cm-caminha.pt/viver/servicos-municipais/galeria">Opção de 3º nível "Coesão Social", com 11 subopções, no site do Município de Caminha.</a></li> <li><a href="https://www.cm-pombal.pt/informar/territorio/ambiente">Opção de 3º nível "Ambiente", com 10 subopções, no site do Município de Pombal.</a></li> <li><a href="https://www.cm-vagos.pt/visitar/pontos-de-interesse">Opção de 2º nível "Pontos de Interesse", com 10 subopções, no site do Município de Vagos.</a></li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a></li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-3.2">Requisito 3.2 - A navegação principal está sempre visível e sempre no mesmo local</h4> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 2 melhorias que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/82" target="_blank" rel="noopener noreferrer">issue#82</a> <strong>Estrutura do menu lateral não é percetível </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.2</span></div> <div class="issue-content"><blockquote> <p>A navegação principal está sempre visível e sempre no mesmo local.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n32">ver requisito 3.2 na lista Conteúdo</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>Verificámos que, nos sites mencionados abaixo, foram incluídos menus laterais nas páginas de interior. Notámos que, visualmente, estes menus não tornam evidente a estrutura hierárquica da navegação, dificultando a perceção do nível em que o utilizador se encontra e da sua localização dentro do site.</p> <img src="https://github.com/user-attachments/assets/936f1ce4-8d2b-4b7e-9064-1665a0d91d1c" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Menu lateral do site do Município de Bragança na página de interior <a href="https://www.cm-braganca.pt/municipio/camara-municipal/regimento-das-reunioes-da-camara-municipal">Regimento das Reuniões da Câmara Municipal</a>.</p> <img src="https://github.com/user-attachments/assets/44e53437-baef-4a44-9041-d16ef71543cd" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Menu lateral do site do Município de Guimarães na página de interior <a href="https://www.cm-guimaraes.pt/municipio/camara-municipal/executivo-municipal">Executivo Municipal</a>.</p> <img src="https://github.com/user-attachments/assets/f3e0762f-a3db-47ce-90ac-bc6e59885545" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Menu lateral do site do Município de Arcos de Valdevez na página de interior <a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/licenciamentos-e-comunicacoes">Licenciamentos e Comunicações</a>.</p> <p><strong>Sugestão de Correção</strong><br>Deve ser feita uma revisão da estrutura do menu de forma a tornar a hierarquia mais clara, melhorar a identificação do nível de navegação e garantir que o utilizador compreende facilmente onde está e para onde pode ir a seguir.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li>Menu lateral das páginas de interior do site do Município de Bragança</li> <li>Menu lateral das páginas de interior do site do Município de Guimarães</li> <li>Menu lateral das páginas de interior do site do Município de Esposende</li> <li>Menu lateral das páginas de interior do site do Município de Arcos de Valdevez</li> <li>Menu lateral das páginas de interior do site do Município de Matosinhos</li> <li>Menu lateral das páginas de interior do site do Município de Valpaços</li> <li>Menu lateral das páginas de interior do site do Município de Sabrosa</li> <li>Menu lateral das páginas de interior do site do Município de Albergaria-a-Velha</li> <li>Menu lateral das páginas de interior do site do Município de Caminha</li> <li>Menu lateral das páginas de interior do site do Município de Peniche</li> <li>Menu lateral das páginas de interior do site do Município de Peso da Régua</li> <li>Menu lateral das páginas de interior do site do Município de Pombal</li> <li>Menu lateral das páginas de interior do site do Município de Montalegre</li> <li>Menu lateral das páginas de interior do site do Município de Águeda</li> <li>Menu lateral das páginas de interior do site do Município de Ílhavo</li> <li>Menu lateral das páginas de interior do site do Município de Oliveira do Bairro</li> <li>Menu lateral das páginas de interior do site do Município de Vagos</li> <li>Menu lateral das páginas de interior do site do Município de Valongo</li> </ul> <p><strong>Websites que Necessitam de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços</a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa</a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos</a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/81" target="_blank" rel="noopener noreferrer">issue#81</a> <strong>Breadcrumbs não representam corretamente a localização do utilizador (Melhoria)</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.2</span></div> <div class="issue-content"><blockquote> <p>A navegação principal está sempre visível e sempre no mesmo local.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n32">ver requisito 3.2 na lista Conteúdo</a></p> </blockquote> <p>Descrição do Problema<br>Verificámos que, nos sites mencionados abaixo, as breadcrumbs não representam corretamente a posição do utilizador na estrutura do site nem o percurso de navegação até à página atual.</p> <img src="https://github.com/user-attachments/assets/54fb7ec4-76fe-4b4b-8c16-a6a3984f1468" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-braganca.pt/transparencia/comunicacao/normas-e-planos">Normas e Planos</a> no site do Município de Bragança. O caminho do breadcrumbs que aparece na página (Transparência > Comunicação), para estar completo, deveria ser restruturado para Página inicial > Transparência > Comunicação > Normas e Planos. Breadcrumbs destacado através de um retângulo de borda vermelha</em></p> <img src="https://github.com/user-attachments/assets/b23802ba-e86b-46ab-8009-2ec667f749d1" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.sabrosa.pt/viver/comunicacao/galeria">Aconteceu em Imagens</a> no site do Município de Sabrosa. O caminho de breadcrumbs (Viver > Comunicação) que aparece na página está incompleto. Breadcrumbs destacado através de um retângulo de borda vermelha</em></p> <img src="https://github.com/user-attachments/assets/969fdb71-cc17-440b-8f07-e9572330a3d0" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-pombal.pt/informar/territorio/ambiente">Ambiente</a> do site do Município de Pombal. O caminho de breadcrumbs (Início > Informar > Território) está incompleto. Breadcrumbs destacado através de um retângulo de borda vermelha.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos reformular este componente para que apresente, de forma precisa, a página onde o utilizador se encontra e o trajeto desde a página inicial.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li>Breadcrumbs do site do Município de Bragança</li> <li>Breadcrumbs do site do Município de Sabrosa</li> <li>Breadcrumbs do site do Município de Pombal</li> <li>Breadcrumbs do site do Município de Montalegre</li> <li>Breadcrumbs do site do Município de Águeda</li> <li>Breadcrumbs do site do Município de Sátão</li> <li>Breadcrumbs do site do Município de Ílhavo</li> <li>Breadcrumbs do site do Município de Valongo</li> </ul> <p><strong>Websites que Necessitam de Correções (Melhoria)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-3.3">Requisito 3.3 - As hiperligações de texto não devem ser diferenciadas apenas com base na cor</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/85" target="_blank" rel="noopener noreferrer">issue#85</a> <strong>As hiperligações não são consistentes ao longo do website</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.3</span></div> <div class="issue-content"><blockquote> <p>As hiperligações de texto não devem ser diferenciadas apenas com base na cor.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n33">ver requisito 3.3 na lista Conteúdo</a></p> </blockquote> <p><strong>Descrição do Problema</strong></p> <p>As hiperligações devem ter uma representação visual diferente do texto envolvente e garantir consistência desse mesmo visual ao longo das páginas do website entre os diferentes browsers.</p> <p>Nas páginas mencionadas abaixo, as hiperligações não mantêm consistência visual. Exemplos de como as hiperligações podem diferir entre si:<br>• As hiperligações têm forma diferente: sublinhado vs sem sublinhado<br>• As hiperligações têm cor diferente<br>• As hiperligações não apresentam todas o sublinhado por defeito, sendo necessário passar o rato por cima de algumas.</p> <img src="https://github.com/user-attachments/assets/2ec95f33-beb3-4795-9a34-9fc98f78efb7" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://www.cmav.pt/contactos">Contactos</a> do site do Município de Arcos de Valdevez. As hiperligações estão num azul-acinzentado (#4D716B), a negrito e sem sublinhado.</p> <img src="https://github.com/user-attachments/assets/02e38a66-4093-4239-aa13-088b180d31c4" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://www.cmav.pt/declaracao-de-acessibilidade-e-usabilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Arcos de Valdevez. As hiperligações têm a mesma cor que as hiperligações da página <a href="https://www.cmav.pt/contactos">Contactos</a> mas não estão a negrito e estão sublinhadas.</p> <p><strong>Sugestão de Correção</strong><br>Recomendamos que seja garantida consistência da cor e forma entre todas as hiperligações ao longo do website e entre os diferentes browsers.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li>Páginas <a href="https://www.cmav.pt/contactos">Contactos</a> e <a href="https://www.cmav.pt/declaracao-de-acessibilidade-e-usabilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Arcos de Valdevez.</li> <li>Páginas <a href="https://www.cm-matosinhos.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade">Declaração de Acessibilidade e Usabilidade</a>, <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">Sugestões/ Reclamações/ Elogios</a> e <a href="https://www.cm-matosinhos.pt/contactos/camara-municipal">Câmara Municipal</a> do site do Município de Matosinhos.</li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/84" target="_blank" rel="noopener noreferrer">issue#84</a> <strong>As hiperligações não se diferenciam do texto envolvente</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>As hiperligações de texto não devem ser diferenciadas apenas com base na cor.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n33">ver requisito 3.3 na lista Conteúdo</a></p> </blockquote> <p><strong>Descrição do Problema</strong></p> <p>As hiperligações devem ter uma representação visual diferente do texto envolvente. Para além da cor, deve ser utilizado outro elemento diferenciador com base na forma, como por exemplo, sublinhado, negrito, com um ícone, fundo ou delineado, para que seja percecionada como clicável, nomeadamente por pessoas com daltonismo.</p> <p>Verificámos que, nas páginas mencionadas abaixo, as hiperligações não têm diferenciação suficiente do texto envolvente.</p> <img src="https://github.com/user-attachments/assets/807cac79-e045-4014-88b1-ae361d20d086" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://www.regiaodeaveiro.pt/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade </a>do site da Comunidade Intermunicipal da Região de Aveiro. As hiperligações têm uma cor muito semelhante e não estão sublinhadas, o que dificulta a sua identificação como links.</p> <img src="https://github.com/user-attachments/assets/a2c2e332-8ee2-4264-a525-0a38b67bb160" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://www.regiaodeaveiro.pt/politica-de-privacidade-e-seguranca">Política de Privacidade e Segurança</a>, onde o texto com hiperligações ("<a href="https://www.facebook.com/privacy/policy/">https://www.facebook.com/privacy/policy/</a>", "<a href="https://x.com/en/privacy">https://x.com/en/privacy</a>" ou "<a href="mailto:geral@regiaodeaveiro.pt">geral@regiaodeaveiro.pt</a>") dentro da página não se diferencia do texto envolvente.</p> <img src="https://github.com/user-attachments/assets/a94ebf56-9de5-415c-8248-518d7a664562" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://valpacos.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Valpaços. As hiperligações só se destacam do texto envolvente através da cor.</p> <img src="https://github.com/user-attachments/assets/1e57f111-0ad6-49b3-8514-55cf16f13997" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Figura - Página <a href="https://www.cm-albergaria.pt/acessibilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Albergaria-a-Velha. As hiperligações só se destacam do texto envolvente através da cor.</p> <p><strong>Sugestão de Correção</strong></p> <p>Recomendamos diferenciar as hiperligações do texto envolvente com base na cor e na forma (idealmente, colocar sublinhado) e garantir que o sublinhado aparece por defeito e não apenas quando se passa o rato por cima da hiperligação.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li>Páginas <a href="https://www.regiaodeaveiro.pt/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade</a> e <a href="https://www.regiaodeaveiro.pt/politica-de-privacidade-e-seguranca">Política de Privacidade e Segurança</a> do site da Comunidade Intermunicipal da Região de Aveiro.</li> <li>Página <a href="https://valpacos.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Valpaços.</li> <li>Página <a href="https://www.cm-albergaria.pt/acessibilidade">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Albergaria-a-Velha.</li> <li>Página <a href="https://www.cm-caminha.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Caminha.</li> <li>Página <a href="https://www.cm-pesoregua.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Peso da Régua.</li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a></li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/83" target="_blank" rel="noopener noreferrer">issue#83</a> <strong>As hiperligações não possuem contraste ao longo do website </strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>As hiperligações de texto não devem ser diferenciadas apenas com base na cor.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n33">ver requisito 3.3 na lista Conteúdo</a></p> </blockquote> <p><strong>Descrição do Problema</strong><br>As hiperligações de texto devem apresentar um contraste mínimo de 4,5:1 com a envolvente.<br>Verificámos que, nos sites mencionados abaixo, as hiperligações não possuem contraste suficiente com o fundo.</p> <img src="https://github.com/user-attachments/assets/a0255b0b-aa80-4e6e-869e-31fe1de0f047" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-caminha.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Caminha. A cor azul-claro das hiperligações(#4BAAF8) tem um contraste com o fundo branco(#FFFFFF) da página de 2,5:1 - valor abaixo do rácio mínimo de 4,5:1 recomendado.</em></p> <img src="https://github.com/user-attachments/assets/315d425c-3767-45b4-812f-88e4ee8b91bd" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-peniche.pt/ficha-tecnica/avisos-legais/politica-de-privacidade-e-seguranca">Política de Privacidade e Segurança</a> do site do Município de Peniche. A cor azul-claro das hiperligações(#3AC0CF) tem um contraste com o fundo cinza(#F2F2F2) da página de 1,9:1 - valor abaixo do rácio mínimo de 4,5:1 recomendado.</em></p> <img src="https://github.com/user-attachments/assets/0a365053-5c64-4e9e-9c3a-ec7ec8dad8f5" alt="" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Figura - Página <a href="https://www.cm-pombal.pt/ficha-tecnica/conformidade">Conformidade</a> do site do Município de Pombal. A cor verde claro das hiperligações(#6BCABA) tem um contraste com o fundo branco(#FFFFFF) da página de 1,9:1 - valor abaixo do rácio mínimo de 4,5:1 recomendado.</em></p> <p><strong>Sugestão de Correção</strong><br>Recomendamos a revisão das cores das páginas para garantir os valores mínimos de contraste de 4,5:1.</p> <p><strong>Exemplo de Conteúdos que Necessitam de Correções</strong></p> <ul> <li>Página <a href="https://www.cm-caminha.pt/ficha-tecnica/declaracao-de-acessibilidade-e-usabilidade/">Declaração de Acessibilidade e Usabilidade</a> do site do Município de Caminha.</li> <li>Página <a href="https://www.cm-peniche.pt/ficha-tecnica/avisos-legais/politica-de-privacidade-e-seguranca">Política de Privacidade e Segurança</a> do site do Município de Peniche.</li> <li>Página <a href="https://www.cm-pombal.pt/ficha-tecnica/conformidade">Conformidade</a> do site do Município de Pombal.</li> </ul> <p><strong>Websites que Necessitam de Correções (NOK)</strong></p> <ul> <li><a href="https://www.cm-caminha.pt/">Câmara Municipal de Caminha </a> </li> <li><a href="https://www.cm-peniche.pt/">Câmara Municipal de Peniche </a> </li> <li><a href="https://www.cm-pombal.pt/">Câmara Municipal de Pombal </a> </li> <li><a href="https://www.cm-montalegre.pt/">Câmara Municipal de Montalegre </a> </li> <li><a href="https://www.cm-satao.pt/">Câmara Municipal de Sátão </a> </li> <li><a href="https://www.cm-vagos.pt/">Câmara Municipal de Vagos </a></li> </ul> <p><strong>Websites que Estão a Cumprir (OK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/">Câmara Municipal de Bragança</a> </li> <li><a href="https://www.cm-guimaraes.pt/">Câmara Municipal de Guimarães</a></li> <li><a href="https://www.municipio.esposende.pt/">Câmara Municipal de Esposende</a> </li> <li><a href="https://www.cmav.pt/">Câmara Municipal de Arcos de Valdevez </a> </li> <li><a href="https://www.cm-matosinhos.pt/">Câmara Municipal de Matosinhos </a> </li> <li><a href="https://www.regiaodeaveiro.pt/">Comunidade Intermunicipal da Região de Aveiro</a> </li> <li><a href="https://valpacos.pt/">Câmara Municipal de Valpaços </a> </li> <li><a href="https://www.sabrosa.pt/">Câmara Municipal de Sabrosa </a> </li> <li><a href="https://www.cm-albergaria.pt/">Câmara Municipal de Albergaria-a-Velha </a> </li> <li><a href="https://www.cm-pesoregua.pt/">Câmara Municipal de Peso da Régua </a> </li> <li><a href="https://www.cm-agueda.pt/">Câmara Municipal de Águeda </a> </li> <li><a href="https://www.cm-ilhavo.pt/">Câmara Municipal de Ílhavo </a> </li> <li><a href="https://www.cm-olb.pt/">Câmara Municipal de Oliveira do Bairro </a> </li> <li><a href="https://www.cm-valongo.pt/">Câmara Municipal de Valongo</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-4.1">Requisito 4.1 - Os documentos longos têm um índice no topo com hiperligações internas para o mesmo</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/99" target="_blank" rel="noopener noreferrer">issue#99</a> <strong>Documentos longos sem índice</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 4.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Os documentos longos têm um índice no topo com hiperligações internas para o mesmo.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n41">ver requisito 4.1 na lista Conteúdo</a></p> </blockquote> <p><strong>Notas Gerais</strong></p> <ul> <li>Para facilitar a navegação em páginas longas, com várias secções de conteúdos, deve existir um índice no topo da página. Esse índice deve conter hiperligações para as várias seções que existem.</li> </ul> <h5><strong>Guimarães (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-guimaraes.pt/municipio/patrimonio-mundial">https://www.cm-guimaraes.pt/municipio/patrimonio-mundial</a></li> <li>(2) NOK <a href="https://www.cm-guimaraes.pt/areas-de-intervencao/protecao-e-seguranca/galeria">https://www.cm-guimaraes.pt/areas-de-intervencao/protecao-e-seguranca/galeria</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) não existe um índice no topo de uma página longa com hiperligações para cada secção interna dessa página.</li> <li>Na evidência (2) a página com conteúdo longo possui acordeões que substituem o índice. O uso de acordeões como substituição de um índice é uma solução válida, mas é importante ter em consideração alguns aspetos essenciais para garantir a acessibilidade. A estrutura do acordeão deve ser construída de forma adequada, assegurando que funcione sem problemas para todos os utilizadores, incluindo aqueles que utilizam tecnologias de apoio. Os acordeões presentes na página devem ser corrigido pois não estão estruturados corretamente e seu conteúdo está inacessível. Ver notas do <a href="https://github.com/unidade-acesso/report_012/issues/30">Requisito 8.3 - 10 Aspetos</a></li> </ul> <img src="https://github.com/user-attachments/assets/5c751327-4653-474a-b410-d3b494dd5d3c" alt="Erro no acordeão com NVDA, página Proteção e Segurança" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendações</strong></p> <p>Recomendamos rever os acordeões do website para garantir que sejam estruturados corretamente. Para isso, recomendamos consultarem as notas partilhadas no critério 8.3 da checklist dos 10 aspectos.</p> <h5><strong>Valpaços (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://valpacos.pt/eu-sou-municipe/servico-municipal-de-protecao-civil">https://valpacos.pt/eu-sou-municipe/servico-municipal-de-protecao-civil</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) a página “Serviço Municipal de Proteção Civil” com conteúdo longo possui acordeões que substituem o índice. O uso de acordeões como substituição de um índice é uma solução válida, mas é importante ter em consideração alguns aspetos essenciais para garantir a acessibilidade. Os acordeões presentes na página devem ser corrigidos pois não estão estruturados corretamente, sendo assim o leitores de ecrã não identificam se o componente está expandido ou recolhido. Sendo assim, os utilizadores podem saltar informações úteis e não perceber o conteúdo que está ali.</li> </ul> <img src="https://github.com/user-attachments/assets/028992b6-8930-4307-b37e-bd8b44aae52b" alt="Erro no acordeão com NVDA, página Serviço Municipal de Proteção Civil" 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/contactos/camara-municipal-de-arcos-de-valdevez">https://www.cmav.pt/contactos/camara-municipal-de-arcos-de-valdevez</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>A evidência (1) demonstra que a página de “Contactos” apresenta-se como uma página longa, mas não disponibiliza um índice no topo com hiperligações internas para cada categoria de contactos.</li> </ul> <img src="https://github.com/user-attachments/assets/abbaea3c-0c9d-4bb2-a9ab-d4ce7d0f6f04" alt="Página longa de contactos" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p>Sem um índice inicial os utilizadores especialmente aqueles que recorrem a tecnologias de apoio, podem perder a referência da sua localização na página, prejudicando a compreensão e a eficiência na navegação.</p> <p><strong>Recomendações</strong><br>Para facilitar a navegação, recomendamos adicionar um índice no início da página com hiperligações para cada secção interna.</p> <p>O mesmo acontece nos seguintes websites:</p> <h5><strong>Websites (NOK)</strong></h5> <p>Evidências:</p> <p><strong>CM Bragança (NOK)</strong></p> <ul> <li><a href="https://www.cm-braganca.pt/servicos/intervencao-social/habitacao-social/legislacao">https://www.cm-braganca.pt/servicos/intervencao-social/habitacao-social/legislacao</a></li> <li><a href="https://www.cm-braganca.pt/servicos/intervencao-social/comissao-de-proteccao-de-criancas-e-jovens/caraterizacao">https://www.cm-braganca.pt/servicos/intervencao-social/comissao-de-proteccao-de-criancas-e-jovens/caraterizacao</a></li> </ul> <p><strong>CM Esposende (NOK)</strong></p> <ul> <li><a href="https://www.municipio.esposende.pt/viver/acao-cultural/noticias/noticia/concertos-marcam-programacao-de-natal-em-esposende">https://www.municipio.esposende.pt/viver/acao-cultural/noticias/noticia/concertos-marcam-programacao-de-natal-em-esposende</a></li> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/pedidos/economia-e-cidadania/atividades-economicas/eventos-e-entretenimento/recintos-itinerantes-e-improvisados">https://www.municipio.esposende.pt/balcao-virtual/pedidos/economia-e-cidadania/atividades-economicas/eventos-e-entretenimento/recintos-itinerantes-e-improvisados</a></li> </ul> <p><strong>CM Oliveira do Bairro (NOK)</strong></p> <ul> <li><a href="https://www.cm-olb.pt/viver/acao-social-idade-maior-e-migrantes/acao-social/rede-social">https://www.cm-olb.pt/viver/acao-social-idade-maior-e-migrantes/acao-social/rede-social</a></li> </ul> <p><strong>CM Vagos (NOK)</strong></p> <ul> <li><a href="https://www.cm-vagos.pt/servicos/gabinete-de-apoio-ao-emigrante-gae">https://www.cm-vagos.pt/servicos/gabinete-de-apoio-ao-emigrante-gae</a></li> <li><a href="https://www.cm-vagos.pt/municipio/transparencia-municipal">https://www.cm-vagos.pt/municipio/transparencia-municipal</a></li> </ul> <p><strong>CM Águeda (NOK)</strong> </p> <ul> <li><a href="https://www.cm-agueda.pt/municipio/contactos-88">https://www.cm-agueda.pt/municipio/contactos-88</a></li> <li><a href="https://www.cm-agueda.pt/municipio/camara-municipal/executivo-municipal/grau-de-cumprimento-dos-compromissos-eleitorais">https://www.cm-agueda.pt/municipio/camara-municipal/executivo-municipal/grau-de-cumprimento-dos-compromissos-eleitorais</a></li> </ul> <p><strong>CM Montalegre (NOK)</strong></p> <ul> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/area-social/cpcj-montalegre">https://www.cm-montalegre.pt/areas-de-intervencao/area-social/cpcj-montalegre</a></li> <li><a href="https://www.cm-montalegre.pt/areas-de-intervencao/area-social/acao-social/rede-social-conselho-local-de-acao-social">https://www.cm-montalegre.pt/areas-de-intervencao/area-social/acao-social/rede-social-conselho-local-de-acao-social</a></li> </ul> <p><strong>CM Região Aveiro (NOK)</strong></p> <ul> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/desenvolvimento-regional-e-economia/desenvolvimento-regional/grupo-de-acao-costeira-2021-2027">https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/desenvolvimento-regional-e-economia/desenvolvimento-regional/grupo-de-acao-costeira-2021-2027</a></li> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/desenvolvimento-regional-e-economia/desenvolvimento-regional/programa-estrategico-intermunicipal-da-regiao-de-aveiro-nova">https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos/desenvolvimento-regional-e-economia/desenvolvimento-regional/programa-estrategico-intermunicipal-da-regiao-de-aveiro-nova</a></li> </ul> <p><strong>CM Peso da Régua (NOK)</strong></p> <ul> <li><a href="https://www.cm-pesoregua.pt/municipio/protecao-civil/gabinete-florestal/informacoes">https://www.cm-pesoregua.pt/municipio/protecao-civil/gabinete-florestal/informacoes</a></li> <li><a href="https://www.cm-pesoregua.pt/municipio/protecao-civil/gabinete-florestal/conselhos">https://www.cm-pesoregua.pt/municipio/protecao-civil/gabinete-florestal/conselhos</a></li> </ul> <p><strong>CM Peniche (NOK)</strong></p> <ul> <li><a href="https://www.cm-peniche.pt/viver/desenvolvimento-social/habitacao-social/galeria">https://www.cm-peniche.pt/viver/desenvolvimento-social/habitacao-social/galeria</a></li> <li><a href="https://www.cm-peniche.pt/viver/desenvolvimento-social/igualdade-de-genero">https://www.cm-peniche.pt/viver/desenvolvimento-social/igualdade-de-genero</a></li> </ul> <p><strong>CM Caminha (NOK)</strong></p> <ul> <li><a href="https://www.cm-caminha.pt/viver/servicos-municipais/protecao-civil-e-florestas/florestas/galeria">https://www.cm-caminha.pt/viver/servicos-municipais/protecao-civil-e-florestas/florestas/galeria</a></li> <li><a href="https://www.cm-caminha.pt/viver/acesso-informacao-administrativa">https://www.cm-caminha.pt/viver/acesso-informacao-administrativa</a></li> </ul> <p><strong>CM Satão (NOK)</strong></p> <ul> <li><a href="https://www.cm-satao.pt/areas-de-atividade/ambiente/gtf">https://www.cm-satao.pt/areas-de-atividade/ambiente/gtf</a></li> <li><a href="https://www.cm-satao.pt/areas-de-atividade/outras-areas-de-atividade/emprego/gabinete-apoio-insercao">https://www.cm-satao.pt/areas-de-atividade/outras-areas-de-atividade/emprego/gabinete-apoio-insercao</a></li> </ul> <p><strong>CM Ílhavo (NOK)</strong></p> <ul> <li><a href="https://www.cm-ilhavo.pt/viver/areas-de-intervencao/ambiente/ecocentro-municipal">https://www.cm-ilhavo.pt/viver/areas-de-intervencao/ambiente/ecocentro-municipal</a></li> <li><a href="https://www.cm-ilhavo.pt/viver/areas-de-intervencao/cultura/associacoes-culturais">https://www.cm-ilhavo.pt/viver/areas-de-intervencao/cultura/associacoes-culturais</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>As evidências revelam que as páginas longas não disponibilizam um índice no topo das páginas com hiperligações internas para cada secção interna das páginas.</li> </ul> <p><strong>Recomendações</strong><br>Adicionar um índice com hiperligações para cada secção interna.</p> <hr> <h5><strong>Websites (OK)</strong></h5> <ul> <li><strong>CM Matosinhos (OK)</strong> <a href="https://www.cm-matosinhos.pt/servicos/policia-municipal">https://www.cm-matosinhos.pt/servicos/policia-municipal</a></li> <li>CM Sabrosa (OK) Site em manutenção verificar um pouco mais- <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>CM Pombal (OK) <a href="https://www.cm-pombal.pt/informar/territorio/ambiente/agua">https://www.cm-pombal.pt/informar/territorio/ambiente/agua</a></li> <li>CM Valongo (OK) <a href="https://www.cm-valongo.pt/municipio/estrutura-organica/departamento-de-logistica-higiene-urbana-e-manutencao-dlhum">https://www.cm-valongo.pt/municipio/estrutura-organica/departamento-de-logistica-higiene-urbana-e-manutencao-dlhum</a></li> </ul> <hr> <h5><strong>Albergaria (<strong>Site em manutenção</strong>)</strong></h5> <p>Evidências:</p> <ul> <li><a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Website está indisponível.</li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-4.2">Requisito 4.2 - O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/100" target="_blank" rel="noopener noreferrer">issue#100</a> <strong>O layout do sítio Web é adaptável a plataforma móveis</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 4.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n42">ver requisito 4.2 na lista Conteúdo</a></p> </blockquote> <h5>Notas gerais</h5> <ul> <li>O layout do site deve ter comportamento <em>responsive</em>, 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.</li> </ul> <h5><strong>Guimarães (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-guimaraes.pt/municipio-24">https://www.cm-guimaraes.pt/municipio-24</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/b5e97797-a856-4529-a700-e4ccdae23e96" alt="Página município de Guimarães com erro de responsividade" 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>Garantir que todo o layout do site, especificamente seus textos, e verificar se possuem comportamento <em>responsive</em> e adaptam-se às diferentes resoluções de ecrã, sem necessidade de fazer varrimento horizontal para realizar a leitura dos conteúdos. </p> <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>Problema de responsividade no texto do propósito, não se adapta às diferentes resoluções, por exemplo para versão mobile, o logotipo sobrepõe o texto. Ver notas do (<a href="https://github.com/unidade-acesso/report_012/issues/68">https://github.com/unidade-acesso/report_012/issues/68</a>)</li> </ul> <img src="https://github.com/user-attachments/assets/2d9659be-59b8-4114-bba4-c7eb564a8e06" alt="Erro de responsividade no website Esposende" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Arcos Valdevez (Melhoria)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://www.cmav.pt/">https://www.cmav.pt/</a></li> <li>(2) Melhoria. <a href="https://www.cmav.pt/p/investir">https://www.cmav.pt/p/investir</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/dcd88bc9-70a6-45b2-82f3-1aca0eecb491" alt="Erro de responsividade no website Arcos Valdevez" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d5f70431-d772-44e9-b34e-5e984290819e" alt="Imagens das redes sociais distorcidas" 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/sou-visitante">https://valpacos.pt/sou-visitante</a></li> <li>(2) NOK <a href="https://valpacos.pt/eu-sou-municipe">https://valpacos.pt/eu-sou-municipe</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/e2dbf7ff-3bf2-4ff4-8b3b-a0ba173b4e48" alt="Erro de responsividade no website Valpaços" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Albergaria (Melhoria)</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), referente à página inicial, observa‑se que embora a versão mobile seja tecnicamente <em>responsiva</em>, 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.</li> </ul> <img src="https://github.com/user-attachments/assets/be403203-3ebc-4942-8d78-02c1a42b8ee6" alt="Erro de responsividade no website Albergaria" 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> <li>(2) NOK <a href="https://www.cm-caminha.pt/participar/projetos-de-participacao">https://www.cm-caminha.pt/participar/projetos-de-participacao</a></li> <li>(3) NOK <a href="https://www.cm-caminha.pt/investir/desenvolvimento-rural">https://www.cm-caminha.pt/investir/desenvolvimento-rural</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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”.</li> </ul> <img src="https://github.com/user-attachments/assets/413f9c40-9a3e-4af9-b782-50becebba42d" alt="Erro de responsividade na página inicial do website Caminha" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/cb7842c5-0b26-489d-bf46-b7bb03288e93" alt="Erro de responsividade no website Caminha" 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> <li>(2) NOK <a href="https://www.cm-pesoregua.pt/municipio">https://www.cm-pesoregua.pt/municipio</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/a23fe1c3-b348-4f4f-8cd1-ca6e8c4d0df4" alt="Erro de responsividade no menu do website Peso da Régua" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <img src="https://github.com/user-attachments/assets/b2cf12a5-a68d-43b9-ba71-dcf675d79beb" 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) os botões “Selecionar idioma” e “Área Munícipe” se sobrepõem, demonstrando problemas de responsividade*,* impossibilitando o acesso a as opções.</li> </ul> <img src="https://github.com/user-attachments/assets/bce3cb8a-293b-46fb-b1cb-626894fd38a6" alt="Erro de responsividade no website Peso da Régua" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendações</strong></p> <p>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.</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>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/2f633810-8fab-4804-8429-6a063d9d74c2" alt="Erro de responsividade no website Pombal" 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> <li>(2) NOK <a href="https://www.cm-satao.pt/autarquia">https://www.cm-satao.pt/autarquia</a></li> <li>(3) NOK <a href="https://www.cm-satao.pt/areas-de-atividade">https://www.cm-satao.pt/areas-de-atividade</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/93b353c1-fbc7-487f-9326-21fbf1144992" alt="Erro de responsividade no website Satão" 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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/14fb554b-29b9-4b48-9bca-274e516f43c5" alt="Erro de responsividade no website Oliveira do Bairro" 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> <li>(2) NOK. <a href="http://cm-vagos.pt/servicos">http://cm-vagos.pt/servicos</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) referente à página inicial, observa‑se que embora a versão mobile seja tecnicamente <em>responsiva</em>, 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.</li> </ul> <img src="https://github.com/user-attachments/assets/431a4fd6-9795-4511-b98b-14df72aeef99" alt="Erro de responsividade da página inicial do Município de Vagos" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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”</li> </ul> <img src="https://github.com/user-attachments/assets/0b01446c-10b0-48d2-a85b-473ce1ef7c19" alt="Erro de responsividade Município de Vagos" 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) 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ã.</li> </ul> <img src="https://github.com/user-attachments/assets/948b6ac8-31a9-4304-bff4-2eae9e87fea8" alt="Erro de responsividade na área reservada" 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> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/1c0f2418-ebd6-432a-b71f-2aaf09383b37" alt="Erro de responsividade na página inicial do website de Valongo" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Websites (OK)</strong></h5> <p>Evidências:</p> <ul> <li>CM Bragança OK <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Matosinhos OK <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> <li>CM Aveiro OK. <a href="https://www.regiaodeaveiro.pt/">https://www.regiaodeaveiro.pt/</a></li> <li>CM Sabrosa OK <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li>CM Peniche OK <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li>CM Montalegre OK <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>CM Águeda OK <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li>CM Ílhavo OK <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>passa, sem problemas de responsividade.</li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-5.1">Requisito 5.1 - Não existem elementos interativos acionados apenas com a passagem do rato (hover)</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/101" target="_blank" rel="noopener noreferrer">issue#101</a> <strong>Existem elementos interativos acionados apenas com a passagem do rato (hover)</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 5.1</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Não existem elementos interativos acionados apenas com a passagem do rato.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n51">ver requisito 5.1 na lista Conteúdo</a></p> </blockquote> <p><strong>Notas gerais</strong></p> <ul> <li>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.</li> </ul> <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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/09b4a0e3-e30d-4f74-b545-82bf17cb8665" alt="Botões do carrossel ativos apenas com hover" 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> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/2cfc348c-450a-45fd-bbb7-5285bbd29cb9" alt="Opção Balcão Municipal ativa apenas com hover" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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>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 <em>hover</em> não é perceptível para dispositivos móveis. (Ver notas do <strong><a href="https://github.com/unidade-acesso/report_012/issues/61">Requisito 5.2 - 10 Aspetos</a>)</strong></li> </ul> <img src="https://github.com/user-attachments/assets/c8209f58-c2ad-46f0-bb4d-6e2126a607ae" alt="Mapa interativo com interação apenas com hover" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Valpaços <strong>(NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK.  <a href="https://valpacos.pt/eu-sou-municipe">https://valpacos.pt/eu-sou-municipe</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/1ae855d3-add0-4f0f-bc0b-b98f635bef9e" alt="Chatbot ativo apenas com hover" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Recomendação</strong></h5> <p>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 <strong><a href="https://github.com/unidade-acesso/report_012/issues/29">Requisito 8.3 - 10 Aspetos)</a></strong></p> <p><strong>O mesmo acontece para os seguintes websites:</strong></p> <ul> <li>CM Matosinhos <strong>(NOK)</strong> <a href="https://www.cm-matosinhos.pt/municipio">https://www.cm-matosinhos.pt/municipio</a></li> <li>CM Guimarães <strong>(NOK)</strong> <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>CM Bragança <strong>(NOK)</strong> <a href="https://www.cm-braganca.pt/cm-braganca">https://www.cm-braganca.pt/cm-braganca</a></li> <li>CM Pombal <strong>(NOK)</strong> <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>CM Montalegre <strong>(NOK)</strong> <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>CM Satão <strong>(NOK)</strong> <a href="https://www.cm-satao.pt/">https://www.cm-satao.pt/</a></li> <li>CM Oliveira do Bairro <strong>(NOK)</strong> <a href="https://www.cm-olb.pt/">https://www.cm-olb.pt/</a></li> <li>CM Valongo <strong>(NOK)</strong> <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> <hr> <p><strong>Websites (OK)</strong></p> <ul> <li><strong>CM Bragança (OK)</strong> <a href="https://www.cm-braganca.pt">https://www.cm-braganca.pt</a></li> <li><strong>CM Sabrosa (OK)</strong> <a href="https://www.sabrosa.pt/">https://www.sabrosa.pt/</a></li> <li><strong>CM Caminha (OK)</strong> <a href="https://www.cm-caminha.pt/">https://www.cm-caminha.pt/</a></li> <li><strong>CM Peniche (OK)</strong> <a href="https://www.cm-peniche.pt/">https://www.cm-peniche.pt/</a></li> <li><strong>CM Peso da Régua (OK)</strong> <a href="https://www.cm-pesoregua.pt/">https://www.cm-pesoregua.pt/</a></li> <li><strong>CM Águeda (OK)</strong> <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> <li><strong>CM Ílhavo (OK)</strong> <a href="https://www.cm-ilhavo.pt/">https://www.cm-ilhavo.pt/</a></li> <li><strong>CM Vagos (OK)</strong> <a href="https://www.cm-vagos.pt/">https://www.cm-vagos.pt/</a></li> </ul> <hr> <h5><strong>Albergaria (<strong>Site em manutenção</strong>)</strong></h5> <p>Evidências:</p> <ul> <li><a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Website está indisponível.</li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-5.2">Requisito 5.2 - Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos) (vertical e horizontal)</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/102" target="_blank" rel="noopener noreferrer">issue#102</a> <strong>Os elementos interativos têm uma dimensão mínima de 44px</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 5.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos), vertical e horizontal.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n52">ver requisito 5.2 na lista Conteúdo</a></p> </blockquote> <p><strong>Notas Gerais</strong></p> <ul> <li>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.</li> </ul> <h5><strong>Bragança (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/servicos/intervencao-social/comissao-de-proteccao-de-criancas-e-jovens/caraterizacao">https://www.cm-braganca.pt/servicos/intervencao-social/comissao-de-proteccao-de-criancas-e-jovens/caraterizacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/1447c644-dd87-41c5-b185-ceb928be8f4b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Guimarães (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos">https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos</a></li> <li>(2) NOK <a href="https://diretorio.cm-guimaraes.pt/todos-os-servicos-de-a-a-z">https://diretorio.cm-guimaraes.pt/todos-os-servicos-de-a-a-z</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/c5faeae2-3780-4b61-8e00-63cf27410958" 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> <li>(2) NOK. <a href="https://www.municipio.esposende.pt/balcao-virtual/espaco-do-cidadao">https://www.municipio.esposende.pt/balcao-virtual/espaco-do-cidadao</a></li> <li>(3) NOK <a href="https://www.municipio.esposende.pt/pages/173">https://www.municipio.esposende.pt/pages/173</a></li> <li>(4) NOK <a href="https://www.municipio.esposende.pt/balcao-virtual/operacoes-urbanisticas-85">https://www.municipio.esposende.pt/balcao-virtual/operacoes-urbanisticas-85</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/a2fa65d3-4b94-44bb-8001-58d7b5cac278" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <img src="https://github.com/user-attachments/assets/c5cba20f-7783-4c05-84c1-66ba8aa770dd" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>As evidências (3 e 4) revelam elementos interativos sobrepostos e menores que 44px.</li> </ul> <img src="https://github.com/user-attachments/assets/05831166-5281-4dc6-a219-b3a33c6ed8f4" 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/investir">https://www.cmav.pt/p/investir</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/411f20e7-d409-49c5-bbe5-b34bb7ba32a0" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/cb6865c0-ba1d-46b1-b208-0ae15ac116da" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/40d099af-d338-4d95-a081-e0da44ab715f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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</li> </ul> <img src="https://github.com/user-attachments/assets/f30ea3be-cab1-4f11-9b67-e9a43bfae9cc" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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) revela que o botão do carrossel com 42x42px, não cumpre a dimensão mínima recomendada.</li> </ul> <img src="https://github.com/user-attachments/assets/5d013aa4-d492-4373-a65b-da1ede0ae83d" 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> <li>(2) NOK <a href="https://valpacos.pt/eu-sou-municipe">https://valpacos.pt/eu-sou-municipe</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/22f133bc-d29c-45e9-8eed-74ba244a0d6e" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/b703abe8-08f8-4f87-bf70-40d45c0bcb35" 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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d44d2cf7-9626-445d-a6c0-1f5d3b6065ee" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h2><strong>Albergaria (NOK)</strong></h2> <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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/47059d25-fa8f-4483-a4b6-488e7a3a2eb9" alt="Captura página inicial Albergaria" 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> <li>(2) NOK <a href="https://www.cm-caminha.pt/visitar">https://www.cm-caminha.pt/visitar</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/7b0ed16c-66f7-48b4-96a1-3d2adf008c47" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>a evidência (2) revela elementos interativos com área clicável inferior ao recomendado. Por exemplo, o ícone de pesquisar com tamanho (26x26px).</li> </ul> <img src="https://github.com/user-attachments/assets/ccf4809c-da7c-419d-a063-bed7164b47a2" 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/">https://www.cm-peniche.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/957eb96e-d234-4616-b735-7d7ecc0d27d9" 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> <li>(2) NOK <a href="https://www.cm-pesoregua.pt/sugestoes-reclamacoes-elogios">https://www.cm-pesoregua.pt/sugestoes-reclamacoes-elogios</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>a evidência (1) 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 “Área do Municípe”e “Contactos” que possuem altura de 30px, não cumprindo as dimensões mínimas necessárias.</li> </ul> <img src="https://github.com/user-attachments/assets/ad16d1c7-4bbf-4f0f-833c-817994ffd918" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>a evidência (1) revela na página ****“Sugestões / Reclamações / Elogios” 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 “Submeter” e “Partilhar” que possuem altura de 39.2px, não cumprindo as dimensões mínimas necessárias.</li> </ul> <img src="https://github.com/user-attachments/assets/63e8e2a0-bc44-4d7b-8fc2-e36e66ff6f90" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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> <li>(2) NOK <a href="https://www.cm-pombal.pt/municipio">https://www.cm-pombal.pt/municipio</a></li> </ul> <p><strong>Nota de auditoria:</strong></p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/43411f6f-2f9c-49cc-813a-3579ae866ce8" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/1830c090-51d0-4461-a65c-2e4dfd05ec5a" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Montalegre (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>(2) NOK <a href="https://www.cm-montalegre.pt/municipio/contactos/contactos-municipais">https://www.cm-montalegre.pt/municipio/contactos/contactos-municipais</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/5ba3f5c1-49a4-45d8-9607-cb7c93b58c8b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/ba4b086d-c092-4812-9dc1-3906d0ef701b" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/89f5097b-87a9-4002-b025-e561b232b068" 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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/1e4300e8-d3d5-46b8-80ea-517513b48353" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Ílhavo (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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/15934ba5-8e0d-4b6a-a0a1-a31154eb8e2d" 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/municipio">https://www.cm-olb.pt/municipio</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/dbf8ae2c-d1db-4be7-8759-df3a478b149c" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/f1c45546-14a8-468d-a4e7-5582151f27aa" 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 para todos websites</strong><br>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.</p> <h5><strong>Website (OK)</strong></h5> <p>Evidências:</p> <ul> <li>CM Valongo (OK). <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-5.3">Requisito 5.3 - Há apenas um botão de ação principal por página e o mesmo encontra-se destacado</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/103" target="_blank" rel="noopener noreferrer">issue#103</a> <strong>Há apenas um botão de ação principal por página e o mesmo encontra-se destacado</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 5.3</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Há apenas um botão de ação principal por página e o mesmo encontra-se destacado.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n53">ver requisito 5.3 na lista Conteúdo</a></p> </blockquote> <p><strong>Notas gerais</strong></p> <ul> <li>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.</li> </ul> <h5><strong>Bragança (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/municipio/freguesias">https://www.cm-braganca.pt/municipio/freguesias</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/581dd734-5029-47af-a563-7ae96f45c97f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Guimarães (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-guimaraes.pt/inserir-feedback-57">https://www.cm-guimaraes.pt/inserir-feedback-57</a></li> <li>(2) NOK <a href="https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos">https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d0aa6df8-bd30-488e-b2ea-f60bc8fa094c" 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>Definir apenas o botão “Enviar” como ação principal, aplicando-lhe um estilo visual distintivo e contrastante.<br>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.</p> <ul> <li>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é.</li> </ul> <img src="https://github.com/user-attachments/assets/626859b6-1fda-404c-ace6-0c29c6093935" 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> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/37fbb9c5-3161-4e3c-b909-29f20d5edf19" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Região Aveiro (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.regiaodeaveiro.pt/comunicacao">https://www.regiaodeaveiro.pt/comunicacao</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/abdfb7cd-4e81-4480-97bd-c92d43b25542" 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> </p> <p>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.</p> <h5><strong>Valpaços (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://valpacos.pt/eu-sou-municipe/galeria">https://valpacos.pt/eu-sou-municipe/galeria</a></li> <li>(2) NOK <a href="https://valpacos.pt/eu-sou-municipe/servico-municipal-de-protecao-civil">https://valpacos.pt/eu-sou-municipe/servico-municipal-de-protecao-civil</a></li> <li>(3) NOK <a href="https://valpacos.pt/perguntas-frequentes-2">https://valpacos.pt/perguntas-frequentes-2</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/ac6e6e82-52b3-41ca-abad-f91590b06bbe" alt="Figura 1, Página Espaços Verdes e Ambiente" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <img src="https://github.com/user-attachments/assets/16b277cd-e1c2-4a20-959c-a70fa41c2583" alt="Figura 2, Página do Serviço Municipal de Proteção Civil" 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>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.</p> <h5><strong>Sabrosa (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://www.sabrosa.pt/viver/comunicacao/noticias?news_list_69_all=&news_list_69_page=2">https://www.sabrosa.pt/viver/comunicacao/noticias?news_list_69_all=&news_list_69_page=2</a></li> <li>(2) NOK. <a href="https://www.sabrosa.pt/balcao-virtual">https://www.sabrosa.pt/balcao-virtual</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/785b4194-1563-4862-be87-366bfd397d5d" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/fd4791c8-d928-4f5e-8239-d6031c9fe003" 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/viver/cultura">https://www.cm-peniche.pt/viver/cultura</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/19075a05-f93c-4cbc-b676-51e191e4e11f" 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/subscricao-e-historico-de-newsletters">https://www.cm-pesoregua.pt/subscricao-e-historico-de-newsletters</a></li> <li>(2) NOK <a href="https://www.cm-pesoregua.pt/municipio/concelho/transportes-urbanos">https://www.cm-pesoregua.pt/municipio/concelho/transportes-urbanos</a></li> <li>(3) <a href="https://www.cm-pesoregua.pt/municipio/documentacao/editais">https://www.cm-pesoregua.pt/municipio/documentacao/editais</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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”</li> </ul> <img src="https://github.com/user-attachments/assets/ef531da5-cc01-46fb-aef8-e42f5379db4f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>as evidências (3) revela que a página “<strong>Editais”</strong> 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.</li> </ul> <img src="https://github.com/user-attachments/assets/fe143679-982b-499e-a439-3c6aa2121192" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Pombal (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.cm-pombal.pt/">https://www.cm-pombal.pt/</a></li> <li>(2) NOK <a href="https://www.cm-pombal.pt/comunicar-ocorrencias">https://www.cm-pombal.pt/comunicar-ocorrencias</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>A evidência (2) revela que na página “<strong>Comunicar Ocorrências</strong>” o botão de ação principal “Voltar” não têm destaque suficiente face aos restantes botões da página.</li> </ul> <img src="https://github.com/user-attachments/assets/f3b192cb-e5dd-450a-bc37-80488736d922" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Montalegre (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> <li>(2) NOK <a href="https://www.cm-montalegre.pt/opiniao">https://www.cm-montalegre.pt/opiniao</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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”.</li> </ul> <img src="https://github.com/user-attachments/assets/6679791b-b5a9-4cb4-a0d5-012857fdeae8" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/dc081b6a-8a35-45c7-99b2-52d6f7259352" 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></p> <p>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.</p> <h5><strong>Águeda (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK <a href="https://www.cm-agueda.pt/sugestoes-e-reclamacoes">https://www.cm-agueda.pt/sugestoes-e-reclamacoes</a></li> <li>(2) NOK <a href="https://www.cm-agueda.pt/participar">https://www.cm-agueda.pt/participar</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>Na evidência (1) o botão “Submeter” não encontra-se destacado, e seu estilo se assemelha aos campos de preenchimento.</li> </ul> <img src="https://github.com/user-attachments/assets/f7dc4b64-3fdd-41b7-bbe5-086961ee2aaa" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/417863a8-2362-4299-b0c2-f12fc528cfb7" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/9432e4e7-6a53-4f43-a3b7-dba221fffdb8" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Ílhavo (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-ilhavo.pt/subscricao-de-notas-informativas/">https://www.cm-ilhavo.pt/subscricao-de-notas-informativas/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.<br>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.</li> </ul> <img src="https://github.com/user-attachments/assets/b45e7ab7-24e1-4c44-8809-04c672a58cf0" 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> <li>(2) NOK <a href="https://www.cm-olb.pt/subscricao-de-newsletter">https://www.cm-olb.pt/subscricao-de-newsletter</a></li> <li>(3) OK. <a href="https://www.cm-olb.pt/pages/608">https://www.cm-olb.pt/pages/608</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d8a42d99-d5b2-4303-8fd7-cc675334f883" 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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/c055a025-451c-43d5-a031-31dfd7b4f111" 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 geral</strong><br>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). </p> <hr> <p><strong>Websites (OK)</strong></p> <ul> <li><strong>CM Matosinhos (OK)</strong> <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> <li><strong>CM Caminha (OK)</strong> <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> <li><strong>CM Vagos (OK).</strong> <a href="https://www.cm-vagos.pt/visitar/agenda">https://www.cm-vagos.pt/visitar/agenda</a></li> <li><strong>CM Esposende (OK)</strong> <a href="https://www.municipio.esposende.pt/municipio/area-do-municipe/novo-registo-de-municipe?return_to=/municipio/area-do-municipe">https://www.municipio.esposende.pt/municipio/area-do-municipe/novo-registo-de-municipe?return_to=/municipio/area-do-municipe</a></li> <li><strong>CM Valongo (OK)</strong> <a href="https://www.cm-valongo.pt/diretorio-servicos/areas-de-intervencao/intervencao-social/rede-social/banco-local-de-voluntariado/ficha-de-inscricao-de-entidades">https://www.cm-valongo.pt/diretorio-servicos/areas-de-intervencao/intervencao-social/rede-social/banco-local-de-voluntariado/ficha-de-inscricao-de-entidades</a></li> </ul> <hr> <h5><strong>Albergaria (<strong>Site em manutenção</strong>)</strong></h5> <p>Evidências:</p> <ul> <li><a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Website está indisponível.</li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-conteudo-r-5.4">Requisito 5.4 - Elementos gráficos interativos têm de aparentar ser clicáveis</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/104" target="_blank" rel="noopener noreferrer">issue#104</a> <strong>Elementos interativos devem aparentar ser clicáveis</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 5.4</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><blockquote> <p>Elementos gráficos interativos têm de aparentar ser clicáveis.<br>– <a href="https://amagovpt.github.io/kit-selo/checklists/checklist-conteudo#n54">ver requisito 5.4 na lista Conteúdo</a></p> </blockquote> <p><strong>Notas Gerais</strong></p> <ul> <li>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.</li> <li>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.</li> </ul> <h5><strong>Bragança (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/transparencia/comunicacao">https://www.cm-braganca.pt/transparencia/comunicacao</a></li> <li>(2) NOK. <a href="https://www.cm-braganca.pt">https://www.cm-braganca.pt</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/28fb0dee-e6bc-41e9-bdf0-52ef4a3fc697" alt="Captura da página Comunicação do website de Bragança" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/9a40ee4e-d8a5-4628-8da8-a2728f30e01b" alt="Captura da página inicial de Bragança" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Guimarães (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. Página de Início <a href="https://www.cm-guimaraes.pt/">https://www.cm-guimaraes.pt/</a></li> <li>(2) NOK <a href="https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos">https://diretorio.cm-guimaraes.pt/diretorio-de-servicos/directorio_de_servicos</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/08789f9c-103d-4a95-9424-92fbb2124130" alt="Captura da página inicial de Guimarães e elementos interativos com baixo contraste" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/db197d63-1cd4-4331-a76c-99dea04606b4" alt="Captura da página inicial de Guimarães" 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) revela contraste inferior ao recomendado em elementos interativos que devem aparentar ser clicáveis.</li> </ul> <img src="https://github.com/user-attachments/assets/ce71e3cf-cace-4bfb-87ad-a338cc9702ba" 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></p> <p>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.</p> <h5><strong>Esposende (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.municipio.esposende.pt/viver/ambiente-e-sustentabilidade">https://www.municipio.esposende.pt/viver/ambiente-e-sustentabilidade</a></li> <li>(2) NOK <a href="https://www.municipio.esposende.pt/municipio/presidente/mensagem-presidente">https://www.municipio.esposende.pt/municipio/presidente/mensagem-presidente</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/968d11cc-b5e3-4f25-bebf-089890734fdc" alt="Captura da página de “Ambiente e Sustentabilidade” website de Esposende" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/80d14f10-0f1c-4794-9732-e6cfec286c84" alt="Captura da página Mensagem do Presidente" 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/viver">https://www.cmav.pt/p/viver</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/ce7e8c28-5034-4054-a37f-fee796c8d26d" alt="Captura da página Inicial, Arco Valdevez" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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 <em>hover</em> 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.</li> </ul> <img src="https://github.com/user-attachments/assets/5f70121a-0d4b-4e85-97b8-86d442d4dd04" alt="Avaliação de contraste do website de Arco de Valdevez" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Matosinhos (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-matosinhos.pt/municipio">https://www.cm-matosinhos.pt/municipio</a></li> <li>(2) NOK. <a href="https://www.cm-matosinhos.pt/">https://www.cm-matosinhos.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/91cb2394-dee2-463c-8723-51d93111472c" alt="Captura da página Município" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/93165360-e4ab-4e17-8a87-936246c4ce22" alt="Captura da página de Notícias município de Matosinhos" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <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) 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.</li> </ul> <img src="https://github.com/user-attachments/assets/deb22913-9868-432f-b43c-bacd08db3417" 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/ficha-tecnica">https://valpacos.pt/ficha-tecnica</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/216ec817-6595-4eb5-a6f0-f86f2acdc2be" alt="Captura do Menu lateral da página viver site de Valpaços" 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>NOK. <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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 <a href="https://github.com/unidade-acesso/report_012/issues/25"><a href="https://github.com/unidade-acesso/report_012/issues/25">Requisito 8.2 - 10 Aspetos</a></a>)</li> </ul> <img src="https://github.com/user-attachments/assets/b8d9ea55-7b1f-4c28-9e91-9769df23a217" alt="Captura da página de Notícias município Sabrosa" 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/pages/1151">https://www.cm-caminha.pt/pages/1151</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/f5f0628d-13de-4d84-958f-2cc1b7ac5aa9" alt="Captura da Página Ficha Técnica com problemas de contraste" 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/">https://www.cm-peniche.pt/</a></li> <li>(2) NOK <a href="https://www.cm-peniche.pt/viver/recursos-humanos">https://www.cm-peniche.pt/viver/recursos-humanos</a></li> <li>(3) NOK <a href="https://www.cm-peniche.pt/viver">https://www.cm-peniche.pt/viver</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/d9dc9ef2-1aed-4bf1-b7b0-1612052c71d8" alt="Captura da secção Agenda na página inicial" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/4d00b0bc-82f2-4b25-aec8-b1a9d3aa68c4" alt="Captura da Página Recursos Humanos" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/3f837971-f1d4-4a52-aff2-71c2f584efeb" alt="Captura do Menu lateral da página Viver" 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) 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).</li> </ul> <img src="https://github.com/user-attachments/assets/74bdbe00-7593-4971-82cf-5aae20ba04c5" alt="Página inicial de Peso Régua" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Pombal (OK)</strong></h5> <p><strong>Evidências:</strong></p> <ul> <li>(1) OK. <a href="https://www.cm-pombal.pt/newsletters-65">https://www.cm-pombal.pt/newsletters-65</a></li> </ul> <p><strong>Nota de auditoria:</strong></p> <ul> <li>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 <strong>#6bcaba</strong>, 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.</li> </ul> <img src="https://github.com/user-attachments/assets/7b901ae6-136d-4914-a303-67267f5ec0a1" alt="Página Newsletter de Pombal, com problemas de contraste" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Montalegre (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-montalegre.pt/">https://www.cm-montalegre.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/dbf2cf2b-e506-4b46-a469-3f60011c2228" alt="Página inicial Montalegre, botões das redes sociais não aparentam ser clicáveis" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Águeda (NOK)</strong></h5> <p>Evidências:</p> <ul> <li>NOK <a href="https://www.cm-agueda.pt/">https://www.cm-agueda.pt/</a></li> </ul> <p>Nota de auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/de167a12-578d-4242-a705-6a4a0e5894a1" alt="Página Inicial Águeda, campo de pesquisa não aparenta ser clicável" 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> <li>(2) NOK <a href="https://www.cm-satao.pt/newsletters-65">https://www.cm-satao.pt/newsletters-65</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/4eafae92-f87a-428e-87d7-95f398a1c09f" alt="Botões da página inicial Município de Satão, com baixo contraste" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/77dbbb23-17b9-49e3-af52-79ffa1007e7d" alt="Página Newsletter Satão" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5><strong>Ílhavo (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), 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.</li> </ul> <img src="https://github.com/user-attachments/assets/4f754cde-7ce1-440c-af39-250e1a5d179b" alt="Página inicial Ílhavo" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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).</li> </ul> <img src="https://github.com/user-attachments/assets/0003ba6f-6cda-46c8-aac3-a49030ae5e46" alt="Carrossel Mais Ílhavo, e botão com baixo contraste" 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/acessibilidade">https://www.cm-olb.pt/acessibilidade</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/bb489c25-d15c-4f32-9fea-3c4e1a67cc20" 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>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.</li> </ul> <img src="https://github.com/user-attachments/assets/6772f87c-c3b4-42c0-b4ba-565eff2fb35f" 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> </ul> <p>Nota auditoria:</p> <ul> <li>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 <em>hover</em>. Essa inconsistência visual prejudica a perceção de clicabilidade e pode levar o utilizador a não reconhecer estas opções como interativas.</li> </ul> <img src="https://github.com/user-attachments/assets/a6e297f5-8b75-483a-bd67-022a5d792ed9" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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.</li> </ul> <img src="https://github.com/user-attachments/assets/0adcdb4b-496b-47ea-a3fa-edd4698b753f" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <hr> <h5><strong>Albergaria (<strong>Site em manutenção</strong>)</strong></h5> <p>Evidências:</p> <ul> <li><a href="https://www.cm-albergaria.pt/">https://www.cm-albergaria.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Website está indisponível.</li> </ul> </div> </li> </ul></div> </div> <div class="checklist-section"> <h3 id="checklist-transacao">Checklist Transação</h3> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p><strong>Nível de conformidade:</strong></p> <ul> <li><strong>Checklist Transação</strong>: 70.0% (7/10) <ul> <li>Requisitos avaliados: 12 (2 N/A excluídos, 10 aplicáveis)</li> <li>Requisitos OK: 7</li> <li>Requisitos NOK: 3</li> <li>Requisitos N/A: 2</li> </ul> </li> </ul> <h4 class="requirement-title" id="req-transacao-r-1.2">Requisito 1.2 - Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/87" target="_blank" rel="noopener noreferrer">issue#87</a> <strong>Formulários grandes com organização por páginas (passos)</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.2</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) N/A. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) N/A. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>formulários curtos.</li> </ul> <h5>Guimarães (OK)</h5> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li>(2) OK. <a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>extensão do form ainda aceitável.</li> </ul> <h5>Esposende (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <h5>Arcos Valdevez (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <h5>Região Aveiro (? não se conseguiu ver)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-1.3">Requisito 1.3 - Os formulários com mais de uma página têm a sequência de passos ilustrada</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/88" target="_blank" rel="noopener noreferrer">issue#88</a> <strong>Formulários grandes revelam mecanismo de navegação por passos</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 1.3</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) N/A. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) N/A. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>formulários curtos.</li> </ul> <h5>Guimarães (OK)</h5> <p>Evidências:</p> <ul> <li>OK. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li>OK. <a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>extensão do form aceitável.</li> </ul> <h5>Esposende (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <h5>Arcos Valdevez (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <h5>Região Aveiro (? não se conseguiu avaliar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-2.1">Requisito 2.1 - O tamanho dos campos deve refletir o tamanho previsível dos dados</h4> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 1 melhoria que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/89" target="_blank" rel="noopener noreferrer">issue#89</a> <strong>Campo reflete tamanho previsível da edição</strong></p> <div class="evidence-labels"><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.1</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) Melhoria. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) Melhoria. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>isto pode ser substancialmente melhorado. por exemplo o campo do código postal tem a mesma dimensão da morada. O campo da morada tem a mesma dimensão do telefone...</li> </ul> <h5>Guimarães (NOK)</h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li>(2) Melhoria. <a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>Pode ser melhorado.</li> </ul> <p>Exemplo na evidência 1. </p> <img src="https://github.com/user-attachments/assets/30564a25-f8c2-4643-8886-255020e60685" alt="é excessivo para o tipo de campo a inserir" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Esposende (Melhoria)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>pode ser melhorado. ex. NIF tem o mesmo tamanho previsível de Morada (!?)</li> </ul> <img src="https://github.com/user-attachments/assets/abaddf67-19f4-4743-b788-c4be0412b74f" alt="NIF e Morada previsivelmente iguais?!" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Arcos Valdevez (OK)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>a evdiência (2) não faz parte do domínio candidata a Selo. O Município deve também implementar as regras de acessibilidade nessa plataforma.</li> </ul> <h5>Região Aveiro (? não se conseguiu avaliar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (OK)</h5> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) Melhorar. <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-2.4">Requisito 2.4 - Campos obrigatórios devem ser claramente indicados como tal</h4> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 1 melhoria que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/92" target="_blank" rel="noopener noreferrer">issue#92</a> <strong>Campos obrigatórios identificados visualmente e estruturalmente</strong></p> <div class="evidence-labels"><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 2.4</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (OK) (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) OK. Melhoria. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) OK. Melhoria. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>todos os campos estão programaticamente referenciados com o estado "obrigatório" mas apenas detetável com tecnologias de apoio (ex. Leitor de ecrã). Tecnologias como Browser não conseguem percepcionar que o campo é obrigatório. Todas as tecnologias, e não apenas as tecnologias de apoio, devem saber que os campos são obrigatórios. Para isso deve-se usar o atributo required e não aria-required como está a ser usado.</li> </ul> <p>O filtro: </p> <pre><code class="language-html"><style> input[aria-required], select[aria-required], textarea[aria-required] { outline: 3px solid #0066ff !important; background: rgba(0,102,255,0.05) !important; } </style> </code></pre> <p>Revela que todos os campos estão marcados com aria-required</p> <img src="https://github.com/user-attachments/assets/9e3b1bdb-5db1-420a-92ce-7a6fa1ec3dca" alt="aria-required em todos os campos" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Guimarães (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) Melhoria. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li>(2) Melhoria. <a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>usar required em vez de aria-required</li> </ul> <h5>Esposende (OK)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <h5>Arcos Valdevez (OK)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <h5>Região Aveiro (? não se conseguiu validar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-3.1">Requisito 3.1 - Em ações longas, o sistema deve indicar o que está a acontecer</h4> <div class="requirement-content"> <p><span class="status-na"><span class="sr-only">etiqueta: </span>N/A</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/93" target="_blank" rel="noopener noreferrer">issue#93</a> <strong>Em ações longas o sistema deve dizer o que está a acontecer</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.1</span><span class="label-tag label-na"><span class="sr-only">etiqueta: </span>N/A</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (NA)</h5> <p>Evidências:</p> <p>(1) N/A. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a><br>(2) N/A. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></p> <p>Nota auditoria:</p> <ul> <li>não foram detetados forms com ações com tempos de execução longos</li> </ul> <h5>Guimarães (OK)</h5> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li>(2) <a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>Na evidência (1) surge a mensagem de espera de envio. O leitor de ecrã é puxado corretamente para a leitura da mensagem.</li> </ul> <img src="https://github.com/user-attachments/assets/71b544bb-8d10-4522-8800-9349d27505d9" alt="mensagem de espera" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Esposende (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <h5>Arcos Valdevez (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <h5>Região Aveiro (? não se conseguiu validar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-3.2">Requisito 3.2 - Deve ser confirmado o sucesso da transação/envio de informação</h4> <div class="requirement-content"> <p><span class="status-nok"><span class="sr-only">etiqueta: </span>NOK</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/94" target="_blank" rel="noopener noreferrer">issue#94</a> <strong>O Sucesso do envio/submissão da informação é confirmada</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 3.2</span><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (NOK)</h5> <p>Evidências:</p> <ul> <li>(1) NOK. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) OK. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) há 1 bug - o campo "Motivo do contacto" mesmo preenchido dá erro de obrigatório.</li> <li>A evidência (2) tem msg de confirmação de envio</li> </ul> <p>Bug na evidência (1)</p> <img src="https://github.com/user-attachments/assets/e7a21b66-f690-4c77-b69a-27b2092fea05" alt="Bug campo obrigatório" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Guimarães (OK)</h5> <p>Evidências:</p> <ul> <li>(1) OK. <a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li><a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <p>Nota de auditoria</p> <ul> <li>na evidência (1) localizou-se msg de envio</li> </ul> <img src="https://github.com/user-attachments/assets/979b186b-c714-4cd8-8ea4-940f4600ebc7" alt="msg de envio" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Esposende (OK)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <img src="https://github.com/user-attachments/assets/34000574-885e-453c-b383-8dc8d83bb141" alt="msg de envio c/ sucesso" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>Arcos Valdevez (OK)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> <li>(2) <a href="https://cmmatosinhos.myagir.pt/flex/denunciainterno">https://cmmatosinhos.myagir.pt/flex/denunciainterno</a></li> </ul> <h5>Região Aveiro (? não se conseguiu validar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (OK)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> <h4 class="requirement-title" id="req-transacao-r-4.2">Requisito 4.2 - As ações destrutivas nunca devem ser permanentes; deve ser sempre possível desfazer a operação</h4> <div class="requirement-content"> <p><span class="status-na"><span class="sr-only">etiqueta: </span>N/A</span></p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/96" target="_blank" rel="noopener noreferrer">issue#96</a> <strong>As ações destrutivas nunca devem ser permanentes</strong></p> <div class="evidence-labels"><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span><span class="label-tag label-na"><span class="sr-only">etiqueta: </span>N/A</span><span class="label-tag label-requisito"><span class="sr-only">etiqueta: </span>R 4.2</span></div> <div class="issue-content"><h5>Nota geral</h5> <p>Estão feitas análises a 10 URLs do pacote de 20. Não se espera que os 10 restantes revelem erros novos. De qualquer forma a análise está em progresso</p> <h5>Bragança (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) N/A. <a href="https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios">https://www.cm-braganca.pt/sugestoes-reclamacoes-elogios</a></li> <li>(2) N/A. <a href="https://www.cm-braganca.pt/participacao/pedidos-de-informacao">https://www.cm-braganca.pt/participacao/pedidos-de-informacao</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>ambos os forms são de uma só página com 1 só submissão.</li> </ul> <h5>Guimarães (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cm-guimaraes.pt/pages/2126">https://www.cm-guimaraes.pt/pages/2126</a></li> <li><a href="https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias">https://www.cm-guimaraes.pt/registar-ocorrencias/ocorrencias-gerais/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Esposende (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes">https://www.municipio.esposende.pt/balcao-virtual/elogios-reclamacoes-ou-sugestoes</a></li> </ul> <h5>Arcos Valdevez (N/A)</h5> <p>Evidências:</p> <ul> <li><a href="https://www.cmav.pt/pages/293">https://www.cmav.pt/pages/293</a></li> <li><a href="https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito">https://www.cmav.pt/viver/apoio-ao-cidadao/balcao-municipal/pedido-de-recolha-de-objetos-de-grandes-dimensoes-gratuito</a></li> </ul> <h5>Matosinhos (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) N/A. <a href="https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios">https://www.cm-matosinhos.pt/contactos/sugestoes-reclamacoes-elogios</a></li> </ul> <h5>Região Aveiro (? não se conseguiu validar)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.regiaodeaveiro.pt/pages/308">https://www.regiaodeaveiro.pt/pages/308</a></li> </ul> <h5>Valpaços (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://valpacos.pt/pages/770">https://valpacos.pt/pages/770</a></li> <li>(2) <a href="https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares">https://valpacos.pt/eu-sou-municipe/desporto-e-educacao/educacao/transportes-escolares</a></li> </ul> <h5>Sabrosa (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.sabrosa.pt/pages/308/">https://www.sabrosa.pt/pages/308/</a></li> <li>(2) <a href="https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa">https://www.sabrosa.pt/area-do-municipe/empresas-registadas/formulario-de-registo-de-empresa</a></li> <li>(3) <a href="https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias">https://www.sabrosa.pt/balcao-virtual/formulario-de-registo-de-ocorrencias</a></li> </ul> <h5>Albergaria (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-albergaria.pt/subscricao-de-newsletters">https://www.cm-albergaria.pt/subscricao-de-newsletters</a></li> </ul> <h5>Caminha (N/A)</h5> <p>Evidências:</p> <ul> <li>(1) <a href="https://www.cm-caminha.pt/pages/729">https://www.cm-caminha.pt/pages/729</a></li> </ul> </div> </li> </ul></div> </div> <div class="checklist-section"> <h3 id="outras-violacoes">Outras violações</h3> <div class="requirement-content"> <p><span class="status-ok"><span class="sr-only">etiqueta: </span>OK</span> (no entanto contém 2 melhorias que se recomenda efetuar)</p> <p>Lista de evidências recolhidas:</p> <ul class="evidence-list"> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/108" target="_blank" rel="noopener noreferrer">issue#108</a> <strong>Outras violações- Páginas com erros em links</strong></p> <div class="evidence-labels"><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-outras"><span class="sr-only">etiqueta: </span>outras violações</span></div> <div class="issue-content"><h5>Descrição do problema</h5> <p>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.</p> <h5>CM Esposende (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) Melhoria. <a href="https://www.municipio.esposende.pt/balcao-virtual/avaliacao-da-satisfacao">https://www.municipio.esposende.pt/balcao-virtual/avaliacao-da-satisfacao</a></li> <li>(2) Melhoria. <a href="https://www.municipio.esposende.pt/balcao-virtual/servicos-online/atendimento">https://www.municipio.esposende.pt/balcao-virtual/servicos-online/atendimento</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Link da “Avaliação de Satisfação” do website indisponível.</li> </ul> <img src="https://github.com/user-attachments/assets/01bf5625-2c37-4a9d-9b7a-9324ccc526ce" alt="Página com erro e sem conteúdo" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <ul> <li>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 <em>iframe</em> com erro em seu link.</li> </ul> <img src="https://github.com/user-attachments/assets/aee9f8ad-3a9c-48c2-a222-937ffa46461a" alt="Serviços online com erro" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>CM Valongo (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) Melhoria. <a href="https://www.cm-valongo.pt/">https://www.cm-valongo.pt/</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Link do vídeo na secção “Valongo, um território a descobrir!” encontra-se indisponível.</li> </ul> <img src="https://github.com/user-attachments/assets/5eafe641-e534-4b3f-8c18-538898366e0b" alt="Erro em vídeo" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <h5>CM Arco de Valdevez (Melhoria)</h5> <p>Evidências:</p> <ul> <li>(1) Melhoria. <a href="https://www.cmav.pt/informar/juntas-de-freguesia">https://www.cmav.pt/informar/juntas-de-freguesia</a></li> </ul> <p>Nota auditoria:</p> <ul> <li>Na evidência (1) encontra-se um link com erro, ao aceder o menu “Viver” na opção “Juntas de Freguesia”.</li> </ul> <img src="https://github.com/user-attachments/assets/4b18e006-9b4f-4478-9524-9dad619bfd5d" alt="Erro na página Juntas de Freguesia" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><strong>Recomendação geral de melhorias</strong><br>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</p> </div> </li> <li class="evidence-item"> <p><span class="visually-hidden">evidência: </span><a href="https://github.com/unidade-acesso/report_012/issues/16" target="_blank" rel="noopener noreferrer">issue#16</a> <strong>Outras violações - O foco do leitor de ecrã retorna para o início após carregamento "automático" de página</strong></p> <div class="evidence-labels"><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span><span class="label-tag label-outras"><span class="sr-only">etiqueta: </span>outras violações</span></div> <div class="issue-content"><h5>Descrição do problema</h5> <p>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.</p> <p>Por exemplo, no website da Câmara Municipal de Esposende, este comportamento ocorre durante a seleção de uma opção no menu lateral:</p> <img src="https://github.com/user-attachments/assets/e962b2c3-69b9-48a2-b119-dedfb71710a7" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Opção "Órgãos e Competências" não possui uma lista de opções definida na sua estrutura. Url: <a href="https://www.municipio.esposende.pt/pages/2234">https://www.municipio.esposende.pt/pages/2234</a></em></p> <img src="https://github.com/user-attachments/assets/c09cc5b3-462e-4d72-b35c-c4391f7f6059" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>Ao selecionar a opção "Órgãos e Competências" o foco do leitor de ecrã retorna para o início da página</em></p> <img src="https://github.com/user-attachments/assets/1e457752-2001-4e91-863c-c2fe6fd84ffa" alt="Image" class="evidence-image" style="max-width: 100%; height: auto; margin: 10px 0; border: 1px solid #ddd; border-radius: 4px;"> <p><em>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: <a href="https://www.municipio.esposende.pt/municipio/camara-municipal/orgaos-e-competencias">https://www.municipio.esposende.pt/municipio/camara-municipal/orgaos-e-competencias</a></em></p> <h6>Sugestão de correção:</h6> <ul> <li>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</li> <li>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.</li> </ul> <h5>Websites que necessitam de correções (NOK):</h5> <ul> <li><a href="https://www.cm-braganca.pt/transparencia/ligacoes-uteis">CM de Bragança (NOK)</a></li> <li><a href="https://www.cm-guimaraes.pt/municipio/camara-municipal/publicacoes">CM de Guimarães (NOK)</a></li> <li><a href="https://www.municipio.esposende.pt/pages/173">Município de Esposende (NOK)</a></li> <li><a href="https://www.cmav.pt/p/investir">CM de Arcos de Valdevez (NOK)</a></li> <li><a href="https://www.cm-matosinhos.pt/urbanismo">CM de Matosinhos (NOK)</a></li> <li><a href="https://valpacos.pt/sou-visitante">CM de Valpaços (NOK)</a></li> <li><a href="https://www.sabrosa.pt/balcao-virtual">CM de Sabrosa (NOK)</a></li> <li><a href="https://www.cm-albergaria.pt/investir">CM Albergaria Velha (NOK)</a></li> <li><a href="https://www.cm-caminha.pt/investir">CM de Caminha (NOK)</a></li> <li><a href="https://www.cm-peniche.pt/visitar">CM de Peniche (NOK)</a></li> <li><a href="https://www.cm-pesoregua.pt/atividade-municipal/atividades-desenvolvidas">CM Peso da Régua (NOK)</a></li> <li><a href="https://www.cm-pombal.pt/informar">CM de Pombal (NOK)</a></li> <li><a href="https://www.cm-montalegre.pt/cidadao">CM Monte Alegre (NOK)</a></li> <li><a href="https://www.cm-agueda.pt/participar">CM de Águeda (NOK)</a></li> <li><a href="https://www.cm-ilhavo.pt/investir">CM Ílhavo (NOK)</a></li> <li><a href="https://www.cm-olb.pt/investir">CM Oliveira do Bairro (NOK)</a></li> <li><a href="https://www.cm-vagos.pt/investir">CM de Vagos (NOK)</a></li> <li><a href="https://www.cm-valongo.pt/investir">CM de Valongo (NOK)</a></li> </ul> <h5>Websites que estão a cumprir (OK)</h5> <ul> <li><a href="https://www.regiaodeaveiro.pt/areas-de-acao-e-projetos">Comunidade Intermunicipal Região de Aveiro (OK)</a>: não apresenta menu lateral</li> <li><a href="https://www.cm-satao.pt/conhecer-satao/feiras-festas-e-romarias">Município de Satão (OK)</a>: não apresenta menu lateral</li> </ul> </div> </li> </ul></div> </div> </section> <section id="etiquetas" class="mb-5 report-section"> <h2 id="req-etiquetas">Significado das etiquetas utilizadas</h2> <ul> <li><span class="label-tag label-ok"><span class="sr-only">etiqueta: </span>OK</span> - status OK</li> <li><span class="label-tag label-melhoria"><span class="sr-only">etiqueta: </span>melhoria</span> - status OK, mas pode melhorar</li> <li><span class="label-tag label-nok"><span class="sr-only">etiqueta: </span>NOK</span> - status Not OK</li> <li><span class="label-tag label-na"><span class="sr-only">etiqueta: </span>N/A</span> - status Não Aplicável</li> <li><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk10 web</span> - checklist 10 Aspetos críticos de acessibilidade funcional</li> <li><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk conteúdo</span> - checklist Conteúdo</li> <li><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>chk transação</span> - checklist Transação</li> <li><span class="label-tag label-outras"><span class="sr-only">etiqueta: </span>outras violações</span> - permite construir o subcapítulo "Outras violações", o qual integra o capítulo "Avaliações manuais"</li> <li><span class="label-tag label-declaracao"><span class="sr-only">etiqueta: </span>dec a11y</span> - permite construir o capítulo "Declaração de acessibilidade e usabilidade"</li> <li><span class="label-tag label-auto"><span class="sr-only">etiqueta: </span>av auto</span> - permite construir o capítulo "Avaliação automática"</li> <li><span class="label-tag label-checklist"><span class="sr-only">etiqueta: </span>testes usabilidade</span> - permite construir o capítulo "Testes de usabilidade"</li> </ul> </section> </div> <footer class="mt-5 pt-4 border-top text-center text-muted"> <div class="container"> <p>© 2026 ARTE - Agência para a Reforma Tecnológica do Estado, I.P. Todos os Direitos Reservados.</p> <p><em lang="en">GitReports v1.0</em> - relatório gerado automaticamente a partir dos <em lang="en">issues</em> do GitHub</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>