Relatório Avaliação de Candidatura
PRR - Comunidade Intermunicipal da Região de Aveiro (sítio Web institucional)

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

Lista de evidências recolhidas:

• evidência: issue #93 Não é possível identificar qual opção está com foco pelo teclado

  etiqueta: R 1.2etiqueta: melhoriaetiqueta: chk 10 web

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

  • Ver requisito 1.2 da lista 10 aspetos

  Descrição do problema

  Ao navegar pelas opções do menu utilizando o teclado, através das teclas TAB e SHIFT + TAB, não é perceptível a posição actual do utilizador. Tal acontece porque a propriedade responsável por definir o estilo geral do contorno do foco se encontra com transparência, e os elementos no estado :focus não possuem um estilo definido para essa propriedade. Para além disso, as opções do menu quando estão em foco estão com um estilo que torna a sua leitura ilegível.

  

  Não é visível qual botão de subopção do menu está em foco

  Sugestão de correção

  • Definir um estilo visível para o contorno dos elementos interativos, utilizando à propriedade outline em CSS.
  • Outra alternativa, é manter o comportamento nativo dos navegadores, procedendo à remoção dos atributos de contorno actualmente definidos em CSS.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #66 Há imagens com textos alternativos incorretos

  etiqueta: NOKetiqueta: R 5.1etiqueta: chk 10 web

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

  Evidências:

  • Há imagens informativas que não possuem um texto alternativo.

  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.

  

  Figura 1 - Imagens consideradas decorativas com texto alternativo incorreto

  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.

  URLs a verificar

  • (1) NOK https://www.regiaodeaveiro.pt/comunicacao/noticias
  • (2) NOK https://www.regiaodeaveiro.pt/municipios/agueda
  • (3) NOK https://www.regiaodeaveiro.pt/comunicacao/noticias/noticia/carminho-julia-pinheiro-e-martim-sousa-tavares-no-cineteatro-alba (Imagens que complementam o conteúdo sem texto alternativo - Rever em todas as Notícias)

  Recomendações

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

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

Lista de evidências recolhidas:

• evidência: issue #68 Problemas de contraste para texto normal

  etiqueta: melhoriaetiqueta: R 6.1etiqueta: chk 10 web

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

  Notas gerais

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

  Evidências:

  • (1) NOK. https://www.regiaodeaveiro.pt/pages/308
  • (2) Melhoria. https://www.regiaodeaveiro.pt/

  Nota de auditoria

  • a evidência (1) revela que o * dos campos obrigatórios com cor #FF6C79 não cumpre o requisito pois possui rácio de contraste inferior em relação ao plano de fundo (#FFFFFF)

  

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

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #80 A língua da narração/áudio é diferente do idioma do site

  etiqueta: NOKetiqueta: R 7.2etiqueta: chk 10 web

  Descrição do Problema

  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.

  No vídeo Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional, disponível na páginaAqua-add, a narração e as entrevistas estão em inglês. Isto pode constituir um obstáculo para pessoas que não são fluentes em inglês.

  Sugestão de Correção

  Recomendamos que seja adicionada uma transcrição da narração em português junto do vídeo.

  Exemplo de Conteúdos que Necessitam de Correções

  • Vídeo Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional, na página Aqua-add, do site da Comunidade Intermunicipal da Região de Aveiro.

  

  Figura - Vídeo Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional, presente na página Aqua-add, onde a narração e as respostas às entrevistas estão em inglês.

• evidência: issue #78 As legendas fornecidas pelos vídeos são automáticas

  etiqueta: NOKetiqueta: R 7.2etiqueta: chk 10 web

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

  Descrição do Problema
  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.

  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.

  Sugestão de Correção
  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.

  Exemplo de Conteúdos que Necessitam de Correções

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

  

  Figura 1 - Vídeo Aqua-add – Potenciar o Valor Acrescentado da Água no Desenvolvimento Local e Regional, na página Aqua-add, com legendas automáticas.

  

  Figura 2 - 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., com legendas automáticas.

  

  Figura 3 - 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, com legendas automáticas.

• evidência: issue #77 Não existe audiodescrição do vídeo

  etiqueta: melhoriaetiqueta: R 7.2etiqueta: chk 10 web

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

  Descrição do Problema
  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.
  Verificámos que os vídeos Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer, na página Território não tem audiodescrição.

  Sugestão de Correção
  Recomendamos que seja adicionada uma audiodescrição ao vídeo em causa.

  Exemplo de Conteúdos que Necessitam de Correções

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

  

  Figura - Vídeo Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer, na página Território, sem audiodescrição.

• evidência: issue #76 Não existe audiodescrição do vídeo

  etiqueta: NOKetiqueta: R 7.2etiqueta: chk 10 web

  Descrição do Problema
  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.

  Verificámos que o 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, não contém uma audiodescrição do conteúdo.

  Sugestão de Correção
  Recomendamos que sejam adicionadas audiodescrições ao vídeo em questão.

  Exemplo de Conteúdos que Necessitam de Correções

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

  

  Figura - 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, sem audiodescrição do conteúdo.

• evidência: issue #75 Não há legendas nos reprodutores de multimédia

  etiqueta: melhoriaetiqueta: R 7.2etiqueta: chk 10 web

  Descrição do Problema

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

  Verificámos que, no vídeo Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer, localizado na página Território, não existem legendas nem transcrição textual dos conteúdos.

  Sugestão de Correção

  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.

  Exemplo de Conteúdos que Necessitam de Correções

  • Vídeo Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer, na página Território.

  

  Figura - Vídeo Ria de Aveiro Começa em Mim - Vídeo genérico/Trailer, da página Território, sem legendas disponíveis.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #89 Existem elementos que estão a ser lidos apenas pelos leitores de ecrã

  etiqueta: NOKetiqueta: R 8.2etiqueta: chk 10 web

  Quando se retira a CSS, a informação aparece numa ordem lógica.
  – ver requisito 8.2 na lista 10 aspetos

  Descrição do problema

  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.

  Por exemplo, nas páginas internas é apresentada um campo de pesquisa "interno" na qual se verifica a existência de um input do tipo type="image". Esta construção é válida, uma vez que este tipo de input é semelhante a um botão do tipo submit. No entanto, existe uma label associada a este input, o que é incorreto, sendo essa label visível apenas para leitores de ecrã gerando leitura duplicada das etiquetas:

  

  _Campo de pesquisa estruturado com o botão do tipo input type="image" e com uma label visível aos leitores de ecrã (alteramos manualmente para fins de teste)

  

  Leitor de ecrã anuncia a label que está visível apenas para tecnologias de apoio

  Sugestão de correção

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

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #117 Existem conteúdos que não estão sendo agrupados em uma lista

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

  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:
  Os links "Consulte aqui a Estratégia de Desenvolvimento Local", "Consulte aqui a ficha de projeto" e "Consulte aqui os avisos abertos" não estão sendo agrupados dentro de uma lista ul li:

  

  URLs a verificar

  • https://www.regiaodeaveiro.pt/institucional/parcerias-e-representacoes/poi/desenvolvimento-rural-integrado-na-regiao-de-aveiro

  Recomendações:

  • Os links devem estar agrupados dentro de uma lista ul li.

• evidência: issue #88 Existem elementos interativos (links, botões) estruturados com a tag div

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

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

  Descrição do problema

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

  Por exemplo, no website da Comunidade Intermunicipal da Região de Aveiro foram identificados modais cujas opções de voltar, avançar e fechar se encontram estruturadas como div:

  

  Opções de avançar, voltar e fechar modal estão estruturadas como divs

  Sugestão de correção

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

• evidência: issue #86 O chatbot e o componente de contactos/fale connosco não estão estruturados de forma apropriada

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

  Descrição do problema

  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 div em vez de elementos nativos do HTML.

  Por exemplo, no website da Comunidade Intermunicipal da Região de Aveiro, onde é possível identificar a opção de contactos apresentado no rodapé que está construído com divs. Isso faz com que o componente não seja acessível através do teclado nem por leitores de ecrã:

  

  Componente fixo está construído como div no website Comunidade Intermunicipal da Região de Aveiro

  Sugestão de correção

  • Devem rever os componentes flutuantes no rodapé, como contactos/fale connosco.
  • Devem garantir que a opção de contactos 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.

• evidência: issue #69 O leitor de ecrã identifica mais opções do que é apresentado visualmente no carrossel

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

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

  O carrossel existente na secção “Notícias” da página inicial da Região de Aveiro apresenta mais elementos aos leitores de ecrã do que aqueles que aparecem visualmente, de cada vez.

  

  Recomendamos que os itens 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.

  Para mais informações é possível consultar os artigos Carousel Structure e Carousel (Slide Show or Image Rotator) Pattern do W3C.

• evidência: issue #56 Carrosséis que exibem conteúdos automaticamente e não permitem pausar

  etiqueta: NOKetiqueta: R 8.3etiqueta: chk 10 web

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

  Descrição do problema:

  O carrossel presente na página inicial da Região de Aveiro (secção notícias) não permite pausar a passagem dos elementos.

  

  Para além disso, não informam quantos itens fazem parte do carrossel,
  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.

  

  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.
  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
  Para mais informações é possível consultar os artigos Carousel Structure e Carousel (Slide Show or Image Rotator) Pattern do W3C.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #64 O foco não é direcionado para dentro da modal

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

  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

  Descrição do Problema
  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.
  Na página Galerias de Imagens, quando o utilizador seleciona uma das imagens colocadas logo abaixo do título de nível 1(“Galeria de Imagens”), é aberta uma janela modal. No entanto, o foco não é automaticamente direcionado para o seu conteúdo.

  Sugestão de Correção
  Recomendamos ajustar o foco para que, ao abrir a modal, o cursor seja automaticamente direcionado para o primeiro elemento interativo dentro da modal.

  Exemplo de Conteúdos que Necessitam de Correções

  • Modal que é aberta ao selecionar qualquer imagem da galeria da página Galerias de Imagens

  

  Figura - Teste da modal da página Galerias de Imagens através do leitor de ecrã NVDA. Quando a modal é aberta, o foco não é direcionado para o conteúdo que está dentro da modal.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #63 O foco não está limitado à modal

  etiqueta: N/Aetiqueta: chk 10 webetiqueta: 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

  Descrição do Problema

  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.

  Na página Galerias de Imagens, quando o utilizador seleciona uma das imagens da galeria (localizadas logo abaixo do título de nível 1), é aberta uma janela modal. No entanto, mesmo quando esta modal está aberta, o leitor de ecrã continua a percorrer o restante conteúdo da página que se encontra por baixo da janela de modal.

  Sugestão de Correção

  Recomendamos que ao utilizar o teclado ou leitor de ecrã, o foco seja limitado apenas para o conteúdo da janela de modal. Enquanto a modal estiver aberta, a navegação por outras opções do website não deve ser possível.

  Exemplo de Conteúdos que Necessitam de Correções

  • Modal que é aberta ao selecionar qualquer imagem da galeria da página Galerias de Imagens

  

  Figura - Teste com o leitor de ecrã NVDA. Na modal da página Galerias de Imagens, quando a modal está aberta, continua a ser possível percorrer com o leitor de ecrã o restante conteúdo da página que está por baixo da modal.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #60 O elemento para fechar a modal não possui um texto alternativo

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

  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

  Descrição do Problema
  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.
  Na página Galerias de Imagens, o elemento utilizado para fechar a janela modal não possui texto alternativo.

  Sugestão de Correção
  Recomendamos rever este elemento de forma a assegurar que tem um texto alternativo associado que descreva de forma clara e inequívoca a sua função – por exemplo, “Fechar a janela de modal”.

  Exemplo de Conteúdos que Necessitam de Correções

  • Modal que é aberta ao selecionar qualquer imagem da galeria da página Galerias de Imagens

  

  Figura - Teste da modal da página Galerias de Imagens através do leitor de ecrã NVDA. O elemento para fechar a modal não tem um texto alternativo associado. A leitura que é feita pelo leitor de ecrã deste elemento está destacada através de um retângulo de borda preta.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #58 O foco é perdido quando a janela modal é fechada

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

  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

  Descrição do Problema
  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.
  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.

  Na página Galerias de Imagens, quando o utilizador seleciona uma das imagens da galeria (localizadas logo abaixo do título de nível 1), é aberta uma janela modal. Quando se fecha esta janela de modal, o foco não retorna para o elemento que a acionou.

  Sugestão de Correção
  Recomendamos reverem as modais de forma a garantir que, quando a janela de modal é fechada, o foco retorna ao elemento interativo que a acionou.

  Exemplo de Conteúdos que Necessitam de Correções

  • Modal que é aberta ao selecionar qualquer imagem da galeria da página Galerias de Imagens

  

  Figura - Teste com o leitor de ecrã NVDA na modal da página Galerias de Imagens. Ao fechar a janela de modal, o foco do leitor perde-se.

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

Lista de evidências recolhidas:

• evidência: issue #46 O website apresenta um glossário com as siglas e termos complexos

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

  Verifica-se no website a existência de um glossário com termos e siglas complexas:

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #14 Existem elementos interativos acionados apenas com a passagem do rato (hover)

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

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

  Notas gerais

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

  Evidências:

  • (1) NOK. https://www.regiaodeaveiro.pt/

  Nota de auditoria

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

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #13 Os elementos interativos têm uma dimensão mínima de 44px

  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

  Notas Gerais

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

  Evidências:

  • (1) NOK. https://www.regiaodeaveiro.pt/

  Nota de auditoria

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

  

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #28 Formulários curtos disponíveis no website

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

  Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas.
  – ver requisito 1.2 na lista Transação

  Verifica-se que os formulários do website possuem tamanho menor que 2 ecrãs. Como por exemplo o formulário de Sugestões / Reclamações / Elogios:

  

  Atenção: embora o tamanho do formulário seja conforme recomendado ele está sendo apresentado de forma duplicada. Devem remover um dos formulários.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #27 Formulários grandes revelam mecanismo de navegação por passos

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

  Os formulários com mais de uma página têm a sequência de passos ilustrada.
  – ver requisito 1.3 na lista Transação

  Não foi identificado no website formulários segmentado por etapas. Por esse motivo, consideramos o critério como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #25 Uso de revelação progressiva em vez de campos (opções) inativas

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

  Não foi identificado no website formulários que utilizem uma revelação progressiva dos campos. Por esse motivo, consideramos o critério como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #21 O Sucesso do envio/submissão da informação é confirmada

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

  Verifica-se que no formulário de Sugestões / Reclamações / Elogios é possível localizar a mensagem de sucesso de envio do formulário:

  
  

  No entanto, assim que a mensagem de confirmação é apresentada, esta não é anunciada automaticamente pelo leitor de ecrã. Como consequência, o utilizador tem de a procurar manualmente e, durante essa navegação, verifica-se que o foco do leitor de ecrã é alterado: em vez de permanecer no botão “Submeter”, é reposicionado no cabeçalho:

  

  Leitor de ecrã não anuncia automaticamente a mensagem de confirmação de envio mesmo já sendo apresentado no ecrã

  

  O primeiro foco do leitor de ecrã é no cabeçalho h1 da página

  Recomendamos que a mensagem de erro seja anunciada automaticamente pelo leitor de ecrã.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #19 As ações destrutivas nunca devem ser permanentes

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

  Não foi identificado no website formulários que permitem realizar ações destrutivas. Por esse motivo, consideramos o critério como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #116 Existência de mensagens de erro não associadas programaticamente aos respetivos campos

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

  As mensagens de erro são claramente identificadas junto aos campos de origem.
  – ver requisito 4.3 na lista Transação

  Evidências:
  No Formulário Caixa de Contacto, a mensagem de erro correspondente à checkbox “Li e aceito a política de privacidade” não foi associada programaticamente ao campo:

  

  Mensagem de erro não associada programaticamente à checkbox “Li e aceito a política de privacidade”

  O mesmo acontece na checkbox “Aceito que o sistema me envie e-mails de resposta à presente submissão” do formulário Sugestões / Reclamações / Elogios:

  

  Mensagem de erro não associada programaticamente à checkbox “Aceito que o sistema me envie e-mails de resposta à presente submissão”

  Recomendações:
  Recomendamos a associação programática de todas as mensagens de erro aos respetivos campos da mesma forma que já foi feito relativamente aos restantes campos desses formulários (utilização do atributo aria-describedby com o id do contentor da mensagem de erro e do atributo aria-invalid com o valor true, ambos em cada campo a corrigir).

• evidência: issue #18 As mensagens de erro são claramente identificadas junto aos campos de origem

  etiqueta: melhoriaetiqueta: R 4.3etiqueta: chk transação

  Verifica-se que no formulário de Sugestões / Reclamações / Elogios está sendo apresentado mensagens de erro junto ao campo do formulário que estão associadas ao seu respectivo campo. Para além disso, é apresentado uma lista sumário com as mensagens de erro no topo do formulário:

  

  No entanto, quando clicamos na opção "Mensagem" da lista sumário verifica-se que o foco não está sendo posicionado corretamente no seu respetivo campo e que precisa ser corrigido: