Relatório Avaliação da Candidatura da Entidade Nacional para o Sector Energético ENSE-EPE

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

Lista de evidências recolhidas:

• evidência: issue #4 O leitor de ecrã não reconhece o menu principal como uma lista

  etiqueta: R 1.1etiqueta: melhoriaetiqueta: chk 10 web

  O menu de navegação deve estar estruturado como uma lista de opções.
  Ver requisito 1.1 da lista 10 aspetos

  O menu principal está corretamente estruturado com as etiquetas HTML ul e li. No entanto, o leitor de ecrã não o reconhece como uma lista de opções. Isto deve-se ao facto de, por motivos de estilização, ter sido aplicado o atributo list-style="none", o que faz com que alguns leitores de ecrã deixem de identificar o conteúdo como lista, já que o seu estilo visual foi removido:

  

  Uso do atributo list-style="none" no CSS

  

  A lista identificada pelo leitor de ecrã é a lista que está sendo apresentada a seguir do banner principal, com as opções de reservas petrolíferas, mercado de combustíveis, energia elétrica e renovável, gás natural e biocombustíveis

  Recomendamos que o menu principal seja colocado dentro de uma landmark nav, para que seja corretamente identificado como lista e reconhecido como elemento de navegação do website.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: R 1.2etiqueta: NOKetiqueta: 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

  Verificamos que as hiperligações do menu principal não se alteram visualmente quando estão em foco navegadas pelo teclado. Embora o navegador indique o caminho da url, não é possível identificar a sua posição nas urls denominadas como #:

  

  Opção FAQ indicada pelo navegador no canto esquerdo inferior do ecrã

  

  Opção de apoio ao cidadão está sendo informada como "#"

  

  Opção de legislação está sendo informada como "#"

  Isso acontece porque o contorno do foco está sendo escondido via CSS:

  

  _ CSS com estilo outline: 0 !important;_

  Recomendamos que a propriedade outline seja habilitada na folha de estilo.

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

  etiqueta: melhoriaetiqueta: R 1.2etiqueta: 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

  Não é possível distinguir visualmente quais opções do menu contém subopções:

  

  "Rede estratégica", "FAQ", "Conferência", "12 causas" são as únicas opções que não contém subopções

  Recomendamos que seja utilizado uma sinalética visual, como por exemplo, uma seta (▾ ▴) para indicar as opções que contém subopções.

• evidência: issue #5 Não é possível identificar quando o menu está aberto ou fechado com o leitor de ecrã

  etiqueta: R 1.2etiqueta: NOKetiqueta: 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

  Quando navegamos com o leitor de ecrã pelas opções do menu principal, não é possível identificar quando uma opção está fechada. A informação "Pop-up de menu" está sendo transmitida pelo atributo aria-haspopup. O uso do aria-haspopup é feito em conjunto com outros atributos ARIA quando se deseja implementar widgets de menu. No caso do menu de um website, que é uma navegação a base de links, o uso desse atributo não é recomendado para além de não informar corretamente quando o menu está aberto ou fechado:

  

  Menu fechado: leitor de ecrã anuncia popup de menu

  

  Menu aberto: leitor de ecrã anuncia popup de menu

  Recomendamos rever o menu principal para garantir que esteja corretamente construído. Para isso, é necessário remover o atributo aria-haspopup e implementar no código um evento/script que permita ao atributo aria-expanded mostrar ou esconder as subopções.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #8 Não existem imagens-link no menu

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

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

  • Ver requisito 1.3 da lista 10 aspetos

  O menu principal não possui imagens-link.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #9 Existem páginas que não possuem o h1

  etiqueta: R 2.1etiqueta: NOKetiqueta: chk 10 web

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

  • Ver requisito 2.1 da lista 10 aspetos

  Na página inicial, o cabeçalho h1 está a ser ocultado através de CSS, utilizando a propriedade display: none

  

  Recomendamos rever as páginas listadas abaixo para garantir que o cabeçalho h1 esteja corretamente atribuído ao título principal de cada página e que não se encontra oculto através de CSS:

  • https://www.ense-epe.pt/
  • https://www.ense-epe.pt/communicated/
  • https://www.ense-epe.pt/en/
  • https://www.ense-epe.pt/eventos/
  • https://www.ense-epe.pt/news/
  • https://conferencia.ense.pt/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #10 A hierarquia da marcação de títulos não está a ser respeitada

  etiqueta: NOKetiqueta: chk 10 webetiqueta: 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

  Na página ENSE assegura continuidade da Acreditação na área da Fiscalização existe um salto do cabeçalho h1 para o h6:

  

  Salto do cabeçalho h1 para h6

  Devem garantir que não existam saltos entre a hierarquia de cabeçalhos, o que implica:

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

  É necessário corrigir as seguintes páginas:

  • https://www.ense-epe.pt/news/ense-assegura-renovacao-da-acreditacao-na-area-da-fiscalizacao/
  • https://www.ense-epe.pt/news/ense-e-gnr-intercetam-70-cisternas-de-combustivel-em-megaoperacao-nas-fronteiras-com-espanha/
  • https://www.ense-epe.pt/news/ense-participa-nos-trabalhos-europeus-sobre-infraestruturas-criticas-contribuindo-para-reforcar-a-seguranca-energetica-no-setor-da-defesa/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #11 Existem tabelas com o cabeçalho th oculto

  etiqueta: R 3.1etiqueta: NOKetiqueta: chk 10 web

  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

  Na página inicial, é possível encontrar tabelas cujo elemento está a ser ocultado pelas tecnologias de apoio devido a regras de CSS:

  

  Tabela com o th oculto via CSS

  Recomendamos rever as páginas listadas abaixo para garantir que as tabelas tenham o th visível:

  • https://www.ense-epe.pt/
  • https://www.ense-epe.pt/en/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #12 Não existe um título <caption> na tabela

  etiqueta: R 3.2etiqueta: NOKetiqueta: chk 10 web

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

  Na página inicial existem tabelas cujo caption está sendo oculto através do CSS através do display:none:

  

  O caption está oculto via CSS

  

  ANDI identifica várias tabelas sem título

  Recomendamos a revisão das tabelas presentes no website, de forma a garantir que a legenda (caption) permaneça sempre visível para as tecnologias de apoio. Para tal, devem evitar ocultá-la através de CSS.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #13 O texto placeholder está a substituir a label no campo da newsletter e o de pesquisa

  etiqueta: R 4.1etiqueta: NOKetiqueta: chk 10 web

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

  O campo de subscrição da newsletter, presente na página inicial, não possui uma etiqueta associada. Atualmente, está a ser utilizado apenas o placeholder 'E-mail' como indicação do conteúdo esperado:

  

  Campo da newsletter possui apenas placeholder preenchida como email

  Isso também está a acontecer com o campo de pesquisa, que está localizado no menu principal do website:

  

  Campo de pesquisa possui apenas placeholder e title preenchida como "Procurar por..." e "Escreva aqui o que procura"

  Recomendamos que o campo seja estruturado com uma label, devidamente associada ao respetivo campo através dos atributos for e id.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #14 O campo de seleção política de privacidade não é identificado como obrigatório

  etiqueta: R 4.2etiqueta: NOKetiqueta: chk 10 web

  É 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

  Na página inicial e na de Newsletter, não é possível subscrever o email sem aceitar previamente a Política de Privacidade. Por este motivo, a aceitação das políticas constitui um campo de seleção obrigatório que não está sendo informado tanto visualmente como programaticamente para os leitores de ecrã:

  

  Não é possível identificar que o campo de política de privacidade é um campo de seleção obrigatório pelo leitor de ecrã e visualmente

  Recomendamos que revejam o campo de seleção para garantir que este seja identificado como obrigatório. Para tal, é necessário que a interface apresente essa indicação de forma visível, podendo fazê-lo através do uso de um asterisco (*) ou adicionando a menção “(obrigatório)” junto à respetiva etiqueta (label). Caso optem pela utilização do asterisco, devem incluir no topo do formulário uma nota a explicar o seu significado.

  Para que a caixa de seleção seja igualmente reconhecida como obrigatória pelas tecnologias de apoio, é necessário incluir o atributo required.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #15 A mensagem de erro não está próxima ao respectivo campo

  etiqueta: R 4.3etiqueta: NOKetiqueta: chk 10 web

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

  Na página inicial e na página da Newsletter, a mensagem de erro é exibida estruturalmente depois do botão de submeter. Este comportamento pode gerar confusão, uma vez que os utilizadores esperam que o feedback sobre o erro surja junto ao campo que necessita de correção. Além disso, como a mensagem não está associada diretamente ao respetivo campo, a sua localização pode não ser imediatamente evidente, dificultando a compreensão do que deve ser ajustado:

  

  Estruturalmente a mensagem de erro está posicionada depois do botão submeter e não após o campo input

  

  Mensagem de erro não está associada ao campo

  Recomendamos rever a mensagem de erro para garantir que está corretamente posicionada no formulário da newsletter. A mensagem deverá surgir imediatamente após o respetivo campo, de modo a ser o próximo elemento lido a seguir a esse campo. Essa correção deverá ser feita tanto na página Newsletter como na página inicial do website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #21 Existem imagens que possuem um texto alternativo incorreto

  etiqueta: R 5.1etiqueta: NOKetiqueta: chk 10 web

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

  Na página de Ajuda que move crianças e profissionais em Famalicão existem imagens que quando estão ampliadas possuem o texto alternativo descrito como "nothing":

  

  Texto alternativo das imagens ampliadas além de serem iguais está descrito como alt="nothing"

  Recomendamos rever as imagens da página Ajuda que move crianças e profissionais em Famalicão para garantir que estas recebam um texto alternativo apropriado.

• evidência: issue #19 Existem logotipos que possuem um texto alternativo incorreto

  etiqueta: R 5.1etiqueta: NOKetiqueta: chk 10 web

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

  Os logótipos apresentados no topo do website possuem texto alternativo preenchido de forma inapropriada, como por exemplo, o uso incorreto do termo logo no texto alternativo:

  

  alt="ense_ logo", alt="republica_portuguesa_logo", alt="Logo Ipac"_

  Na página Entidades Congéneres existem vários logótipos que estão com texto alternativo inapropriado pois está sendo preenchido com o nome do país e não com o nome da respectiva entidade:

  

  Texto alternativo preenchido como "Alemanha" ao invés de EBV – Erdölbevorratungsverband

  Recomendamos rever os logotipos da página Acreditação e os que estão sendo apresentado no topo do website, para garantir que o termo "Logo" não faça parte do seu texto alternativo.

  Na página de Entidades Congéneres é necessário que o texto alternativo corresponda ao nome da entidade que possui o logótipo.

• evidência: issue #18 Há imagens decorativas com texto alternativo incorreto

  etiqueta: melhoriaetiqueta: 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

  Na página inicial existem imagens decorativas que estão a ser preenchidas com texto alternativo. Como estas imagens não transmitem informação relevante para o utilizador, a presença de texto alternativo desnecessário provoca ruído durante a navegação com o leitor de ecrã:

  

  Imagens de fundo apresentadas no banner estão com texto alternativo preenchido ao invés de serem nulos (alt="")

  Isto verifica-se igualmente noutras páginas do website. Por exemplo, na página 12 Causas existe uma imagem de carácter exclusivamente decorativo que está a ser preenchida com o texto alternativo “12 causas”:

  

  Imagem com texto alternativo preenchido ao invés de ser nulo (alt="")

  Na página Acreditação existem cards que possuem imagens com texto alternativo preenchido:

  

  Imagens dos cards com texto alternativo preenchido ao invés de serem nulos (alt="")

  Para evitar que o leitor de ecrã repita desnecessariamente a mesma informação, recomendamos que as imagens dos cards e todas as imagens de carácter puramente estético, que não transmitam qualquer informação relevante ao utilizador, sejam marcadas como decorativas. Nestes casos, deve ser utilizado texto alternativo nulo, da seguinte forma: alt="".
  Em alternativa, pode optar por integrar estas imagens através de CSS.

• evidência: issue #16 A imagem do chatbot não possuem um texto alternativo

  etiqueta: R 5.1etiqueta: NOKetiqueta: chk 10 web

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

  O chatbot que é apresentado nas páginas do website possui uma imagem que não possui texto alternativo:

  

  Recomendamos rever essa imagem para garantir que ela tenha um texto alternativo preenchido, isso pode ser feito através do atributo alt.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #82 Existem mapas/gráficos que não é possível consultar a informação pelos leitores de ecrã

  etiqueta: R 5.2etiqueta: NOKetiqueta: chk 10 web

  Na página inicial está sendo utilizado uma ferramenta externa, o PowerBI, para apresentar o Mapa dos Postos de Abastecimento:

  

  Embora o PowerBI permite visualizar a informação em tabelas, existe uma incompatibilidade entre sistema Mac vs. Windows com a tecnologia Power BI, podendo afetar as tecnologias de apoio de diferentes formas.

  Por exemplo, nota-se que o próprio recurso "Show data" não está funcionando corretamente, ao ativar a funcionalidade com o NVDA a informação apresenta-se em forma de tabela mas o NVDA não consegue percorrer os elementos da página. O conteúdo do mapa não pode ser consultado de outra forma e por esse motivo o critério está a chumbar.

  ---

  Adicionalmente, importa salientar que a utilização do PowerBI evidencia outros problemas críticos de acessibilidade, nomeadamente a apresentação de informação em tabelas sem a devida utilização de caption, bem como a ausência de um cabeçalho de nível H1 na página, entre outros aspetos relevantes.

  Neste sentido, recomendamos que seja evitada a utilização desta ferramenta, uma vez que garantir a acessibilidade da informação implica um esforço significativo e a posse de conhecimentos especializados na plataforma, de forma a assegurar que estes e outros pontos críticos são devidamente identificados e corrigidos.

• evidência: issue #20 Não é possível entender o agrupamento do fluxograma pelo leitor de ecrã

  etiqueta: R 5.2etiqueta: NOKetiqueta: chk 10 web

  Na página Quem somos, existe um fluxograma cujo conteúdo pode ser lido através do leitor de ecrã. No entanto, verifica-se que a leitura realizada pelo leitor de ecrã não corresponde à disposição visual apresentada, isso faz com que não seja possível relacionar o conteúdo com os seus respectivos grupos. Por exemplo, não é claro a qual grupo pertencem os subgrupos de "Dep. Reservas Estratégicas", "Dep. Estudos e Acompanhamento" (pertencem a Unidade de Reservas Petrolíferas):

  

  Não é possível identificar a que grupo pertencem os subgrupos de "Dep. Reservas Estratégicas", "Dep. Estudos e Acompanhamento" porque estruturalmente no HTML estão em ordem de leitura diferentes

  Recomendamos que reveja o fluxograma para garantir que a leitura permite identificar claramente o agrupamento dos diferentes grupos, tal como é perceptível na representação visual. Uma opção seria utilizar a descrição longa que está sendo apresentada nas resoluções menores (tablet e mobile), pois ela está estruturada como lista permitindo entender o agrupamento das informações.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #72 Existem imagens-link que não possuem texto alternativo

  etiqueta: NOKetiqueta: chk 10 webetiqueta: R 5.3

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

  Na página Braga recebe energia solidária para apoiar a saúde mental existem imagens-link que não possuem texto alternativo preenchido:

  

  Leitor de ecrã anuncia o nome da imagem ao invés do nome acessível

  

  Estruturalmente a imagem-link não possui texto alternativo alt preenchido

  É necessário rever todas notícias que estão apresentadas em 12 causas para garantir que as imagens-links apresentadas na secção galeria possuem um texto alternativo apropriado.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #35 O texto normal não tem contraste suficiente

  etiqueta: NOKetiqueta: 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

  Na página de Perguntas Frequentes, existem acordeões que possuem títulos com contraste abaixo do recomendado quando não recebem o foco:

  

  Contraste abaixo do recomendado (1:1)

  Existem outros locais cujo contraste está abaixo do recomendado, como por exemplo, na página de Comunicados o contraste dos números da paginação está abaixo do recomendado:

  

  Contraste dos números abaixo do recomendado (2,41:1)

  Recomendamos rever o texto dos acordeões para garantir que o seu título e texto tenham contraste, de no mínimo, 4,5:1.

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

Lista de evidências recolhidas:

• evidência: issue #36 Os textos grandes possuem contraste acima do recomendado, mas alguns textos possuem contraste abaixo do recomendado no estado hover

  etiqueta: melhoriaetiqueta: R 6.2etiqueta: chk 10 web

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

  Os textos considerados grandes estão com contraste acima do recomendado:

  

  No entanto, existem locais que quando estão no estado :hover possuem contraste abaixo do recomendado, por exemplo, os cards na página Mercado de Combustíveis :

  

  Contraste abaixo do recomendado 2,4:1

  Recomendamos rever os textos para garantir que o contraste esteja acima do recomendado em diferentes estados :hover, :focus

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: R 7.2etiqueta: NOKetiqueta: chk 10 web

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

  Na página de Colaboradores da ENSE participam em dádiva voluntária de sangue é possível ligar e desligar a legenda dos vídeos, no entanto, a legenda fornecida é automática, sendo necessário inserir uma legenda fechada para o vídeo:

  

  _Legenda automática incorreta diz: Voluntários de sangue Jun os seus colaboradores numa causa que salva ao invés de junta os ... _

  Recomendamos rever todos os vídeos do website para garantir que seja incluído uma legenda fechada para cada vídeo, caso a legenda gerada automaticamente esteja boa ela pode ser reaproveitada para gerar uma nova transcrição do conteúdo.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #25 A ordem visual não corresponde a ordem de navegação com o leitor de ecrã no menu principal

  etiqueta: NOKetiqueta: chk 10 webetiqueta: R 8.2

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

  Ao navegar pelo menu utilizando leitores de ecrã, verifica-se que a ordem de leitura não corresponde à disposição visual (da esquerda para a direita). Como resultado, perde-se parte do contexto relativamente à informação “Amarelo”, uma vez que a etiqueta “Nível de risco” é anunciada apenas após o respetivo valor:

  

  Leitor de ecrã percorre o logótipo ENSE -> logótipo República Portuguesa -> Balcão Único -> Amarelo -> Nível de risco

  

  Quando desliga o CSS a ordem de navegação está de acordo com a estrutura no HTML

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #33 Acordeão está estruturado de forma inapropriada

  etiqueta: R 8.3etiqueta: NOKetiqueta: 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

  A informação sobre o nível de risco apresentada no topo do website surge num tooltip que contém detalhes relativos ao nível amarelo. No entanto, este conteúdo apenas pode ser acedido através do rato. Não é possível visualizar a informação utilizando o teclado e, quando se utiliza um leitor de ecrã, é apenas anunciado “amarelo” como texto simples, sem indicar que existe conteúdo adicional associado:

  

  Conteúdo da tooltip quando acionada pelo rato

  

  Leitor de ecrã anuncia como um texto

  

  Estruturalmente está sendo construída com divs genéricas

  Recomendamos rever o acordeão apresentado para garantir que esteja acessível pelo rato, leitor de ecrã e teclado. Para isso, recomendamos estruturar como um botão e utilizar o atributo aria-expanded para informar que está fechado. É necessário alterar o nome "Amarelo" pois não informa com clareza a sua função. Uma possível sugestão seria "Nível de risco: amarelo".

• evidência: issue #32 Os acordeões e tabulador não estão estruturados de forma apropriada

  etiqueta: R 8.3etiqueta: NOKetiqueta: 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

  Na página de Perguntas Frequentes, os acordeões actualmente apresentados não indicam correctamente a sua função nem o seu estado (aberto ou fechado) aos leitores de ecrã. Isto deve-se ao facto de o componente ter sido construído com divs genéricas e não utilizar o atributo aria-expanded, que é necessário para comunicar ao leitor de ecrã quando um acordeão está aberto ou fechado;

  

  Acordeões aninhados construídos através de divs genéricas

  

  Leitor de ecrã diz que pode ser clicado mas não informa se é um link, botão e se o acordeão está aberto/fechado

  

  Exemplo de uma construção correta de um acordeão: informa o nome, estado e tipo (Billing Adress h3, compacto, botão)

  Para além disso, nota-se que os acordeões estão organizados visualmente dentro de um tabulador. No entanto, o leitor de ecrã não anuncia o número de opções disponíveis e qual delas está selecionada. Isso acontece porque não está sendo utilizado nenhuma semântica para indicar que é um tabulador:

  

  Leitor de ecrã não identifica o número de opções e não identifica qual está selecionada

  

  Não existe semântica para indicar que é um tabulador

  Recomendamos que reveja o componente apresentado no website, de modo a garantir que está construído de forma adequada. Partilhamos um exemplo de construção de um acordeão da W3C
  que, embora recorra a propriedades ARIA, permite compreender claramente quais os elementos necessários para a correta implementação de um acordeão.

  Para o tabulador recomendamos identificarem os elementos com o role="tablist", role="tab" em conjunto com os atributos aria-selected, aria-controls para garantir que a informação seja transmistida corretamente para o leitor de ecrã. Para mais informações podem consultar o exemplo de construção do TAB role.

• evidência: issue #31 Existem grupos de links que não estão estruturados como lista

  etiqueta: R 8.3etiqueta: NOKetiqueta: 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

  Na página Instrumentos de Gestão, quando desligamos o CSS percebemos que existem grupos de links que não estão sendo agrupados como uma lista ul li:

  

  Os grupo de links não estão estruturados como lista ul li

  

  Estruturalmente os links estão sendo agrupados pela tag p

  Recomendamos reverem os grupos de links que são apresentados no website para garantir que estejam agrupados através de uma lista ul li.

• evidência: issue #17 Existem elementos interativos que não estão estruturados apropriadamente

  etiqueta: R 8.3etiqueta: NOKetiqueta: 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 componente do chatbot que está sendo apresentado no website, é acessível pelo rato. No entanto, não é possível navegar com o teclado ou com leitor de ecrã através do SHIF, SHIFT+TAB e navegação por elementos com o leitor de ecrã (VO + seta esquerda / direita ou cima / baixo). Isso acontece porque ele está sendo estruturado como div ao invés de ser um botão button:

  

  Chatbot estruturado como div ao invés de ser um elemento interativo button

  Isso acontece com outros elementos, como por exemplo, o botão de pesquisa localizado no menu principal está estruturado como uma div:

  

  _Botão de pesquisar está estruturado como uma div ao invés de ser um botão

  Recomendamos, sempre que possível, a utilização de elementos nativos de HTML — como, por exemplo, a tag button — de forma a garantir total acessibilidade através do rato, do teclado e de tecnologias de apoio.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: NOKetiqueta: chk 10 webetiqueta: 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

  Na página Colaboradores da ENSE participam em dádiva voluntária de sangue, encontra-se um campo de pesquisa que, ao ser ativado, abre uma modal. No entanto, o foco não é automaticamente direcionado para o seu conteúdo:

  

  O foco não é direcionado para dentro da modal quando aberto pelo teclado e leitor de ecrã

  Recomendamos ajustar o foco para que, ao abrir a modal, o cursor seja automaticamente direcionado para dentro dele. É necessário rever todas as galerias de imagens das notícias do website.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: R 9.2etiqueta: NOKetiqueta: chk 10 web

  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

  Quando a galeria de fotos está aberta, é possível percorrer pelo conteúdo do website que se encontra abaixo dele:

  

  Foco do leitor de ecrã está no link de saltar conteúdo, mesmo com a modal aberta

  Recomendamos que ao utilizar o teclado ou leitor de ecrã, o foco seja limitado apenas para o conteúdo da modal. Enquanto a modal estiver aberta, a navegação por outras opções do website não deve ser possível. É necessário rever todas as galerias de imagens das notícias do website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #28 O botão fechar não está acessível pelo teclado ou leitor de ecrã

  etiqueta: NOKetiqueta: chk 10 webetiqueta: 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

  O botão “Fechar (x)” da janela modal não está acessível através do teclado nem do leitor de ecrã. Isto ocorre porque está a ser estruturado como uma div em vez de um elemento interativo adequado, como um botão button. Para além disso, o leitor de ecrã está a anunciá-lo como “vezes”, o que pode gerar dúvidas sobre a finalidade desse elemento:

  

  Botão fechar estruturado como tag genérica div

  

  O leitor de ecrã anuncia o botão fechar como "vezes" e identifica o fechar como sendo um texto ao invés de ser um elemento interativo

  Recomendamos estruturar os controles da modal (pausar, continuar, próximo/voltar e fechar) como elementos interativos do tipo button. É necessário garantir que o nome acessível seja claro e informe corretamente a sua função. É necessário rever todas as galerias de imagens das notícias do website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #34 Não existe um resumo do propósito do site na homepage

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

  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

  Não existe qualquer resumo do propósito na Homepage do site da ENSE, pelo que deve ser adicionado:

  

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

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #37 Não existe um glossário para termos complexos

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

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

  Não foi encontrado um glossário no website da ENSE, apesar de existirem termos específicos em várias páginas, como por exemplo, gás óleo, GPL Propano, GPL Butano, GPL auto:

  

  Recomenda-se a criação de uma página com um glossário que agregue os termos complexos e a sua definição. Pode ser utilizado como referência o glossário do site da Acessibilidade: https://www.acessibilidade.gov.pt/glossario/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #38 Existem conteúdos sem data de atualização

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 1.3

  Cada bloco de conteúdo contém a sua data de atualização.
  – ver requisito 1.3 na lista Conteúdo

  Na página Quem Somos não existe uma data de atualização:

  

  Página Quem somos não possui data de atualização do conteúdo

  Isso está a acontecer em outros locais do website, como por exemplo, o conteúdo de Redes Estratégicas além de estar sendo apresentado em PowerBI não é possível identificar a sua respectiva data de atualização:

  

  Não é possível perceber qual é a data de atualização dessa view do PowerBI

  Recomendamos rever de modo geral o website para garantir que as páginas tenham uma data de atualização. Abaixo listamos algumas que encontramos durante análise:

  https://www.ense-epe.pt/quem-somos/missao/
  https://www.ense-epe.pt/informacao-gestao/
  https://www.ense-epe.pt/quem-somos/modelo-de-governo/
  https://www.ense-epe.pt/quem-somos/protocolos/
  https://www.ense-epe.pt/fiscalizacao/atividade/
  https://www.ense-epe.pt/fiscalizacao/planos-de-fiscalizacao/
  https://www.ense-epe.pt/legislacao-reservas-petroliferas/
  https://www.ense-epe.pt/legislacao-mercado-de-combustiveis/
  https://www.ense-epe.pt/legislacao-energia-eletrica/
  https://www.ense-epe.pt/legislacao-biocombustiveis/
  https://www.ense-epe.pt/reclamacoes/
  https://www.ense-epe.pt/denuncias/
  https://www.ense-epe.pt/pedidos-de-informacao/
  https://www.ense-epe.pt/estudos-relatorios/
  https://www.ense-epe.pt/faq/
  https://www.ense-epe.pt/contactar-a-ense/

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #39 Não há referência à entidade responsável pelos conteúdos

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

  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

  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.

  Não foi encontrado o nome da entidade responsável pelo conteúdo do website:

  

  Recomendamos incluirem o nome da entidade responsável pelos conteúdo no rodapé do website. Isso pode ser feito incluindo a informação de copyright e o logotipo. Abaixo mostramos um exemplo do site do selo:

  

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #40 Existem blocos de texto com tamanho inferior a 16px

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

  O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos.
  – ver requisito 2.1 na lista Conteúdo

  Na página inicial da ENSE, existem blocos de texto com tamanho abaixo do recomendado:

  

  Conteúdo introdutório das notícias com tamanho de fonte de 14 pixels

  

  Texto de links, conteúdo das tabelas com tamanho de 14 pixels

  

  Texto dos cards com tamanho de 10 pixels

  

  Texto de aceite das políticas de privacidade com tamanho de 14 pixels

  

  Mensagens de erro com tamanho de 12 pixels na página Responsabilidade Social da ENSE

  Recomendamos uma revisão geral do website para garantir que o tamanho dos textos que são primários para a leitura do utilizador seja, no mínimo, de 16 pixels.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #41 A informação secundária tem um tamanho de letra inferior 13px

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 2.2

  A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos.
  – ver requisito 2.2 na lista Conteúdo

  Na página inicial a informação sobre "Data da última atualização" e "Preços com IVA incluído" possui tamanho abaixo do recomendado:

  

  Data da última atualização com tamanho de texto de 12pixels

  Recomendamos rever os textos que são apresentados conteúdos secundários para garantir que tenham tamanho de, no mínimo, 13.3pixels.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 2.3

  Blocos e linhas de texto com largura não superior a 100 caracteres.
  – ver requisito 2.3 na lista Conteúdo

  Na página de resultados das pesquisas, o tamanho dos blocos de texto excede o limite máximo permitido:

  

  Bloco de texto com 119 caracteres por linha

  Isso acontece em outros locais, como por exemplo nas páginas internas de notícias:

  

  Bloco de texto com 101 caracteres por linha na notícia do Dia Mundial da Energia, ENSE testemunha a transição energética em curso na capital da indústria de curtumes

  

  Bloco de texto com 117 caracteres por linha na página 12 causas

  

  Bloco de texto com 136 caracteres por linha na página Quem Somos

  Recomendamos rever todas as páginas do website para garantir que não tenham mais do que 100 caracteres por linha. Para isso, pode ser definida uma largura máxima para as caixas de texto (max-width, em CSS), para garantir que não é ultrapassado o número máximo de caracteres por linha.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #43 O espaçamento entre linhas está abaixo do recomendado

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

  O espaçamento entre linhas não é inferior a 1.5x o tamanho da letra.
  – ver requisito 2.4 na lista Conteúdo

  Na página inicial, o bloco de texto das notícias possui tamanho de 14pixels, o tamanho mínimo de altura deve ser 21pixels, no entanto, está apresenta altura de 19,6px:

  

  Espaçamento entre linhas de 19,6 pixels ao invés de ser 21 pixels

  Isso acontece em outros locais do website, como por exemplo na página Entidades Congéneres:

  

  Espaçamento entre linhas de 19,6 pixels ao invés de ser 21 pixels

  

  Espaçamento entre linhas de 22,5 pixels ao invés de ser 24 pixels

  Recomendamos reverem de modo geral o website para garantir que os blocos de texto apresentem um espaçamento entre linhas de no mínimo de 1,5 vezes o tamanho da fonte.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #44 O menu ultrapassa 9 opções no primeiro nível

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

  Nenhum nível de navegação tem mais de 9 opções.
  – ver requisito 3.1 na lista Conteúdo

  O menu principal está estruturado com 11 opções incluindo a opção de pesquisa:

  

  Menu principal possui 10 opções e inclui uma opção que seria o campo de pesquisa

  Recomendamos rever a arquitetura de informação para garantir que o menu não ultrapasse 9 opções em cada nível do mesmo. O campo de pesquisa não deve fazer parte da lista de opções ul li e, por isso, deve ser removido estruturalmente da lista de opções.

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

Lista de evidências recolhidas:

• evidência: issue #45 O menu desaparece na página de conferência

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

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

  O menu de navegação desaparece na página Conferência, o que impede o utilizador de navegar pelo site:

  

  Menu principal desaparece na página de Conferência

  Embora essa página específica faça parte de um subdomínio do website, ela está sendo apresentada como uma opção do menu principal sendo altamente recomendável ajustarem o menu de navegação para garantir que ele esteja presente em todas as páginas.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #46 As hiperligações não se diferenciam do texto envolvente além da cor

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

  As hiperligações de texto não devem ser diferenciadas apenas com base na cor.
  – ver requisito 3.3 na lista Conteúdo

  Na página da Declaração de Acessibilidade, as hiperligações não têm diferenciação do texto envolvente sendo diferenciada apenas pela cor:

  

  Não é possível diferenciar as hiperligações para além da cor na página da Declaração de Acessibilidade

  Isso acontece em outras páginas, como por exemplo, na página de Recrutamento:

  

  Não é possível diferenciar as hiperligações para além da cor na página de Recrutamento

  Recomendamos rever o estilo de todas as hiperligações do website para garantir que seja possível distingui-las com base na cor e na forma (idealmente, colocar sublinhado).

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #48 Está sendo utilizado índices em páginas de formulários de forma inapropriada

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

  Os documentos longos têm um índice no topo com hiperligações internas para o mesmo.
  – ver requisito 4.1 na lista Conteúdo

  O formulário disponível na página de Denúncias contém um índice que permite avançar diretamente para etapas posteriores do preenchimento. Contudo, esta funcionalidade pode originar problemas, uma vez que existem campos de preenchimento obrigatório desde o início do formulário. Ao utilizar o índice para saltar etapas, o utilizador poderá inadvertidamente omitir esses campos obrigatórios, o que não é recomendável:

  

  Índice possibilita um salto para a secção "Descrição" do formulário, mesmo que os primeiros campos sejam obrigatórios

  Recomendamos removerem índices que saltam entre o preenchimento dos campos do formulário, de modo a evitar possíveis erros de preenchimento.

• evidência: issue #47 O índice contém hiperligações que não direcionam para nenhuma secção

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

  Os documentos longos têm um índice no topo com hiperligações internas para o mesmo.
  – ver requisito 4.1 na lista Conteúdo

  Na página Instrumentos de Gestão, é apresentado um índice para consultar o conteúdo. No entanto, os links 1.4.1 *Documentos em aprovação nas tutelas, 1.4.0.2 e 1.4.0.1 *Documentos em aprovação nas tutelas não remetem para nenhuma secção da página:

  

  Os subitens do 1.4 não direcionam para nenhuma página

  

  Visualmente não existe nenhuma secção depois de Informação Financeira

  Recomendamos rever o índice que está sendo apresentado no website para garantir que ele direcione apenas para secções existentes na página.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #50 Existem elementos interativos que são acionados apenas com a passagem do rato

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

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

  Na página inicial é apresentado um indicador do nível de risco. Quando o cursor do rato passa sobre esse indicador, surge uma descrição com o respetivo significado. No entanto, esta informação não é acessível através do teclado nem é lida por tecnologias de apoio, como leitores de ecrã:

  

  Descrição do nível de risco quando o rato está em cima

  Recomendamos rever os elementos interativos para garantir que sejam accionados através de outros tipos de interação, como o teclado e leitor de ecrã.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #51 Existem elementos interativos com área clicável que não cumprem a dimensão mínima exigida (44px de altura e largura)

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

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

  As redes sociais da página inicial e na FAQ não possuem tamanho acima do recomendado (44px de altura e largura):

  

  Ícone das redes sociais com largura abaixo do recomendado (35 pixels)

  

  Ícone das redes sociais com tamanho abaixo do recomendado (30px 23px pixels) na página FAQ

  

  Opção de fechar modal possui tamanho de 18,5px de largura e 28px de altura

  

  Opção de download ficheiro com 25px de largura e 17px de altura

  

  Botão de abrir notícias com altura e largura de 30px

  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.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #54 Existem elementos interativos que não possuem contraste

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 5.4

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

  O botão de submeter dos formulários do website não possui contraste com a cor de fundo. Por exemplo, no formulário de Responsabilidade Social da ENSE o botão submeter é verde (#acd78e) no fundo branco (#ffffff) o que deixa o contraste abaixo do recomendado:

  

  Contraste do botão submeter abaixo do recomendado (1,6:1)

  Abaixo listamos os formulário que identificamos durante a análise, mas aconselhamos a verificarem todos os formulários do website:

  • https://www.ense-epe.pt/inscricao-de-instituicoes-de-solidariedade/
  • https://www.ense-epe.pt/contactar-a-ense/

  Existem outros locais que apresentam elementos interativos com contraste abaixo do recomendado, como por exemplo, o componente de paginação em Noticias e Comunicados:

  

  Componente de paginação com contraste abaixo do recomendado (2,4:1)

  Recomendamos reverem os elementos interativos do website, especialmente aqueles que utilizam a combinação verde (#acd78e) com fundo branco (#ffffff) para garantir que o seu contorno tenha um contraste, de no mínimo, 3:1 com a cor de fundo.

• evidência: issue #53 Há elementos não clicáveis que se confundem com elementos interativos

  etiqueta: melhoriaetiqueta: 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

  Na página da Newsletter é apresentada uma tabela que aplica efeitos visuais ao passar o cursor sobre as linhas. Apesar de não se tratar de um elemento interativo, este comportamento pode transmitir a ideia de que é possível clicar, podendo induzir o utilizador ao clique:

  

  Linhas da tabela mudam conforme o rato passa por cima

  Recomendamos que as tabelas sem elementos interativos não utilizem efeitos visuais de hover ou focus.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #56 Existem formulários longos sem divisão por passos

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

  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

  Na página de Denúncias, encontra-se um formulário extenso que solicita ao utilizador toda a informação de uma só vez. Apesar de existir um índice no topo do conteúdo, esta prática não é a mais recomendada, uma vez que pode aumentar a probabilidade de erros no preenchimento (para mais detalhes consultar a issue #48 ).

  

  Formulário com várias etapas sendo apresentado numa única vez

  Recomendamos rever a estrutura dos formulários mais longos, de forma a segmentar os passos em várias páginas ou secções. Isso pode ser feito por exemplo, com um stepper com cada etapa do formulário (1- Identificação do Fornecedor do Bem/Prestador do Serviço contra o qual está a realizar a Denúncia, 2-Identificação do Denunciante, 3-Descrição).

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #57 O website não possui formulários com mais de uma página

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

  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 identificamos no website a existência de formulários com mais de uma página.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #60 Não existem restrições do número de caracteres e nem ao seu tipo a inserir nos campos

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

  O tamanho dos campos deve refletir o tamanho previsível dos dados.
  – ver requisito 2.1 na lista Transação

  No formulário de Denúncias, verifica-se que o campo destinado ao número de telefone não possui qualquer restrição quanto ao número máximo de caracteres nem quanto ao tipo de caracteres inseridos:

  

  Campo de telefone sem restrição ao tipo de caracter ou número

  Recomendamos a revisão de todos os campos do formulário do website, de forma a assegurar que os campos com requisitos específicos — como, por exemplo, campos numéricos — permitam apenas a introdução desse tipo de caracteres. É igualmente necessário garantir que o número de caracteres inseridos não excede o limite definido para o correto preenchimento de cada campo.

• evidência: issue #59 O tamanho dos campos telefone, número fiscal e email não refletem o tamanho previsível dos dados

  etiqueta: melhoriaetiqueta: chk transaçãoetiqueta: R 2.1

  O tamanho dos campos deve refletir o tamanho previsível dos dados.
  – ver requisito 2.1 na lista Transação

  No caso do formulário de Denúncias, o campo é demasiado largo para a informação inserida, dando a entender que se pode escrever mais:

  

  Campo telefone, email e número fiscal possuem tamanho demasiado grande para o seu preenchimento

  Recomenda-se a revisão dos campos dos formulários, garantindo que a largura dos campos está adequada ao tipo de informação a inserir.

• evidência: issue #58 O tamanho dos campos de seleção não refletem o tamanho previsível dos dados

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

  O tamanho dos campos deve refletir o tamanho previsível dos dados.
  – ver requisito 2.1 na lista Transação

  No formulário de Denuncias, o tamanho dos campos de seleção é menor que a informação a ser selecionada. Isso pode ser percebido também pelo texto "Selecione um subsector" que aparece cortado:

  

  Texto "Selecione um subsector" aparece cortado do campo de seleção e a opção "Produtos Petrolíferos (combustível e gás)" é maior que o tamanho do campo

  Recomendamos que reveja o tamanho dos campos de seleção, de forma a garantir que a sua dimensão acomoda corretamente todas as opções disponíveis.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #61 Não existem campos no formulário que são dependentes de outros campos

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

  É usada revelação progressiva em vez de campos inativos.
  – ver requisito 2.2 na lista Transação

  Não encontramos campos que são apresentados consoante ao preenchimento do formulário.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #63 A legenda não está estruturada de forma apropriada

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

  As legendas dos campos são breves e claras.
  – ver requisito 2.3 na lista Transação

  Os campos de checkbox ou radiobuttons são compostos por uma legenda. No entanto, as opções de radiobutton que são apresentadas no formulário de Responsabilidade Social da ENSE. Possui a sua legenda estruturada de forma inapropriada, ao invés de ser uma tag legend em conjunto com um fieldset, está sendo utilizado a tag label e agrupando por uma lista ul li:

  

  Tag label, e lista ul li sendo utilizada de forma inapropriada

  Recomendamos rever a estrutura dos radio buttons dos formulários para garantir que estejam estruturados da forma correta. Para isso, recomendamos incluir o fieldset para agrupar as opções, para isso é necessário remover as tags ul li. A seguir, substituir a tag label "Tipo de combustível ao qual se pretende candidatar" pela tag legend.

• evidência: issue #62 A interação com o campo faz a legenda desaparecer

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

  As legendas dos campos são breves e claras.
  – ver requisito 2.3 na lista Transação

  O campo de subscrição da newsletter, presente na página inicial e na página newsletter, não possui uma etiqueta associada. Atualmente, está a ser utilizado apenas o placeholder 'E-mail' como indicação do conteúdo esperado:

  

  Campo da newsletter possui apenas placeholder preenchida como email

  Isso também está a acontecer com o campo de pesquisa, que está localizado no menu principal do website:

  

  Campo de pesquisa possui apenas placeholder e title preenchida como "Procurar por..." e "Escreva aqui o que procura"

  Recomendamos que o campo seja estruturado com uma label, devidamente associada ao respetivo campo através dos atributos for e id.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #64 Não há informação clara sobre o que é o asterisco nos campos de preenchimento obrigatório

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

  Campos obrigatórios devem ser claramente indicados como tal.
  – ver requisito 2.4 na lista Transação

  No formulário de Newsletter não existe indicação de que o campo de política de privacidade é obrigatório:

  

  Isso acontece em outros formulários que possuem um campo de seleção, como por exemplo, o de Responsabilidade Social da ENSE:

  

  Campo de aceite ao tratamento de dados pessoais não possui sinalização de que o campo é obrigatório

  Recomendamos identificar os campos obrigatórios colocando o texto “Obrigatório” em todos os campos obrigatórios ou um * ou símbolo e o respetivo significado no início do formulário.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #65 Não existem ações longas realizadas no website

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

  Em ações longas, o sistema deve indicar o que está a acontecer.
  – ver requisito 3.1 na lista Transação

  Não identificamos ações longas a serem feitas no website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #66 Ao submeter o formulário o foco do leitor de ecrã é direcionado para o início da página

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

  Deve ser confirmado o sucesso da transação/envio de informação.
  – ver requisito 3.2 na lista Transação

  Na página de newsletter possível observar que a mensagem de submissão do formulário não é automaticamente informada para o leitor de ecrã. O foco do leitor de ecrã é direcionado para o topo da página:

  

  Foco do leitor de ecrã retorna no início da página ao invés de ler a mensagem

  Recomendamos que ao submeter o formulário seja comunicada uma mensagem de confirmação para o leitor de ecrã, o seu foco deverá estar posicionado na mensagem.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue #68 Não existem ações destrutivas no website

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

  As ações destrutivas nunca devem ser permanentes, deve ser sempre possível desfazer a operação.
  – ver requisito 4.2 na lista Transação

  Não identificamos ações consideradas destrutivas no website da ENSE.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #69 A mensagem de erro está com o mesmo estilo visual que o título da newsletter

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

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

  Na página inicial e na página da Newsletter, a mensagem de erro é exibida visualmente no mesmo estilo que o título da Newsletter podendo gerar confusão:

  

  Mensagem de erro com o mesmo estilo visual que o título

  Par além disso, a mensagem de erro é exibida estruturalmente depois do botão de submeter. Este comportamento pode gerar confusão, uma vez que os utilizadores esperam que o feedback sobre o erro surja junto ao campo que necessita de correção. Além disso, como a mensagem não está associada diretamente ao respetivo campo, a sua localização pode não ser imediatamente evidente, dificultando a compreensão do que deve ser ajustado:

  

  Estruturalmente a mensagem de erro está posicionada depois do botão submeter e não após o campo input

  

  Mensagem de erro não está associada ao campo

  Recomendamos rever a mensagem de erro para garantir que está corretamente posicionada no formulário da newsletter. A mensagem deverá surgir imediatamente após o respetivo campo, de modo a ser o próximo elemento lido a seguir a esse campo, ela deverá estar associada ao campo e apresentar-se visualmente como uma mensagem de erro, diferentemente de um título.

  Essa correção deverá ser feita tanto na página Newsletter como na página inicial do website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #71 A mensagem de erro não ajuda na resolução do problema

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

  As mensagens de erro devem mostrar os passos concretos para a resolução dos mesmos.
  – ver requisito 4.4 na lista Transação

  No formulário de Responsabilidade Social da ENSE, a mensagem de erro não explica devidamente qual é o formato do email a ser preenchido:

  

  _

  É necessário rever os campos dos formulário, especialmente o de telefone, email e código postal, para garantir que as mensagens de erro devolvidas junto aos campos sejam úteis na resolução do problema e identifiquem os passos necessários para o resolver.

• evidência: issue #70 Mensagens de erro no idioma diferente do website

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

  As mensagens de erro devem mostrar os passos concretos para a resolução dos mesmos.
  – ver requisito 4.4 na lista Transação

  No formulário de Newsletter é apresentado a mensagem de erro em inglês:

  

  Recomendamos que a mensagem de erro seja apresentada no mesmo idioma da página. Essa correção deverá ser feita tanto na página Newsletter como na página inicial do website.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue #23 Outras violações - O iframe do vídeo não informa o nome do vídeo

  etiqueta: outras violações

  Na página Ajuda que move crianças e profissionais em Famalicão existe um vídeo cujo respectivo nome do iframe está sendo nomeado como "Leitor de vídeo do Youtube" e não é possível identificar sobre o que é o vídeo:

  

  Recomendamos reverem os vídeos do website para garantir que tenham o nome do vídeo que irá assistir. Para isso é necessário nomear o aria-label para o correto nome do vídeo.

• evidência: issue #22 Outras violações - Existem links com o mesmo nome genérico "aqui"

  etiqueta: outras violações

  Na página de Recrutamento é possível identificar vários links com o mesmo nome acessível. Esta situação constitui um problema para utilizadores de leitores de ecrã, uma vez que a navegação por links deixa de ser eficaz: todos os links são anunciados como “aqui”, o que impede a distinção entre os diferentes destinos:

  

  Leitor de ecrã identifica vários links com o mesmo nome: "aqui"

  Recomendamos rever os links do website para garantir que o respetivo nome acessível permita identificá-los de forma única e clara.