Relatório Avaliação de Candidatura
CM Praia da Vitória

Introdução

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

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

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

Níveis de conformidade das avaliações manuais
ChecklistConformidade alcançadaResultado
10 aspetos33.3% (7/21)etiqueta: Não passa
Conteúdo35.3% (6/17)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.

Avaliação automática

etiqueta: NOK

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

Lista de evidências recolhidas:

Avaliação manual

etiqueta: NOK

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

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

Checklist 10 aspetos

etiqueta: NOK

Nível de conformidade:

  • Checklist 10 aspetos: 33.3% (7/21)
    • Requisitos avaliados: 27 (6 N/A excluídos, 21 aplicáveis)
    • Requisitos OK: 7
    • Requisitos NOK: 14
    • Requisitos N/A: 6

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #47 O menu do rodapé não está estruturado como lista

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.1

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

    Evidências:

    As opções apresentadas no menu do rodapé não estão apresentadas como lista:

    Image

    Opções do menu do rodapé.

    URLs a verificar:

    Recomendações:

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

  • issue #27 O menu principal não está estruturado como uma lista

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.1

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

    Evidências:

    Apesar de estarem a utilizar a semântica de lista com ul e li, foi utilizado atributos como o role="menubar", role="none", role="menuitem" e aria-haspopup="true" que alteram a semântica nativa desses elementos. Como consequência, as tecnologias de apoio deixam de os reconhecer como uma lista, passando a interpretá‑los como componentes de menu:

    Image

    Opções do menu principal com os atributos role="menubar", role="none", role="menuitem" e aria-haspopup="true".

    URLs a verificar:

    Recomendações:

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

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:

  • issue #48 O menu mobile não está estruturado como uma navegação de forma apropriada

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.2

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

    Evidências:

    Verifica-se que apesar de estar a ser utilizado a tag nav nas opções do menu principal na versão mobile, o botão "Menu" está fora da landmark nav. Isso faz com que ao navegar pelo website com o leitor de ecrã, não é possível realizar saltos diretamente para o menu, nem este é identificado como uma área de navegação:

    Image

    Imagem do botão do Menu principal fora da tag de navegação.

    URLs a verificar:

    Recomendações:

    • O menu mobile deve ser estruturado dentro de uma tag nav. Isso inclui também o botão "Menu".

  • issue #30 Menu mobile/tablet não acessível por teclado e leitores de ecrã

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.2

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

    Evidências:

    Nos menus de navegação (versão mobile), verificámos que alguns controlos utilizados para expandir ou colapsar o menu foram implementados através de elementos genéricos <span>, apesar de representarem ações de interface.

    Foram observados, por exemplo, controlos para abrir/fechar e fechar o menu mobile estruturados com elementos <span> clicáveis, em vez de elementos semanticamente adequados para ações, como <button>.

    Como consequência, a função destes controlos não é transmitida nativamente às tecnologias de apoio, dependendo de comportamento JavaScript adicional para simular interatividade. Quando os estilos CSS são removidos, também não é possível reconhecer claramente que estes elementos representam ações acionáveis.

    Image

    Imagem do botão do menu como <span> em vez de botão

    URLs a verificar:

    Recomendações:

    • Recomendamos a substituição dos elementos <span> utilizados como controlos de interface por elementos semânticos <button type="button">.
    • A abertura e fecho do menu deve ser gerenciada por um script em conjunto com o atributo aria-expanded.
    • O botão menu, deve ter um nome acessível apropriado. Idealmente o botão deverá ter um texto visível "Menu" junto ao ícone.

  • issue #29 Menu principal com navegação por teclado e estados de expansão incorretos

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.2

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

    Evidências:

    O menu principal apresenta problemas de acessibilidade tanto na navegação por teclado como na comunicação do estado das subopções aos leitores de ecrã.

    Ao utilizar apenas o teclado, o menu só pode ser navegado através das teclas de direção (setas), não sendo possível percorrer as opções utilizando Tab e Shift + Tab, conforme esperado para componentes de navegação.

    Image

    Usando o Shift+TAB e TAB o foco salta o menu para a pesquisa sem percorrer as opções principais.

    Adicionalmente, ao interagir com o menu através do rato, as subopções são expandidas quando o utilizador passa o cursor sobre os itens (hover). No entanto, o atributo aria-expanded não é atualizado para refletir essa alteração de estado. Como consequência, os leitores de ecrã não conseguem comunicar corretamente se uma opção se encontra expandida ou colapsada.

    Image

    Apesar do submenu de "Atualidade" estar expandido o aria-expanded continua como false.

    URLs a verificar:

    Recomendações:

    • Garantir que todas as opções do menu podem ser acedidas e percorridas através das teclas Tab e Shift + Tab.
    • Atualizar dinamicamente o atributo aria-expanded sempre que uma opção do menu seja expandida ou colapsada.
    • Garantir que o estado visual e o estado anunciado às tecnologias de apoio permanecem sincronizados.
    • Validar o comportamento do menu com teclado e leitores de ecrã para assegurar a correta comunicação dos estados de interação.

Requisito 1.3 - As imagens-link, caso existam no menu, devem ter o correspondente equivalente alternativo em texto

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #32 O menu mobile está com texto alternativo inapropriado

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.3

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

    Evidências:

    O botão mobile de abrir e fechar o menu não têm texto alternativo o que faz com que o leitor de ecrã não reconheça.

    Image

    Imagem do menu hambúrguer não sendo reconhecido pelo leitor de ecrã.

    URLs a verificar:

    Recomendações:

    • Adicionar o nome acessível como aria-label="Menu" e o seu estado corretamente.

Requisito 2.1 - Existe um título h1 marcado na página

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #37 Existência de multiplos h1 na página web

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.1

    Existe um título <h1> marcado na página.

    Evidências:

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

    Nas páginas de notícias, verifica-se a existência de dois elementos <h1>, o que constitui uma utilização incorreta da estrutura de cabeçalhos.

    Esta duplicação poderá gerar problemas caso ambos os cabeçalhos h1 fiquem visíveis para os leitores de ecrã.

    Image

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

    URLs a verificar:

    Verificar todas as páginas de notícias.

    Recomendações

    • Remover o título "Notícias ver mais" das páginas de notícias.

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 #38 Incorreta marcação de títulos e subtítulos

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

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

    Evidências:

    Foram identificadas secções do website onde elementos que funcionam visualmente como títulos e subtítulos se encontram marcados com <span> em vez de elementos de cabeçalho semanticamente adequados.

    Esta implementação compromete a correta estrutura hierárquica da página e dificulta a navegação por utilizadores de tecnologias de apoio.

    Image

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

    URLs a verificar:

    Verificar todas as páginas do website. Algumas a verificar:

    Recomendações:

    • Substituir os elementos <span> utilizados como títulos e subtítulos por elementos de cabeçalho semanticamente adequados (<h1>–<h6>).
    • Garantir que os níveis dos cabeçalhos respeitam a hierarquia semântica da página.

  • issue #11 Saltos na hierarquia de cabeçalhos

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

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

    Evidências:

    Em todas as páginas do website foram identificados saltos na hierarquia de cabeçalhos, verificando-se a utilização de um elemento <h5> sem existência prévia de outros níveis de cabeçalho .

    Esta implementação compromete a correta estrutura semântica da página e dificulta a navegação por utilizadores de tecnologias de apoio.

    Image

    Figura 1 - Estrutura de cabeçalhos da página da homepage.

    URLs a verificar:

    Verificar todas as páginas do website.

    Recomendações:

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

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 #44 Estrutura de tabela sem marcação semântica adequada

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 3.1

    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

    Evidências:

    Foi verificado que a informação apresentada na Figura 1 possui uma disposição visual semelhante a uma tabela, mas não se encontra estruturada com os elementos HTML apropriados para tabelas de dados.

    A estrutura é construída através de elementos genéricos, como <div> e <span>, não existindo elementos semânticos de tabela, tais como <table>, <tr>, <th> e <td>.

    Esta implementação dificulta a interpretação das relações entre cabeçalhos e dados por tecnologias de apoio, comprometendo a acessibilidade da informação apresentada.

    Image

    URLs a verificar:

    https://www.cmpv.pt/index.php?op=2

    Recomendações:

    • Reestruturar o conteúdo utilizando elementos semânticos de tabela (<table>, <tr>, <th> e <td>), caso a informação represente efetivamente dados tabulares.
    • Garantir que os cabeçalhos da tabela são marcados com o elemento <th>.
    • Assegurar que a estrutura da tabela permite a correta associação entre cabeçalhos e células de dados por tecnologias de apoio.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #45 Estrutura de tabela sem marcação semântica adequada

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 3.2

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

    Evidências:

    Foi verificado que a informação apresentada na Figura 1 possui uma disposição visual semelhante a uma tabela, mas não se encontra estruturada com os elementos HTML apropriados para tabelas de dados.

    A estrutura é construída através de elementos genéricos, como <div> e <span>, não existindo elementos semânticos de tabela, tais como <table>, <tr>, <th> e <td>.

    Esta implementação dificulta a interpretação das relações entre cabeçalhos e dados por tecnologias de apoio, comprometendo a acessibilidade da informação apresentada.

    Image

    Figura 1 - Tabela sem a estrutura correta de tabelas .

    URLs a verificar:

    https://www.cmpv.pt/index.php?op=2

    Recomendações:

    • Reestruturar o conteúdo utilizando elementos semânticos de tabela (<table>, <tr>, <th> e <td>), caso a informação represente efetivamente dados tabulares.
    • Adicionar uma legenda descritiva através do elemento <caption>, identificando o conteúdo e a finalidade da tabela.
    • Assegurar que a estrutura da tabela permite a correta associação entre cabeçalhos e células de dados por tecnologias de apoio.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #26 Campo de pesquisa com ausência de etiqueta acessível e dependência de placeholder

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

    Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição.
    – ver requisito 4.1 na lista 10 aspetos

    Evidencias:

    No código analisado referente ao campo de pesquisa do cabeçalho, verifica-se a ausência de um elemento <label> associado ao campo de pesquisa através de for e id.

    O campo apresenta apenas os seguintes mecanismos de identificação:

    • placeholder="Pesquisa", utilizado como principal elemento identificador visual
    • Ausência de associação programática entre uma etiqueta e o input

    Adicionalmente, o placeholder não constitui uma etiqueta acessível, uma vez que desaparece durante a interação do utilizador, deixando de fornecer contexto funcional sobre o campo de pesquisa.

    Image

    Figura 1 - Campo de pesquisa no cabeçalho sem etiqueta acessível associada

    URLs a verificar:

    Recomendações:
    Recomenda-se garantir que o campo de pesquisa possui um nome acessível corretamente definido, através da seguinte abordagem:

    • Implementação de um elemento <label> associado ao input através de for e id

    Adicionalmente, recomenda-se:

    • Evitar utilizar o placeholder como substituto de etiqueta, sendo este apenas um elemento de apoio ao preenchimento
    • Garantir que o campo mantém sempre um nome acessível persistente, independentemente do estado de interação
    • Assegurar consistência entre identificação visual e programática do controlo

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #28 Ausência de formulários de preenchimento para validação de campos obrigatórios

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

    É possível identificar os campos de preenchimento obrigatório quando se usa apenas um leitor de ecrã.
    – ver requisito 4.2 na lista 10 aspetos

    Evidências:
    Durante a análise realizada, não foram identificados formulários de preenchimento que permitissem validar a identificação de campos obrigatórios através de leitores de ecrã. Sendo assim, o critério é considerado não aplicável.

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #33 Ausência de formulários de preenchimento para validação de mensagens de erro

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

    É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã.
    – ver requisito 4.3 na lista 10 aspetos

    Evidências:
    Durante a análise realizada, não foram identificados formulários de preenchimento que permitissem validar a apresentação e leitura de mensagens de erro através de leitores de ecrã. Sendo assim, o critério é considerado não aplicável.

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

etiqueta: NOK

Lista de evidências recolhidas:

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #2 Gráfico não está totalmente acessível a tecnologias de apoio

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.2

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

    Evidências:

    O gráfico apresentado não está totalmente acessível a tecnologias de apoio, uma vez que a informação principal é transmitida através de elementos visuais e não é possível aceder a todas as informações do gráfico utilizando tecnologias de apoio.

    Image

    Verificou-se que o gráfico, embora possuam um texto associado para descrever o seu conteúdo, não apresentam uma descrição breve que indique a sua finalidade no contexto em que se encontram. As imagens não decorativas devem possuir um equivalente alternativo em texto curto e correto, por exemplo através do atributo alt, descrevendo de forma fiel o propósito da imagem para que este seja compreendido por tecnologias de apoio.

    Image

    O gráfico expõe à navegação por leitor de ecrã vários elementos visuais internos e externos, como barras coloridas, segmentos e numeração dos ODS. Como estes elementos representam partes redundantes da mesma visualização, a leitura individual de todos eles torna a experiência excessivamente repetitiva e dificulta a compreensão global do gráfico.

    Recomenda-se que o gráfico tenha um equivalente alternativo curto e correto, identificando a finalidade da visualização e descrevendo cada número de ODS apresentado de forma clara. Adicionalmente, os elementos gráficos redundantes ou meramente decorativos devem ser ocultados das tecnologias de apoio, evitando que barras, segmentos, ícones ou números sejam anunciados separadamente quando fazem parte da mesma unidade informativa.

    Image

    URLs a verificar:

    Recomendações:

    • Recomenda-se que a informação seja apresentada diretamente na página sem o uso de iframes ou ferramentas externas, caso não seja possível devem partilhar as mesma informação através de ficheiros na mesma página.

    • O nome acessível deve ser aplicado ao elemento agrupador que representa cada ODS completo, por exemplo o elemento <g> que contém a barra/segmento, o número e o ícone. Esse grupo deve receber um nome acessível claro através do atributo aria-label, por exemplo: aria-label="ODS 2: Erradicar a fome. Desempenho do município neste objetivo." e também deve ser inserido um role="img". Para mais informações: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/img_role

    • Os elementos decorativos devem possuir aria-hidden="true" e focusable="false".

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #7 Imagem-link com texto alternativo incorreto

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.3

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

    Evidências:
    Verifica-se que a imagem do logótipo utilizada como link para a página inicial, apresenta um texto alternativo que não descreve adequadamente o seu propósito (acesso à página inicial). Verifica-se ainda a existência de uma descrição associada ao link através de arial-label, que pode ser removida pois a imagem já possui texto alternativo.

    Image

    URLs a verificar:

    Recomendações:

    • O texto alternativo deve transmitir claramente o destino ou finalidade do link. Por exemplo: alt="Município da Praia da Vitória – página inicial".

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #56 Texto normal não tem contraste suficiente

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 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.
    – ver requisito 6.1 na lista 10 aspetos

    Evidências

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

    O website apresenta problemas de contraste na avaliação com a ferramenta WAVE para o texto normal na componente do calendário, relacionados com insuficiência de contraste, afetando diretamente a legibilidade, nos textos que possuem a combinação de cores #F2F2F2(cor de primeiro plano e plano de fundo) que torna o texto da label invisível. (Figura 1)

    Image

    Figura 1- Texto normal com problemas de contraste na página Agenda Cultural - Cinema

    URLs a verificar

    Recomendações
    Recomendamos a revisão das combinações de cores das páginas de todo website para garantir o acesso aos conteúdos, assegurando os valores mínimos de contraste para texto normal. Garantir consistência nos estados visuais (normal, hover, foco) com contraste adequado;

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

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

Lista de evidências recolhidas:

  • issue #58 Legendas sincronizadas disponíveis apenas em inglês

    etiqueta: melhoriaetiqueta: chk 10 webetiqueta: R 7.2

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

    Evidências:

    Verificou-se que o vídeo disponibilizado na página inicial inclui legendas sincronizadas. Contudo, as legendas encontram-se disponíveis apenas em inglês.

    Atendendo a que o website se destina maioritariamente a um público de língua portuguesa, a disponibilização de legendas em português poderá contribuir para uma melhor compreensão dos conteúdos multimédia e para uma experiência de utilização mais inclusiva.

    Image

    Figura 1 - Legendas disponíveis apenas em inglês no vídeo da página inicial .

    URLs a verificar:

    https://www.cmpv.pt/index.php

    Recomendações:

    • Disponibilizar legendas sincronizadas em português para os conteúdos multimédia.
    • Sempre que possível, permitir a seleção entre diferentes idiomas de legendagem.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #25 Controlos de navegação do carrossel sem estrutura semântica e nome acessível

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

    Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.
    – ver requisito 8.3 na lista 10 aspetos

    Evidências:

    Na página inicial onde é apresentado o carrossel de eventos (agenda), existem controlos de navegação que permitem avançar e recuar entre os itens.

    Estes controlos são apresentados visualmente através de ícones de setas, mas estão implementados com elementos não semânticos (<i>), sem utilização de elementos interativos adequados como <button>.

    Adicionalmente, não existe qualquer nome acessível associado aos controlos, o que dificulta a sua interpretação por tecnologias de apoio.

    Image

    Figura 1 - Controlos de navegação do carrossel implementados com elementos não semânticos e sem nome acessível.

    URLs a verificar:

    Recomendações:

    Recomenda-se a substituição dos elementos não semânticos utilizados para navegação do carrossel por elementos interativos adequados, como <button>.

    Cada controlo deve possuir um nome acessível claro, através de aria-label, garantindo que a sua função é corretamente identificada por tecnologias de apoio.

    Deve ainda ser garantido que os controlos são totalmente operáveis por teclado e que mantêm o foco visível durante a interação.

  • issue #22 Ausência de landmarks semânticos

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

    Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.
    – ver requisito 8.3 na lista 10 aspetos

    Evidências:

    Observa-se a ausência de landmarks semânticos que permitam identificar programaticamente as principais regiões da página (ex.: cabeçalho, navegação, conteúdo principal e rodapé). A estrutura da interface aparenta estar predominantemente assente em elementos genéricos (<div>), sem utilização consistente de elementos HTML semânticos ou roles equivalentes.

    A inexistência destas regiões semânticas dificulta a navegação por tecnologias de apoio, nomeadamente leitores de ecrã, impedindo os utilizadores de saltar rapidamente entre áreas relevantes da página.

    Image

    Figura 1 - Ausência de landmarks semânticos identificáveis na estrutura da página

    URLs a verificar:

    Recomendações:

    • Implementar landmarks semânticos para as principais regiões da página, recorrendo preferencialmente a elementos HTML nativos como <header>, <nav>, <main> e <footer>
    • Garantir a existência de uma única região principal (<main>) por página
    • Quando não for possível utilizar elementos HTML semânticos, aplicar roles ARIA equivalentes, como role="banner", role="navigation", role="main" e role="contentinfo"
    • Validar a estrutura semântica com tecnologias de apoio para confirmar que as regiões são corretamente identificadas e anunciadas ao utilizador.

    Referência: MDN – ARIA landmark roles

  • issue #18 Listagem de conteúdos sem estrutura semântica adequada

    etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

    Quando se retira o CSS, deve ser possível reconhecer a semântica dos diversos elementos.
    – ver requisito 8.3 na lista 10 aspetos

    Evidências:
    Na página principal, têm várias secções em que cada item é apresentado como um conjunto de conteúdos relacionados (imagem, data, título, descrição e ligação para detalhe), estruturado com múltiplos elementos <div>.

    No entanto, estes itens não estão inseridos numa estrutura semântica de lista (<ul> / <li>), apesar de representarem claramente uma listagem de conteúdos homogéneos.

    Image

    Figura 1 – Listagem de eventos estruturada com elementos <div> sem utilização de lista semântica

    Adicionalmente, observou-se uma listagem cronológica de anos apresentada apenas como sequência de elementos <a>, separados visualmente através de &nbsp; para criar espaçamento entre os itens.

    Apesar de representar claramente um conjunto homogéneo de opções de navegação temporal, esta estrutura não se encontra organizada semanticamente como lista (<ul> / <ol> com <li>), dificultando a identificação programática da relação entre os elementos.

    Quando os estilos CSS são removidos, os anos surgem como uma sequência contínua de links, sem indicação clara de agrupamento ou ordem estrutural. Adicionalmente, a utilização de espaços não separáveis (&nbsp;) para controlo visual do espaçamento constitui uma técnica de apresentação visual, não devendo ser utilizada como mecanismo de estruturação de conteúdos.

    Image

    Figura 2 - Listagem cronológica de anos estruturada apenas com links e espaçamento visual (&nbsp;), sem lista semântica

    Como consequência, as tecnologias de apoio não conseguem identificar programaticamente que estes elementos pertencem a um conjunto, nem o número total de itens existentes.

    Quando os estilos CSS são desativados, os conteúdos passam a ser apresentados como blocos isolados, sem indicação clara da relação entre si, dificultando a compreensão da estrutura da informação.

    URLs a verificar:

    Recomendações:

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

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #31 Quando a caixa de diálogo é aberta, o foco move-se para um elemento dentro da caixa de diálogo

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

    Quando a caixa de diálogo é aberta, o foco (cursor do Browser) move-se para um elemento dentro da caixa de diálogo
    – ver requisito 9.1 na lista 10 aspetos

    Evidências:

    Verifica-se que as modais presentes no website são apresentadas dentro de um iframe, cuja validação será realizada separadamente. Neste contexto, o critério não se aplica à página avaliada, uma vez que não foram identificadas outras modais diretamente implementadas no website.

    Recomendações:
    N/A

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #34 O foco fica limitado a caixa de diálogo

    etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 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
    – ver requisito 9.2 na lista 10 aspetos

    Evidências:

    Verifica-se que as modais presentes no website são apresentadas dentro de um iframe, cuja validação será realizada separadamente. Neste contexto, o critério não se aplica à página avaliada, uma vez que não foram identificadas outras modais diretamente implementadas no website.

    Recomendações:
    N/A

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #35 A caixa de diálogo tem de ter um mecanismo que permita sair ou fechar a caixa

    etiqueta: chk 10 webetiqueta: N/Aetiqueta: R 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
    – ver requisito 9.3 na lista 10 aspetos

    Evidências:

    Verifica-se que as modais presentes no website são apresentadas dentro de um iframe, cuja validação será realizada separadamente. Neste contexto, o critério não se aplica à página avaliada, uma vez que não foram identificadas outras modais diretamente implementadas no website.

    Recomendações:
    N/A

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

etiqueta: N/A

Lista de evidências recolhidas:

  • issue #36 Ao fechar a caixa de diálogo o cursor retorna ao elemento que o acionou

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

    Quando a caixa de diálogo fecha, o foco (cursor do Browser) deve voltar ao elemento interativo que a invocou
    – ver requisito 9.4 na lista 10 aspetos

    Evidências:

    Verifica-se que as modais presentes no website são apresentadas dentro de um iframe, cuja validação será realizada separadamente. Neste contexto, o critério não se aplica à página avaliada, uma vez que não foram identificadas outras modais diretamente implementadas no website.

    Recomendações:
    N/A

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

etiqueta: NOK

Lista de evidências recolhidas:

Checklist Conteúdo

etiqueta: NOK

Nível de conformidade:

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

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #3 Falta de resumo na página inicial do website

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 1.1

    O sítio Web apresenta um resumo breve do seu propósito, visível sem fazer scroll.
    – ver requisito 1.1 na lista Conteúdo

    Evidências:

    Na página principal do website da Cãmara Municipal da Praia da Vitória, não aparece presente um resumo breve do próposito do site.

    Image

    Imagem da página principal sem fazer scroll

    URLs a verificar:

    Recomendações:

    O propósito deve transmitir, de forma clara, o que o utilizador pode efetivamente encontrar e realizar no website. Esse propósito deve ser imediatamente visível na página, sem ser necessário fazer scroll, avançar no slideshow, entre outros.

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

    Image

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

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #8 Falta de glossário para termos complexos

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 1.2

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

    Evidências:

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

    Image

    Imagem de vários termos complexos sem definição agregada. Disponível em: https://www.cmpv.pt/index.php?op=41

    Image

    Imagem com o termo complexo "FEAMP" sem definição agregada. Disponível em: https://www.cmpv.pt/index.php?op=50

    URLs a verificar:

    Recomendações:

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

    Como exemplo podem visualizar o glossario do acessibilidade.gov.

Requisito 1.4 - A informação sobre a entidade responsável pelo conteúdo está em todas as páginas

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #5 Informação da Entidade Responsável Não Apresentada por Extenso

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 1.4

    A informação sobre a entidade responsável pelo conteúdo está em todas as páginas.
    – ver requisito 1.4 na lista Conteúdo

    Evidências:

    Todas as páginas devem apresentar o nome da entidade responsável pelos conteúdos publicados no site. O nome da entidade pode ser apresentado através de um logótipo ou texto, mas deve estar por extenso.

    Apesar de existir no rodapé o logotipo da entidade e informação dos contactos. Observamos que o nome da entidade responsável não está disponível por extenso.

    Image

    Imagem do rodapé sem o nome da entidade responsável escrito em extenso.

    URLs a verificar:

    Recomendações:

    Deve ser adicionado o nome da entidade por extenso em todo o website, como é possível observar no acessibilidade.gov.pt:

    Image

    Imagem de exemplo do rodapé do acessibilidade.gov.pt

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

etiqueta: NOK

Lista de evidências recolhidas:

Requisito 2.3 - Blocos e linhas de texto com largura não superior a 100 caracteres

etiqueta: NOK

Lista de evidências recolhidas:

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #20 Estado da navegação principal inconsistente e incorreto após retorno de documentos PDF

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 3.2

    A navegação principal está sempre visível e sempre no mesmo local.
    – ver requisito 3.2 na lista Conteúdo

    Evidências:

    No website da Câmara Municipal da Praia da Vitória, o utilizador não dispõe de mecanismos que permitam identificar facilmente a sua localização atual na estrutura do website. Não existe indicação da página ativa no menu principal nem um sistema de breadcrumbs que forneça contexto de navegação (Ver figura 01).

    Image

    Imagem da página de Educação sem qualquer indicação de navegação.

    Adicionalmente, foi identificado um comportamento inconsistente do menu principal após a abertura de documentos PDF. Ao navegar para uma opção que abre um PDF (por exemplo: Município → Câmara Municipal → Sobre → Código de Ética e Conduta) e regressar à página anterior através do navegador, o menu passa a apresentar estados incorretos.

    Nestas situações, as subopções do menu podem surgir sobrepostas e são destacados itens que não correspondem à página atualmente visualizada (Figura 02). Embora um simples recarregamento da página possa, em alguns casos, restaurar o comportamento esperado, se existir interação prévia com o menu antes do recarregamento, o problema mantém-se e vários itens permanecem assinalados como ativos sem corresponderem à localização real do utilizador (Figura 03).

    Esta situação compromete a orientação e compreensão da estrutura de navegação, dificultando a identificação da página atual e do percurso efetuado no website.

    Image

    Imagem do menu sobreposto em si mesmo e opções de foco na opção incorreta do menu.

    Image

    Imagem do menu com foco em várias opções do menu.

    URLs a verificar:

    Recomendações:

    • Identificar de forma consistente a página atual no menu principal através de indicadores visuais e semânticos adequados.
    • Implementar um sistema de breadcrumbs para fornecer contexto adicional de navegação.
    • Garantir que o estado ativo dos itens do menu é atualizado corretamente após a abertura e o retorno de documentos PDF.
    • Evitar a apresentação simultânea de múltiplos itens como ativos quando não correspondem à localização atual do utilizador.
    • Validar o comportamento do menu em cenários de navegação com histórico do navegador (retroceder, avançar e recarregar página), assegurando consistência e previsibilidade na navegação.

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

etiqueta: NOK

Lista de evidências recolhidas:

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

etiqueta: NOK

Lista de evidências recolhidas:

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

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 4.2

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

    Evidências:

    Identificámos que, na página inicial do website Praia da Vitória, em dispositivos móveis, alguns submenus do menu principal não são apresentados integralmente dentro da área visível do ecrã. Esta situação compromete a visualização e o acesso aos respetivos itens de navegação.

    Identificámos que, na página inicial do website Praia da Vitória, o controlo de navegação do carrossel da secção "Agenda Municipal" não é apresentado na totalidade em dispositivos móveis, encontrando-se visível apenas a seta de navegação à esquerda. Esta situação dificulta a perceção e utilização da funcionalidade de navegação entre conteúdos. (Figura 01)

    Image

    Figura 01— Submenu do menu principal parcialmente oculto em dispositivo móvel.

    Identificámos que, na página inicial do website Praia da Vitória, o controlo de navegação do carrossel da secção "Agenda Municipal" não é apresentado na totalidade em dispositivos móveis, dificultando a perceção e utilização da funcionalidade de navegação entre conteúdos. (FIgura 02)

    Image

    Figura 02 — Controlo de navegação do carrossel não visível em dispositivo móvel.

    Identificámos que, na página Assembleia Municipal - Agenda, em dispositivos móveis, o botão de acessibilidade é apresentado sobre o conteúdo da página, sobrepondo-se ao título "Assembleia Municipal - Agenda" e comprometendo a sua correta visualização.

    Image

    Figura 03 — Botão de acessibilidade sobreposto ao título da página em dispositivo móvel.

    Identificámos que, na página Comunicados, o conteúdo não se adapta corretamente a algumas larguras de ecrã em dispositivos móveis, ficando parcialmente oculto fora da área visível e comprometendo a sua consulta.

    Image

    Figura 04 — Conteúdo parcialmente oculto em dispositivo móvel.

    URLs a verificar:

    Recomendações:

    Garantir a adaptação dos conteúdos e componentes de navegação às diferentes larguras de ecrã, assegurando a sua correta visualização e utilização sem necessidade de deslocação horizontal.

    Os elementos da interface, incluindo menus, submenus, controlos de navegação e componentes fixos, não devem sobrepor-se ao conteúdo nem ficar parcialmente ocultos fora da área visível em dispositivos móveis.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #39 Elementos interativos dependentes de interação por hover para visualização

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.1

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

    Evidências:

    Identificámos que, na página Agenda Cultural - Touradas, a informação associada aos eventos destacados no calendário é disponibilizada apenas através da interação por hover sobre as datas. Esta situação impede o acesso à mesma informação em dispositivos com interação por toque. (Figura 01)

    Image

    Figura 01 — Informação dos eventos apresentada apenas através da interação por hover no calendário.

    URLs a verificar:

    Recomendações:

    Garantir que a informação disponibilizada através da interação por hover pode também ser acedida através de mecanismos compatíveis com dispositivos táteis, como clique, seleção ou foco, assegurando a sua utilização em diferentes tipos de dispositivos.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #40 Elementos interativos com área clicável inferior à dimensão mínima recomendada

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.2

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

    Evidências:

    Verificámos vários elementos interativos na página inicial do website Praia da Vitória, com dimensões inferiores à área mínima recomendada de 44x44px.

    Foi identificado uma altura de 32.6px no campo de pesquisa. (Figura 01)

    Image

    Figura 01 — Campo de pesquisa com área acionável inferior à dimensão mínima recomendada.

    Adicionalmente o botão de pesquisa possue uma dimensão de 42.8 x 32.6px. (Figura 02)

    Image

    Figura 02 — Botão de pesquisa com área acionável inferior à dimensão mínima recomendada.

    Foram identificados ícones de acesso às redes sociais com dimensões de 14 × 19,2px, inferiores à dimensão mínima recomendada de 44px × 44px. (Figura 03)

    Image

    Figura 03 — Ícones de redes sociais com dimensões de 14 × 19.2px, inferiores à dimensão mínima recomendada.

    O ícone de fechar o menu principal apresenta dimensões de 24 × 38.4px, não cumpre o critério do requisito. (Figura 04)

    Image

    Figura 04 — Ícone de fechar o menu principal com área acionável inferior à dimensão mínima recomendada.

    o controlo de navegação do carrossel da secção "Agenda Municipal" apresenta dimensões de 14 × 16px. (Figura 05)

    Image

    Figura 05 — Controlo de navegação do carrossel com dimensão inferior a 44px × 44px.

    Outros exemplos a verificar de controlos de navegação abaixo do mínimo recomendado:

    • Controlos de acesso aos conteúdos em destaque com 27px
    • Controlo de navegação do carrossel de notícias com 32px

    Identificámos que os controlos de paginação da página Agenda cultural - Cinema apresentam dimensões de 28,25 × 28,6px, inferiores à dimensão mínima recomendada de 44px × 44px, dificultando a sua utilização em dispositivos táteis. (Figura 06)

    Image

    Figura 06 — Controlo de paginação com dimensão inferior a 44px × 44px.

    URLs a verificar:

    Recomendações:

    Garantir que todos os elementos interativos apresentam uma área acionável mínima de 44px × 44px, facilitando a sua utilização em dispositivos táteis.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • issue #42 Elementos interativos sem diferenciação visual clara ou comportamento consistente de interação

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.4

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

    Evidências:

    Identificámos que os cartazes dos filmes na página Agenda Cultural - Cinema funcionam como elementos interativos, mas não apresentam indicadores visuais que permitam reconhecer facilmente a sua natureza clicável.

    Image

    Figura 01— Cartazes dos filmes sem indicação visual de interação.

    Identificámos que os elementos da secção "Notícias Relacionadas" na página Notícia funcionam como hiperligações, mas não apresentam indicadores visuais que permitam reconhecer facilmente a sua natureza interativa. (Figura 02)

    Image

    Figura 02— Notícias relacionadas sem indicação visual de interação.

    Verificámos que os ícones das redes sociais presentes no rodapé do website Praia da Vitória, não apresentam indicadores visuais claros de interação. Os elementos mantêm o mesmo aspeto no hover, dificultando a sua identificação como áreas clicáveis. (Figura 03)

    Image

    Figura 03 — Ícones de redes sociais não apresentam indicadores visuais claros de interação.

    URLs a verificar:

    Garantir que os elementos gráficos interativos apresentam indicadores visuais claros e consistentes que permitam reconhecer facilmente a sua natureza clicável, através da forma, cor, contraste ou comportamento visual durante a interação.

  • issue #41 Elementos interativos com contraste insuficiente relativamente ao fundo

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 5.4

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

    Evidências:

    Identificámos na página incial do website Praia da Vitória, que os controlos de navegação do carrossel da secção "Notícias" apresentam uma relação de contraste de 1:1 face às imagens de fundo.
    Em algumas situações, os controlos tornam-se praticamente impercetíveis, dificultando a sua identificação e utilização pelos utilizadores. (Figura 01)

    Image

    Figura 01 — Controlo de navegação do carrossel com contraste insuficiente face à imagem de fundo.

    URLs a verificar:

    Recomendações:

    Garantir que os elementos gráficos interativos apresentam indicadores visuais suficientemente percetíveis e contrastantes, permitindo aos utilizadores identificar facilmente a sua funcionalidade de navegação.

Outras violações

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

Lista de evidências recolhidas:

  • issue #55 Outras violações - Problemas de acessibilidade herdados do iframe ODS Local

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:

    A página dos Objetivos de Desenvolvimento Sustentável incorpora conteúdo externo através de um iframe proveniente do website ODS Local. Embora os problemas identificados estejam presentes no conteúdo carregado pelo iframe, estes impactam diretamente a experiência dos utilizadores da página e devem ser considerados no âmbito da auditoria do website.

    Foram identificados os seguintes problemas de acessibilidade:

    • O foco não é movido para a caixa de diálogo quando esta é aberta.
    • O foco não fica limitado à caixa de diálogo, permitindo navegar para elementos exteriores à modal.
    • A caixa de diálogo não possui mecanismos adequados de encerramento (tecla ESC e botão de fechar).
    • Ao fechar a caixa de diálogo, o foco não regressa ao elemento que a acionou.
    • Existem múltiplas ações com o mesmo destaque visual, dificultando a identificação da ação principal.
    • As hiperligações presentes no iframe são identificadas apenas através da cor, sem indicação visual complementar.

    Destaques de alguns dos problemas:

    1. Hierarquia visual insuficiente entre ações principais e elementos informativos

    Os elementos de seleção "checkboxes" utilizam a mesma cor de destaque aplicada aos botões de ação, assim como o botão "Inserir projeto" reduzindo a diferenciação visual entre os controlos de configuração e as ações disponíveis.

    Image

    Botões "Limpar filtros", "Aplicar filtros", "Inserir projeto" e "Checkboxes" com o mesmo destaque visual.

    1. Hiperligações identificadas apenas pela cor

    Foi verificado que várias hiperligações do conteúdo carregado pelo iframe são distinguidas exclusivamente através da cor. A ausência de indicadores adicionais, como sublinhado ou alteração de estilo, dificulta a identificação dos links por utilizadores com limitações visuais ou dificuldades na perceção de cores.

    Image

    Imagem da hiperligação "AQUI" sem identificação complementar à cor.

    URL's a verificar:

    Recomendações:

    • Avaliar a necessidade de manter o conteúdo através de um iframe externo, considerando a integração direta da informação necessária no website da Câmara Municipal da Praia da Vitória.
    • Sempre que possível, disponibilizar os conteúdos dos Objetivos de Desenvolvimento Sustentável através de páginas e componentes próprios do website, permitindo um maior controlo sobre os requisitos de acessibilidade, usabilidade e manutenção.
    • Evitar a dependência de conteúdos externos quando estes apresentam problemas de acessibilidade que impactam diretamente a experiência dos utilizadores do website.
    • Caso a utilização do iframe seja indispensável, estabelecer mecanismos de monitorização e articulação com a entidade responsável pelo conteúdo para garantir a correção dos problemas identificados.

    Nota:

    A integração direta do conteúdo no website permitiria corrigir de forma mais eficaz os problemas identificados, nomeadamente os relacionados com gestão de foco em caixas de diálogo, hierarquia visual de ações e identificação de hiperligações, garantindo uma experiência de navegação mais consistente e acessível.

  • issue #54 Outras violações - Controlos de navegação permanecem ativos sem conteúdo disponível

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:

    Em certas páginas das agendas, não existe conteúdo disponível para apresentação. No entanto, os botões de navegação (avançar e recuar) permanecem visíveis, ativos e acessíveis a tecnologias de apoio.

    Além disso, não é apresentada qualquer mensagem que informe os utilizadores de que não existem concertos disponíveis. Como resultado, os utilizadores podem tentar interagir com controlos que não produzem qualquer efeito, gerando confusão e incerteza sobre o estado da página.

    Image

    Imagem da página de concertos sem conteúdo disponível.

    URL's a verificar:

    Recomendações:

    • Desativar ou ocultar os botões de navegação quando não existir conteúdo disponível.
    • Garantir que os controlos inativos não são acessíveis por teclado nem anunciados como operáveis por tecnologias de apoio.
    • Apresentar uma mensagem clara informando que não existe conteúdo disponível no momento.
    • Assegurar que o estado da interface reflete corretamente a disponibilidade de conteúdo e das ações possíveis.

  • issue #53 Outras violações - Links com destinos inválidos"

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:

    Foi identificado que a hiperligação “Contactos” presente no menu do rodapé não funciona corretamente, direcionando o utilizador para um destino inválido ou inexistente.

    Image

    Imagem da página que o link de "Contactos" do rodapé redireciona.

    No entanto, a mesma opção disponível através do menu principal encaminha corretamente para a página pretendida. Esta inconsistência pode causar confusão e dificultar o acesso à informação por parte dos utilizadores.

    Adicionalmente, a opção Concelho > Saúde > Centro de Saúde, disponível no menu principal, redireciona para um destino inválido, impedindo o acesso ao conteúdo esperado e comprometendo a experiência de navegação do utilizador.

    Image

    Imagem da página que o link de "Centro de Saúde" do menu principal redireciona.

    URL's a verificar:

    Recomendações:

    • Corrigir o destino da hiperligação “Contactos” presente no rodapé.
    • Corrigir o destino da hiperligação “Centro de Saúde” presente no menu principal.
    • Garantir que links com o mesmo nome e finalidade direcionam para o mesmo destino em todo o website.
    • Validar periodicamente a existência de links inválidos ou quebrados para assegurar uma experiência de navegação consistente.

Significado das etiquetas utilizadas