Relatório Avaliação de Candidatura
Entidade do Tesouro e Finanças

Introdução

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

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

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

Níveis de conformidade das avaliações manuais
ChecklistConformidade alcançadaResultado
10 aspetos42.1% (8/19)etiqueta: Não passa
Conteúdo35.3% (6/17)etiqueta: Não passa
Transação60.0% (3/5)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: 42.1% (8/19)
    • Requisitos avaliados: 27 (8 N/A excluídos, 19 aplicáveis)
    • Requisitos OK: 8
    • Requisitos NOK: 11
    • Requisitos N/A: 8

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:

  • evidência: issue #6 As hiperligações do menu não se diferenciam do texto envolvente

    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.

    Evidências:
    As hiperligações do menu devem ter uma representação visual diferente quando está com foco. Recomenda-se a utilização de outro elemento diferenciador, como sublinhado, negrito, ícone, fundo, delineado ou contorno. Esta abordagem permite uma identificação clara da opção em destaque, para facilitar a navegação e a compreensão do utilizador.

    O menu principal disponível no website, apresenta subopções que são diferenciadas apenas pela cor. Sendo assim, para pessoas com baixa visão pode não ser percetível qual opção do menu está com o foco, por exemplo com o hover na opção "Bonificações e Subsídios" (Figura 1).

    Image

    Figura 1 - Opções de segundo nível do menu, diferenciadas apenas pela cor

    URLs a verificar

    Recomendações:

    Recomendamos que a propriedade outline seja habilitada na folha de estilo, dessa forma o foco estará visível pelos navegadores ao navegar pelo teclado.

  • evidência: issue #5 Não é possível fechar o menu nas versões para dispositivos móveis

    etiqueta: NOKetiqueta: R 1.2etiqueta: chk 10 web

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

    Evidências:

    Nas versões para dispositivos móveis, o menu de navegação ocupa todo o ecrã quando aberto, mas não existe qualquer opção visível ou acessível para o fechar. Esta limitação impede o utilizador de regressar ao conteúdo principal, bloqueando a navegação e comprometendo a usabilidade, sobretudo para utilizadores que dependem de tecnologias de apoio ou navegação por toque com precisão reduzida. (Figura 1)

    Image

    Figura 1 - Menu mobile sem opção de fechar

    URLs a verificar

    Recomendações:
    Implementar um botão de “Fechar” ou “X” com rótulo acessível aria-label="Fechar menu", para fechar o menu nas versões mobile e tablet, mantendo sempre uma alternativa de fecho explícita. Este ajuste assegura uma navegação contínua, previne bloqueios de interação e melhora significativamente a experiência para todos os utilizadores.

  • evidência: issue #4 Não é possível distinguir o menu principal e suas subopções não são claras com o leitor de ecrã

    etiqueta: NOKetiqueta: R 1.2etiqueta: chk 10 web

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

    Evidências:

    O menu não é reconhecido pelo leitor de ecrã como menu principal, apenas como um link. Verificámos que na página incial os menus de navegação não estão a ser devidamente identificados. Esta situação faz com que não seja possível distingui-los através do leitor de ecrã. Sendo assim, não é informado ao utilizador o seu estado de interação, neste caso encontra-se recolhido e não é percetível que ali encontram-se subopções. (Figura 1 e 2)

    Image

    Figura 1 – Menu sem identificação para leitores de ecrã, anunciado incorretamente como "Navbar"

    Image

    Figura 2 – Subopções do Menu associado ao texto alternativo incorreto "Navbar"

    URLs a verificar

    Recomendações:
    Remover o atributo aria-label="Navbar" aplicado ao elemento <nav>, uma vez que este rótulo não descreve a função de menu nem indica a existência de subníveis. O próprio elemento <nav> já fornece semântica suficiente de navegação. Reestruturar o menu principal, assegurando que:

    • É reconhecido por tecnologias de apoio como um menu com opções e subopções;
    • A hierarquia (nível 1, nível 2, etc.) é anunciada corretamente;
    • O estado expandido/recolhido é expresso através de atributos como aria-expanded;
    • As opções de primeiro nível podem estar acessíveis diretamente na página, conforme recomendado no Requisito 3.2 – Checklist de Conteúdos.

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

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

Lista de evidências recolhidas:

  • evidência: issue #7 As imagens-link do menu principal têm texto alternativo apropriado

    etiqueta: melhoriaetiqueta: R 1.3etiqueta: chk 10 web

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

    Evidências:

    Na barra de navegação do menu principal foi identificada uma imagem-link com função de mudar para a versão em inglês do website. No entanto, essa opção "English" pode não ser claramente compreendida por utilizadores de língua portuguesa, que é o idioma principal do site.

    Adicionalmente, o texto alternativo da imagem-link alt="english language" não descreve de forma adequada a ação disponibilizada que é mudar de idioma. (Figura 1)

    Image

    Figura 1 - Imagem link do menu com texto alternativo em inglês

    Esta implementação pode dificultar a correta interpretação por leitores de ecrã. Como resultado, utilizadores de tecnologias de apoio podem não perceber a finalidade do elemento.

    URLs a verificar

    Recomendações:
    Deve ser corrigido o texto alternativo da imagem-link, dentro do alt="”, para evitar que o leitor de ecrã identifique corretamente.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #8 Há páginas sem <h1> atribuído

    etiqueta: R 2.1etiqueta: NOKetiqueta: chk 10 web

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

    Evidências:

    As páginas do website devem ter apenas um <h1> atribuído. Nas páginas interiores, o <h1> deve estar atribuído ao título do conteúdo principal dessa página. Já na homepage, o <h1> deve estar atribuído ao logótipo para, em conjunto com um texto alternativo correto, potenciar o SEO da página.

    No website, foram encontradas páginas sem <h1> atribuído, como por exemplo, não há cabeçalho de nível 1 na página inicial (Figura 1).

    Image

    Figura 1- Análise de cabeçalhos com o WebDeveloper

    A página inicial, verificámos que o logótipo principal da homepage tem um link para a própria página. Esta implementação de tornar o logótipo atribuído a uma hiperligação faz direcionar o utilizador para a página onde já se encontra. Apenas nas páginas interiores, o logótipo principal pode ter um link para a página inicial. (Figura 2).

    Image

    Figura 2- Logótipo da página inicial com link para própria página

    URLs a verificar

    Recomendações:
    Devem rever todas as páginas do site, de forma a confirmar que o elemento <h1> está atribuído ao título principal de cada página:

    • Na homepage, o elemento <h1> deveria estar atribuído apenas ao logótipo principal “Entidade do Tesouro e Finanças”.

    Recomendamos que seja retirado o link atualmente atribuído ao logótipo na página principal, mantendo esse link nas restantes páginas interiores. Nestas, o texto alternativo da imagem referente ao logotipo da entidade deve ser, por exemplo, alt="Ir para a página principal de Entidade do Tesouro e Finanças”.

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:

  • evidência: issue #9 Existem títulos que não estão sendo atribuídos como cabeçalhos

    etiqueta: NOKetiqueta: R 2.2etiqueta: chk 10 web

    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

    • Os cabeçalhos <h1> ao <h6> devem ser atribuídos a títulos e subtítulos das secções do site. As atribuições corretas destes elementos facilitam a navegação com teclado e com leitores de ecrã.

    Na página UTAP - FAQ verificou-se que existem títulos que não estão estruturados como cabeçalhos, diferenciados apenas pela cor em negrito (Figura 1).

    Image

    Figura 01 - Títulos das perguntas não estruturados como cabeçalhos

    URLs a verificar

    Recomendações
    Recomendamos a revisão das páginas do website para garantir que os elementos <h1>…<h6> estão atribuídos a títulos e subtítulos das secções relevantes.

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:

  • evidência: issue #10 Atribuição incorreta de cabeçalhos semânticos <th>

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

    Evidências:
    As tabelas de dados devem identificar o seu conteúdo com elementos semânticos de HTML corretos, para que os leitores de ecrã consigam referenciar corretamente os cabeçalhos e identificar a tipologia dos dados de cada coluna e linha. No caso dos cabeçalhos das tabelas, estes devem estar marcados com o elemento <th>.

    Na página “O que é o SEE?”, a tabela apresenta o título “Setor Público Empresarial (SPE)” marcado incorretamente como <th>. Como o elemento <caption> já contém o título da tabela, a utilização simultânea dos dois elementos pode resultar em leitura duplicada pelos leitores de ecrã. (Figura 1)

    Image

    Figura 1 - Atribuição incorreta do <th>

    Além disso, observamos que existem tabelas em que o <th> é usado só para espaçamento e estética. Na página Parcerias Público-privadas a tabela apresenta células vazias, que não trazem informações úteis para os utilizadores. (Figura 2)

    Image

    Figura 2 – Atributos <th> vazios

    Apesar de existirem outros cabeçalhos válidos, isto cria cabeçalhos sem rótulo e prejudica a interpretação por leitores de ecrã e associação correta entre cabeçalhos e dados.

    URLs a verificar

    Recomendações:

    • Recomenda‑se remover <th>, quando ele não possuir conteúdo associado, podendo levar utilizadores de leitores de ecrã a interpretar que existe informação em falta.
    • Substituir os <th> vazios por , quando não representam um cabeçalho, ou, se forem realmente cabeçalhos, inserir rótulo acessível. Não devem existir <th> sem conteúdo que descreva a coluna ou linha.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #11 Há títulos de tabelas que não estão marcadas com o elemento <caption>

    etiqueta: NOKetiqueta: R 3.2etiqueta: chk 10 web

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

    Evidências:

    As tabelas de dados devem estar acompanhadas por uma legenda ou um título marcado com o elemento para que seja explícito o âmbito das mesmas ao serem lidas pelas tecnologias de apoio. [Text Wrapping Break]Verificámos que as tabelas não estão devidamente acompanhadas por uma legenda ou título, como por exemplo, na página Estatísticas (Figura 1). Todas as tabelas da página são abarcadas pelo mesmo cabeçalho, no entanto, mostram dados de anos diferentes.

    Image

    Figura 1 - O título da tabela não está atribuído ao <caption>

    Devem ser adicionadas legendas ou títulos às tabelas, corretamente identificados com o elemento <caption> . Em alternativa, é possível associar elementos de texto à respetiva tabela através do aria-labelledby. No caso da Figura 1, pode ser relevante incluir o ano que está na primeira célula da tabela através de um aria-labelledby.

    Há tabelas com o elemento <caption> atribuído ao texto errado. O elemento <caption> deve ser atribuído ao título ou legenda corretos para identificar claramente o conteúdo da tabela que acompanha. Na página Sucessão a Entidades Extintas, existe um elemento atribuído a uma observação, cujo objetivo é diferente da legenda de uma tabela (Figura 2).

    Image

    Figura 2 – Atributo <caption> atribuído ao texto errado, uma observação (Obs)

    URLs a verificar

    Recomendações:

    Recomendamos que o elemento <caption> seja atribuído apenas ao título ou legenda da tabela, e não a outro tipo de texto. Para mais informações sobre como legendar tabelas, pode ser consultada a página Caption & Summary da WAI.

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:

  • evidência: issue #12 Existem etiquetas que não estão associadas ao seu respetivo campo

    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

    Evidências:

    Os campos de formulários, como por exemplo, o <input>, <select> ou <areatext>, devem ter as suas legendas estruturadas com o elemento <label> , para que ao clicar na legenda, apareça o cursor. Isso pode ser feito por exemplo, utilizando o atributo for ou inserir o elemento dentro da label na estrutura do HTML.

    No formulário da página Pesquisar, quando se clica nas legendas dos campos, o cursor não surge no respetivo campo de edição. Isto acontece porque a etiqueta não está devidamente associada ao campo: o atributo “for” da não corresponde o “id” do campo de input (Figura 1)

    Image

    Figura 1 - O "for" da etiqueta não corresponde ao "id" do campo

    URLs a verificar

    Recomendações:
    Recomendamos a revisão das páginas do site para garantir que todos os formulários estão bem construídos, considerando que:

    • A legenda do campo deve estar estruturada no elemento e deve estar associada ao campo.

    • O for da legenda e o id do campo de input devem ser iguais.

    Alguns exemplos de estrutura seriam:

    <label for="firstname">Primeiro nome:</label>
    <input type="text" name="first" id="firstname">
    <label>Primeiro nome:<input type="text" name="firstname"></label>

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:

  • evidência: issue #13 Inexistência de formulários com campos de preenchimento obrigatório

    etiqueta: N/Aetiqueta: R 4.2etiqueta: 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

    Evidências:
    Não encontrámos formulários com campos de preenchimento obrigatório, pelo que o requisito não se aplica (N/A).

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:

  • evidência: issue #14 Inexistência de formulários que necessitem de mensagens de erro

    etiqueta: N/Aetiqueta: R 4.3etiqueta: 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

    Evidencias:
    Não encontrámos formulários que necessitem de mensagens de erro, pelo que o requisito não se aplica (N/A).

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

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

Lista de evidências recolhidas:

  • evidência: issue #15 Há imagens decorativas sem atribuição do alt nulo

    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

    Evidências:
    As imagens decorativas não acrescentam informação ao conteúdo da página, costumando estar acompanhadas de uma descrição textual ou servirem para tornar a página mais apelativa. Estas imagens podem conter um texto alternativo nulo (alt=””) no HTML, ou estarem apenas como background-image em CSS.

    Na página inicial, possui uma imagem, que mesmo sendo decorativa, deve incluir o atributo alt="". A sua ausência pode levar os leitores de ecrã a anunciar informação irrelevante, e pode prejudicar a experiência de navegação. (Figura 1)

    Image

    Figura 1- Imagem decorativa sem <alt>atribuído

    Definir um alt vazio garante que a imagem é corretamente ignorada pelas tecnologias de apoio.

    URL a verificar

    Recomendações
    Recomendamos a revisão das imagens decorativas para que incluam um texto alternativo nulo da seguinte forma: <img… alt=””>. Em alternativa, estas podem ser colocadas em CSS como background-image.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #16 Há organogramas sem descrição do conteúdo

    etiqueta: NOKetiqueta: chk 10 webetiqueta: R 5.2

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

    Evidências:
    A imagem complexa deve ser acompanhada não só de uma descrição curta, colocada como texto alternativo da imagem, mas também de uma descrição detalhada sobre o seu conteúdo, que represente de forma textual a informação mais relevante. Podemos considerar neste critério elementos como gráficos, diagramas, mapas, imagens, infografias, entre outros.

    Verificou-se que o gráfico da página Organograma não está acessível a
    leitores de ecrã, nem está acompanhado de uma descrição ou tabela que represente o seu conteúdo de forma textual. (Figura 1)

    Image

    Figura 1 – Organograma sem descrição longa

    A ausência de um conteúdo alternativo complementar que descreva a informação apresentada na imagem neste caso que contém dados sobre funções e a estrutura Municipal. Deste modo, utilizadores de tecnologias de apoio, nomeadamente leitores de ecrã, podem não conseguir compreender a estrutura hierárquica e organizacional, uma vez que a informação é disponibilizada sem uma descrição longa alternativa. Apenas com o texto alternativo “alt=organigrama ETF”.

    URLs a verificar

    Recomendações:
    Recomendamos a revisão das páginas do site para garantir que todos os elementos deste género são acompanhados de uma descrição detalhada do conteúdo mais relevante

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #17 As imagens-link não possuem um texto alternativo

    etiqueta: NOKetiqueta: R 5.3etiqueta: chk 10 web

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

    Evidências:

    As imagens-link são links cujo conteúdo é composto por uma imagem e devem ser corretamente legendadas para serem interpretadas como texto quando são lidas pelas tecnologias de apoio. O texto alternativo deve ser curto, claro e servir de síntese do seu conteúdo.

    Na página inicial, as imagens‑link do carrossel apresentam textos alternativos incompletos. Por exemplo, a imagem que possui os textos "SEE - Instruções Prestação de Contas 2025" e “Ver mais” ou seja informações visíves, não estão incluídas descrições com seus respetivos textos alternativos. (Figura 1)

    Image

    Figura 1 – Imagens-link sem texto alternativo com texto visível “Ver mais”

    Este detalhe é relevante, pois indica ao utilizador que, ao clicar na imagem, poderá aceder a conteúdos adicionais. No entanto, utilizadores que recorrem a tecnologias de apoio não recebem esse contexto devido ao texto alternativo atual estar incompleto, comprometendo a perceção da finalidade do link.

    URLs a verificar

    Recomendações:

    Incluir textos alternativos das imagens‑link do carrossel, garantindo que descrevem de forma completa tanto o conteúdo visual como a finalidade da interação, incluindo as descrições alternativas respetivas aos conteúdos e quando esta é a ação esperada ao clicar.

    Desta forma, os utilizadores que recorrem a tecnologias de apoio passam a receber o mesmo contexto funcional dos utilizadores que veem a imagem, assegurando uma navegação mais percepcionável e equitativa.

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #20 Não foram encontrados players no website

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

    Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado.
    ver requisito 7.1 na lista 10 aspetos

    Evidências:

    O requisito não é aplicável, uma vez que não encontramos leitores de multimédia no site (vídeo ou áudio). Sendo assim o requisito será “Não Aplicável”. (N/A)

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: N/A

Lista de evidências recolhidas:

  • evidência: issue #21 Não foram encontrados players no website

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

    Evidências:
    O requisito não é aplicável, uma vez que não encontramos leitores de multimédia no site (vídeo ou áudio). Sendo assim o requisito será “Não Aplicável”. (N/A)

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:

  • evidência: issue #25 Existem conteúdos que não estão estruturados como lista

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

    Durante análise do website, verificámos que existem conteúdos não estão estruturadas como listas. Por exemplo, na página Outras Áreas relevantes (Figura 1)

    Image

    Figura 1 – Conteúdos não estruturados como lista

    Existem conteúdos que podem ser organizados (textos, links, etc…) como listas <ul><li>, no entanto, estão sendo agrupados por divs.

    URLs a verificar

    Recomendações:
    Recomendamos rever todas as páginas do website para garantir que os grupos de links sejam organizados de forma lógica através de listas <ul><li> e <ol><li>.

  • evidência: issue #24 Carrossel não está estruturado como lista

    etiqueta: NOKetiqueta: chk 10 webetiqueta: 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:
    Os componentes presentes nas páginas devem estar corretamente estruturados para garantir a correta leitura e funcionamento.

    Ao remover a folha de estilo da homepage, é possível identificar que o elemento apresentado não está semanticamente correto, os seus elementos não se encontram de uma forma estruturada como lista. (Figura 1)

    Image

    Figura 1 – Carrossel não está estruturado como lista

    A ausência de uma estrutura de lista no carrossel compromete a experiência de utilizadores de leitores de ecrã, que deixam de receber a informação de forma sequencial e relacionadas com as imagens-link. Em vez de recorrer a elementos <div>, deve ser utilizada uma lista para garantir uma marcação mais adequada e acessível. (Figura 2)

    Image

    Figura 2 – Análise do carrossel estruturado como <div>

    URLs a verificar

    Recomendações:

    Recomendamos que neste caso, seja revista a estrutura semântica do componente carrossel para garantir o correto funcionamento do mesmo. Para mais informações é possível consultar boas práticas para a implementação do elemento carrossel no código na página Carousel Structure da W3C.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #27 Há uma tabela layout na página “Pesquisar”

    etiqueta: R 8.5etiqueta: NOKetiqueta: chk 10 web

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

    Evidências:

    Uso indevido do elemento HTML <table> para estruturar o layout da página Pesquisar, em vez de utilizar elementos semânticos ou genéricos adequados à composição visual responsiva. O elemento está a ser utilizado exclusivamente para organizar e alinhar conteúdos na página, o que caracteriza um padrão de maquetização obsoleto e não acessível. (Figura 1)

    Image

    Figura 1 – Tabela layout para composição visual

    Sendo assim, neste o atributo <table> está sendo usado para efeitos de maquetização, isto é, para estruturar visualmente elementos da interface e alinhar componentes da pesquisa, quando na verdade semanticamente é identificada como uma tabela de dados como demonstra análise do Access Monitor. (Figura 2)

    Image

    Figura 2 – Tabela layout interpretada como tabela de dados

    Este tipo de utilização não cumpre o presente requisito, que determina que para garantir acessibilidade e organização do conteúdo no HTML é necessário construções com elementos semânticos adequados (por ex., <main>, <section>, <header>).

    URL a verificar

    Recomendações:
    É necessário rever estrutura HTML do website. Evitar utilizar elementos de tabela (<table>, <tr>, <td>) para fins de layout. Em vez disso, utilize CSS para controlar a apresentação e o posicionamento do conteúdo, garantindo uma separação adequada entre estrutura e estilo. Adicionalmente, evite o uso do atributo role="presentation" como forma de ocultar tabelas semânticas, pois isso pode comprometer a interpretação por tecnologias de apoio. Utilizar tabelas apenas quando os dados forem efetivamente tabulares.

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:

  • evidência: issue #28 Não existem modais no website

    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

    Evidências:
    O requisito não é aplicável, uma vez que não encontramos modais no website. Sendo assim o requisito será “Não Aplicável”. (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:

  • evidência: issue #29 Não existem modais no website

    etiqueta: N/Aetiqueta: R 9.2etiqueta: 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

    Evidências:
    O requisito não é aplicável, uma vez que não encontramos modais no website. Sendo assim o requisito será “Não Aplicável”. (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:

  • evidência: issue #30 Não existem modais no website

    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

    Evidências:
    O requisito não é aplicável, uma vez que não encontramos modais no website. Sendo assim o requisito será “Não Aplicável”. (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:

  • evidência: issue #31 Não existem modais no website

    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

    Evidências:
    O requisito não é aplicável, uma vez que não encontramos modais no website. Sendo assim o requisito será “Não Aplicável”. (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:

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

    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, não existe qualquer resumo do propósito na da Entidade do Tesouro e Finanças, pelo que deve ser adicionado.

    Image

    Figura 1 - Imagem da página principal sem fazer scroll não apresenta propósito

    URL's 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 (Figura 2)

    Image

    Figura 2 - Recomendação 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:

  • evidência: issue #34 Existem termos complexos sem definição

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

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

    Evidências:

    • Em sites com termos técnicos ou complexos, que sejam difíceis de compreender, deve existir uma página de glossário com as definições dessas palavras. O glossário deve apresentar a definição dos termos e conceitos de forma clara e breve, para que seja facilmente compreensível pelos utilizadores.

    Apesar de existirem explicações introdutórias na maioria das páginas, verificou-se que existem termos complexos e siglas sem definição, inclusive nos textos explicativos. Alguns exemplos são as siglas “IFI’s” na página Participações e Contribuições Internacionais e utilização de algoritmos romanos no corpo do texto por exemplo " xix". (Figura 1)

    Image

    Figura 1 - Imagem com siglas sem definições agregadas.

    Além disso na página “Apoio à exportação e ao Investimento” a sigla “OCDE” e o uso de terminologias em latim “Ex ante” e “Ex post” sem explicação, dificultam a compreensão por utilizadores leigos e leitores de ecrã.

    Image

    Figura 2 - Imagem com termos complexos sem definição agregada.

    URLs a verificar

    Recomendações:
    Recomenda-se que seja adicionado um glossário, que inclua as definições de siglas e outras expressões complexas que existam no website, para que seus significados estejam acessíveis sempre que necessário na navegação do website. Em alternativa, ao utilizar termos técnicos, incluir definições visíveis e substituir por linguagem clara, por exemplo:

    • Ex ante (valor previsto)
    • Ex post (valor realizado após a atividade)

    Como exemplo podem visualizar o glossaário 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:

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

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

    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.

    Não foi encontrado o nome da entidade responsável pelo conteúdo em nenhuma página do website, por exemplo na página FAQ (Figura 1).

    Image

    Entidade não é identificada na página FAQ

    URL's 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

    Exemplo de Entidade referenciada no rodapé do acessibilidade.gov.pt

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

etiqueta: NOK

Lista de evidências recolhidas:

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

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 2.3

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

    Evidências:

    Para assegurar uma boa leitura, as linhas de texto devem ter até 80 caracteres (incluindo espaços). No limite, podem ir até aos 100 caracteres (incluindo espaços).

    Verificámos que o website possui blocos de texto com mais de 100 caracteres por linha. Por exemplo, na página Apoios à Exportação e ao Investimento, a linha de texto chega aos 168 caracteres (Figura 1).

    Image

    Figura 1 - A linha de texto ultrapassa os caracteres mínimos recomendados.

    URLs a verificar

    Recomendações:
    Recomenda-se que seja definida uma largura máxima para as caixas de texto (max-width, em CSS), com unidades relativas ao tamanho de fonte (unidades em ou rem) para garantir que não é ultrapassado o número máximo de caracteres por linha, assegurando uma leitura confortável.

    • Rever todo o website e aplicar as boas práticas de acessibilidade

Requisito 2.4 - O espaçamento entre linhas não é inferior a 1.5x o tamanho da letra

etiqueta: NOK

Lista de evidências recolhidas:

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

    etiqueta: NOKetiqueta: chk conteúdoetiqueta: R 2.4

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

    Evidências:

    • Para assegurar uma boa leitura, o espaçamento entre linhas não deve ser inferior a 1.5x em relação ao tamanho do texto a ser analisado.

    Na página inicial, há blocos de textos com espaçamento inferior ao recomendado, por exemplo nos títulos dos concursos, em que o espaçamento entre linhas é de 32px para um tamanho de letra de 38.4px. (Figura 1)



    Image

    Figura 1 - Títulos com espaçamento inferior ao recomendado.

    URL a verificar

    Recomendações:
    Para a evidência apresentada, o espaçamento deveria ser, no mínimo 48px. É necessário rever todo website para garantir o espaçamento mínimo recomendado, relativo ao tamanho da letra.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #41 O menu ETF ultrapassa 9 opções no nível “Sector Empresarial do Estado”

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

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

    Evidências:

    • As boas práticas recomendam que nenhum nível do menu deve ter mais do que 9 opções. A navegação deve ser equilibrada e não deve exigir muito esforço cognitivo por parte dos utilizadores, que normalmente retêm entre 5 a 9 opções na memória de curto prazo.

    O website apresenta no nível “Sector Empresarial do Estado” existem 15 opções, o que significa que está acima do número de opções recomendado. (Figura 1)

    Image

    Figura 1 – Menu com mais de 9 opções

    URL a verificar

    Recomendações:

    Deve ser feita uma revisão da arquitetura de informação do menu de forma a garantir que não ultrapasse 9 opções em cada nível do mesmo.

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

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #42 A navegação principal do site está colapsada em desktop

    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 caso de breakpoints superiores, normalmente considerados para desktop, devem estar imediatamente visíveis no ecrã pelo menos as opções de 1º nível porque, à partida, existe espaço para tal.
    • No caso de breakpoints inferiores, normalmente considerados para tablet e mobile, o menu pode manter-se colapsado.
    • Independentemente da página, o menu deve estar sempre posicionado no mesmo local.

    Em breakpoints superiores, o menu principal do website está colapsado e só é possível expandi-lo a partir do botão “Menu hambúrguer”. Por isso, as opções de primeiro nível não são imediatamente visíveis para os utilizadores. (Figura 1)

    Image

    Figura 1 – Menu colapsado no desktop

    URL a verificar

    Recomendações:
    Em breakpoints superiores, as opções de 1º nível do menu devem estar sempre visíveis na página enquanto existir espaço.

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

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

Lista de evidências recolhidas:

  • evidência: issue #43 As hiperligações não são consistentes ao longo do website

    etiqueta: melhoriaetiqueta: chk conteúdoetiqueta: R 3.3

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

    Evidências:

    • As hiperligações devem ter uma representação visual diferente do texto envolvente e garantir consistência desse mesmo visual ao longo das páginas do website entre os diferentes browsers.

    Observou‑se que, em várias partes do website, há hiperligações corretamente identificáveis e que, no estado de hover, apresentam alterações visuais, como mudança de cor com sublinhado. Contudo, este comportamento não é consistente em toda a interface. (Figura 1 e 2)

    Image

    Figura 1 - Hiperligações não apresentam estilo sublinhado e consistente em todo website por exemplo na página Entidade do Tesouro e Finanças

    Image

    Figura 2 - Sublinhado aplicado corretamente nas hiperligações na página Recursos Humanos

    Existem páginas em que as hiperligações não mantêm consistência visual entre elas. É possível observar que diferem:

    • As hiperligações têm forma diferente: sublinhado vs sem sublinhado
    • As hiperligações não apresentam todas o sublinhado por defeito, sendo necessário passar o rato por cima de algumas, as quais alteram-se apenas a sua cor.

    URLs a verificar

    Recomendações:

    Garantir a consistência da cor, forma e comportamento das hiperligações em todo o website e entre diferentes browsers. Deve assegurar-se que o sublinhado está presente por defeito, por exemplo nas opções do rodapé e não apenas no estado hover (quando o cursor passa sobre a ligação).

    Recomenda-se ainda a revisão e uniformização do estilo de todos os elementos interativos, tornando mais evidente a sua natureza clicável. Para tal, deverá ser adotado um padrão consistente de realce, incluindo sublinhado e alteração de cor no estado hover, aplicável às hiperligações, aos textos do menu e às respetivas subopções, garantindo uma experiência visual coerente e intuitiva em toda a interface.

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:

  • evidência: issue #44 Não existem índices no topo de páginas longas

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

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

    Evidências:

    • Para facilitar a navegação em páginas longas, com várias secções de conteúdos, deve existir um índice no topo da página. Esse índice deve conter hiperligações para as várias seções que existem.

    Nas páginas consideradas longas, como no Estatuto Remuneratório dos Membros dos Órgãos Sociais não existe um índice no topo. (Figura 1)

    Image

    Figura 1 – Páginas longas sem índice no topo

    Este recurso permite que todos os utilizadores de tecnologias de apoio ou aqueles que dependem exclusivamente de navegação por teclado consigam localizar rapidamente a informação pretendida sem necessidade de percorrer longas extensões de texto.

    URLs a verificar

    Recomendações:
    Recomenda-se a inclusão de um índice com hiperligações internas, garantindo que cada item do índice direciona corretamente para a respetiva secção do documento. Esta melhoria facilita a navegação e aumenta a acessibilidade, especialmente para utilizadores que recorrem a tecnologias de apoio.

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:

  • evidência: issue #45 Há páginas no website que não se adaptam às diferentes resoluções de ecrãs

    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:

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

    Há elementos no website que não apresentam um comportamento responsivo adequado em diferentes resoluções. Na página “Capítulo 60 do Orçamento do Estado” gráfico, as tabelas e rodapé não se adaptam às diferentes resoluções de ecrãs. (Figura 1 e 2 )

    Image

    Figura 1 – Gráfico “Evolução da despesa” não se adapta a diferentes

    Image

    Figura 2 – Tabelas e rodapé da página não se adaptam a diferentes resoluções

    Observa‑se o corte de conteúdos das tabelas disponíveis através do acordeão "Anos anteriores" da página Recuperação de Créditos, o que obriga ao uso de varrimento horizontal para aceder a conteúdos e realizar interações. Este comportamento não é recomendado do ponto de vista da acessibilidade, pois compromete a navegação e a perceção da informação por parte dos utilizadores. (Figura 3).

    Image

    Figura 3 – Tabelas de conteúdos apresentam conteúdos cortados

    URLs a verificar

    Recomendações:
    Recomendamos garantir que todo o layout o site possui comportamento responsive e adapta-se às diferentes resoluções de ecrã, sem necessidade de fazer varrimento horizontal.

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:

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

    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:

    Para garantir que os utilizadores interajam 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.

    Na homepage, existem botões com menos de 44px de altura, não cumprindo as dimensões mínimas necessárias. Por exemplo o botão “Pesquisar” presente em todas as páginas do website com altura de apenas 24px de área clicável, tamanho inferior ao recomendado. Assim como na página “Organograma” com o botão “Ampliar” com altura de apenas 38px, e a imagem-link do rodapé para aceder ao “Linkedin” possui área clicável 21.01px de largura de 21.11px de altura. (Figura 1)

    Image

    Figura 1 – Exemplos de botões que não cumprem as dimensões mínimas

    Sendo assim, não cumprem com as dimensões mínimas necessárias ao toque e o presente requisito.

    Além disso, deixamos uma nota de melhoria para os botões de controlo do carrossel pois apesar de possuírem uma área clicável que cumpre o presente requisito, as setas interativas que são os elementos interativos visíveis possuem apenas 32px de altura e largura. Pelo que recomendamos ampliar proporcionalmente a área mínima de clique recomendada (44px de altura e largura). (Figura 2)

    Image

    Figura 2 – Setas interativas com área visível de clique com tamanho de apenas 32px

    URLs a verificar

    Recomendações

    Devem garantir que os elementos interativos de todo o website têm uma altura e largura igual ou superior a 44px de área clicável, mesmo que o ícone ou imagem tenha um tamanho inferior.

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

etiqueta: NOK

Lista de evidências recolhidas:

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

    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:

    • O contraste em elementos interativos deve ser de, no mínimo, 3:1 em relação a cor adjacente. Este contraste é aplicado a todos os estados dos elementos (normal, hover, focus, etc). Quando o elemento possui conteúdo em texto, o contraste deve ser de no mínimo, 4,5:1 com a cor de fundo.

    Há elementos interativos na página inicial que apresentam baixo contraste. Em particular, as setas interativas do carrossel que possuem uma taxa de contraste reduzida em relação ao fundo escuro (1,3:1) tornando‐as pouco percetíveis e dificultando a identificação como elementos clicáveis. (Figura 1)

    Image

    Figura 1 – Setas interativas do carrossel com baixo contraste

    ​​Na página Apoio à exportação e ao Investimento, há problemas de contraste nos acordeões, suas setas interativas com as combinações de cores #0A58CA(cor de primeiro plano) e #164374 (cor de plano de fundo) apresentam uma taxa de contraste (1,6:1) inferior ao recomendado. Sendo assim, a visibilidade do elemento é interativo pode ser interrompida para utilizadores com baixa visão por exemplo. (Figura 2)

    Image

    Figura 2 – Elementos interativos dos acordeões com baixo contraste

    URLs a verificar

    Recomendações:

    Recomendamos a revisão das cores dos vários estados dos elementos para garantir os valores mínimos de contraste em elementos interativos.

  • evidência: issue #49 Carrossel com imagem que aparenta ser clicável mas não possui link atribuído

    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:

    A página inicial possui um carrossel de imagens-link, com redirecionamento a hiperligações internas do website. No entanto, a segunda imagem do carrossel "Reestruturação da DGTF" visualmente configura-se como uma imagem-link, mas não possui uma hiperligação ativa (Figura 1).

    Image

    Figura 1 – Imagem aparenta ser clicável, mas não possui hiperligação

    Esta inconsistência cria uma expectativa enganosa para o utilizador, que é induzido a clicar no botão “Entidade Tesouro e Finanças (ETF)” sem obter qualquer resposta, comportamento distinto das outras opções do carrossel que possuem o texto “Ver mais” com um estilo clicável.

    URLs a verificar

    Recomendações:
    Recomenda-se verificar o propósito da imagem e definir a ação pretendida. Caso a imagem não deva funcionar como um link, recomenda‑se remover o estilo e comportamento clicável, garantindo coerência com as restantes interações do carrossel. Se o objetivo for permitir navegação, deve ser adicionada a hiperligação correspondente.

Checklist Transação

etiqueta: NOK

Nível de conformidade:

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

Requisito 1.1 - A sequência de tabulação entre campos segue a sequência de preenchimento

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #51 Existem campos do formulário que são ignorados quando se navega com o teclado/leitor de ecrã

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

    A sequência de tabulação entre campos segue a sequência de preenchimento.
    ver requisito 1.1 na lista Transação

    Evidências:

    • Ao navegar pelo formulário com o teclado usando a tecla TAB, a sequência de tabulação deve seguir a ordem de preenchimento, passando por todos os campos disponíveis.

    A pesquisa livre pressupõe uma ordem de preenchimento dos campos, ao preencher o campo de edição é necessário acionar um botão de confirmação para realizar a pesquisa. Durante os testes e revisão do website identificámos que foi removido o botão "Pesquisar". Que apresentava-se anteriormente após o campo de preenchimento e apresentava falhas em diferentes dispositivos. (Figura 1)

    Image

    Figura 1– Botão “pesquisar” que não está mais disponível no website

    Atualmente, na página Pesquisa, é apresentada com apenas o campo de introdução de texto com <input> para preenchimento da pesquisa, a submissão da pesquisa só é possível através da tecla ENTER ou mediante o clique com o rato no ícone da lupa localizado à esquerda da caixa de edição e que não recebe foco com tecnologias assistivas. Não existindo um botão “Pesquisar” acessível na sequência de navegação por teclado, esta limitação impede que utilizadores que recorrem a teclado ou tecnologias de apoio completem a tarefa de forma previsível, comprometendo a sequência lógica de tabulação do presente requisito. (Figura 2)

    Image

    Figura 2 – O campo de pesquisa não apresenta uma sequência lógica de preenchimento

    URL a verificar

    Recomendações:
    Deve ser disponibilizado um botão “Pesquisar” visível e acessível, corretamente integrado na ordem de tabulação após o campo de texto, garantindo que a sequência de navegação segue o fluxo lógico de preenchimento e submissão da pesquisa.

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #52 Inexistência de formulários com mais de 2 ecrãs de altura

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

    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

    Evidências:
    Não existem formulários com mais de 2 ecrãs de altura, pelo que o requisito não se aplica. (N/A)

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #53 Inexistência de formulários com mais de uma página

    etiqueta: N/Aetiqueta: chk transaçãoetiqueta: 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

    Evidências:

    Não existem formulários com mais de uma página, pelo que o requisito não se aplica. (N/A)

Requisito 2.2 - É usada revelação progressiva em vez de campos inativos

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #55 Inexistência de formulários longos com campos dependentes

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

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

    Evidências:

    Os formulários presentes no site não necessitam de revelação progressiva. Sendo assim, não possuem campos dependentes de campos-chave, pelo que o requisito não se aplica. (N/A)

Requisito 2.3 - As legendas dos campos são breves e claras

etiqueta: NOK

Lista de evidências recolhidas:

  • evidência: issue #56 A legenda do formulário de pesquisa não está associada ao campo

    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

    Evidências:

    • Todos os campos devem ter uma legenda breve e clara associada, que descreva quais os tipos de dados que devem ser inseridos nesse mesmo campo.

    No formulário da página Pesquisa, é possível observar que o campo de introdução do texto, apesar de apresentar a legenda visível "Insira o texto a pesquisar:", esta não está programaticamente associada ao respetivo campo de introdução de dados, uma vez que não existe correspondência entre os atributos for no <label> e id no <input>. (Figura 1)

    Image

    Figura 1 - Legenda não está associada ao campo de pesquisa

    Esta falha compromete a acessibilidade, dificultando a correta interpretação do campo por tecnologias de apoio, como leitores de ecrã, e não assegura o cumprimento do presente requisito.

    URL a verificar

    Recomendação
    Recomenda-se a criação de uma associação explícita entre a legenda e o campo de input, através da definição de um atributo id único no campo de formulário e da utilização desse mesmo valor no atributo for da respetiva label.

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #57 Inexistência de formulários com campos de preenchimento obrigatório

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

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

    Evidências:
    Não encontrámos formulários com campos de preenchimento obrigatório, pelo que o requisito não se aplica. (N/A)

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #58 Inexistência de formulários que necessitem de ações longas

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

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

    Evidências:
    Não existem formulários que necessitem de ações longas, pelo que o requisito não se aplica. (N/A)

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

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

Lista de evidências recolhidas:

  • evidência: issue #59 Não é informado aos leitores de ecrã sobre o sucesso/erro do envio de informações automaticamente

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

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

    Evidências:
    Idealmente as mensagens de status devem ser informadas automaticamente para as tecnologias de apoio assim que tiver mudanças na página. As mensagens podem ser determinadas programaticamente de modo que possam ser apresentadas para o utilizador.

    Na página Pesquisar, a transação é confirmada, mas não é informado aos leitores de ecrã sobre o sucesso/erro do envio de informações automaticamente. (Figura 1).

    Image

    Figura 1 - O resultado da pesquisa não recebe foco com leitor de ecrã sendo assim a mensagem de confirmação e o resultado da pesquisa pode não ser percetível.

    É possível observar visualmente que ao realizar a pesquisa sobre "lesgilação" ao confirmar a realização da pesquisa com ENTER, visualmente é exibida uma caixa de resultados com "Aproximadamente 299 resultados (0.14 segundos)". No entanto, o leitor de ecrã não anuncia esta mensagem de confirmação, após submeter a pesquisa, ou seja, o foco não é direcionado para o leitor de ecrã anunciar a mensagem. O mesmo acontece em outras situações (Figura 02)

    Image

    Figura 2 - A mensagem "A pesquisa não encontrou resultados." não recebe foco automaticamente com leitor de ecrã

    URL a verificar

    Recomendações:
    Recomendamos que, após a submissão do texto da pesquisa, seja comunicada a mensagem de confirmação também pelo leitor de ecrã.

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

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #61 Inexistência de formulários com ações destrutivas

    etiqueta: N/Aetiqueta: chk transaçãoetiqueta: 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

    Evidências:
    Não existem formulários com ações destrutivas, pelo que o requisito não se aplica. (N/A)

Requisito 4.3 - As mensagens de erro são claramente identificadas junto aos campos de origem

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #62 Inexistência de formulários que necessitem de mensagens de erro

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

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

    Evidências:
    O único formulário disponível é de pesquisa livre, sendo assim não necessitam de mensagens de erro associadas aos campos, pelo que o requisito não se aplica. (N/A)

Requisito 4.4 - As mensagens de erro devem mostrar os passos concretos para a resolução dos mesmos

etiqueta: N/A

Lista de evidências recolhidas:

  • evidência: issue #63 Inexistência de formulários que necessitem de mensagens de erro

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

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

    Evidências:
    Não encontrámos formulários que necessitem de mensagens de erro, pelo que o requisito não se aplica. (N/A)

Outras violações

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

Lista de evidências recolhidas:

  • evidência: issue #68 Outras violações - O texto das hiperligações não esclarece qual o seu destino

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:
    As hiperligações devem ter um texto que indique qual a página para a qual encaminham. É comum existirem hiperligações cujo texto é apenas, por exemplo, “Clique aqui” ou “Saiba mais”. Esta construção não está correta porque utilizadores de leitor de ecrã que façam uma recolha das hiperligações da página vão ficar com uma listagem de links “Clique aqui”, sem qualquer contexto e sem conseguir navegar através deles.

    Verificou-se que existem várias hiperligações com o mesmo texto e destinos diferentes, como é o caso da página Recursos Humanos. Existem 3 links nomeados “Lista nominativa” que redirecionam para sítios diferentes. Para utilizadores de leitor de ecrã, não há diferença entre as duas ligações (Figura 1).

    Image

    Figura 1 - As hiperligações têm o mesmo nome, mas destinos diferentes

    Adicionalmente, os links não têm indicação de que irão abrir num novo separador, algo que se estende à maioria dos PDFs no site. Por exemplo, na página O que é o SEE? as hiperligações abrem num novo separador ou janela sem aviso. Se o fizer, pode ser desorientador, especialmente para as pessoas que têm dificuldade em percecionar conteúdos visuais. É necessário indicar que a hiperligação abre numa nova janela no seu texto alternativo. (Figura 2)

    Image

    Figura 2 - As hiperligações direcionam para janelas externas sem aviso

    URLs a verificar

    Recomendações:

    Recomendamos que os textos das hiperligações sejam alterados, para se tornarem mais claros sobre a página para onde encaminham, nomeadamente:

    • Incluir mais texto envolvente no <a> , de modo a contextualizar e distinguir hiperligações com nomes semelhantes. No caso das listas nominativas, uma possível solução seria “lista nominativa de transição para as carreiras”.
    • Adicionar um atributo “title” ao <a>, com a indicação “Abre num novo separador”
  • evidência: issue #67 Outras violações- Uso inadequado do atributo title no elemento <body>

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:
    Ao navegar no website, é exibida constantemente uma tooltip junto ao cursor do rato com o texto “Corpo da página”, visível em qualquer área da interface. Este comportamento resulta da presença indevida do atributo title="Corpo da página" aplicado diretamente ao elemento no HTML de todo website. (Figura 1 e 2)

    Image

    Figura 1 – Atributo <title> mal aplicado exibe texto “Corpo da página” em todo o website

    Image

    Figura 2 – Tooltip “Corpo da página” em páginas interiores como Missão e Atribuições

    A exibição permanente desta tooltip prejudica a experiência de utilização, podendo tornar-se intrusiva e causar distração, especialmente para pessoas com limitações cognitivas ou dificuldades de atenção. Além disso, o uso inadequado do atributo title não contribui para a acessibilidade.

    URL a verificar

    Recomendação

    Remover o atributo <title> do elemento <body> para eliminar a tooltip e melhorar a usabilidade da página.

  • evidência: issue #66 Outras violações - Existem tabelas em PDFs que não estão acessíveis

    etiqueta: melhoriaetiqueta: outras violações

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

    Evidências:

    • Todos os componentes devem ser semanticamente estruturados utilizando elementos nativos do HTML que representam o tipo de conteúdo de forma apropriada. Esta prática assegura que os utilizadores de leitores de ecrã consigam aceder às informações de forma eficaz e sem impedimentos.

    Verificou-se que existem tabelas inseridas em PDFs que não estão acessíveis para tecnologias de apoio. Por exemplo, na página Recursos Humanos, que apresenta hiperligações que redirecionam com tabelas de dados em PDF. (Figura 01)

    Image

    Figura 1 - Tabelas em PDF não são acessíveis e são anunciadas com informações desestruturadas

    Mesmo sendo possível extrair esses dados em TXT destes PDFs, as informações de tabelas não são extraídas na ordem correta, pelo que não é possível interpretar o conteúdo que transmitem ao navegar com o leitor de ecrã.

    O mesmo acontece na página “Relatórios SEE”, que disponibiliza relatórios de “Situação económico‑financeira” em formato PDF, contendo tabelas que não são acessíveis para utilizadores de leitores de ecrã.

    URLs a verificar

    Recomendações
    Recomenda‑se que essas tabelas sejam convertidas para páginas HTML com estrutura semântica adequada, permitindo navegação, leitura e interpretação correta dos dados na navegação por tecnologias de apoio como leitores de ecrã.

  • evidência: issue #65 Outras violações - Botões com texto alternativo incorreto

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:

    No carrossel da página inicial, os botões das setas interativas não possuem texto alternativo sendo assim o leitor de ecrã NVDA anuncia apenas como "Botão", para que sejam percetíveis como controlos das imagens-link necessitam de um texto alternativo atribuído. Atualmente, é lido corretamente pelas tecnologias de apoio, tornando-os incompreensíveis para o utilizador. (Figura 1)

    Image

    Figura 1- Botões interativos do carrossel de imagens não possuem nome acessível anunciados apenas como "botão"

    Verifica-se que os elementos interativos da página Informações sobre empresas com a barra de paginação apresenta atributos aria-label, no entanto o texto alternativo dos botões está em inglês “Next” e “Previous” na versão portuguesa do website. Como resultado, os leitores de ecrã anunciam “First”, “Previous”, “Next” e “Last”, o que compromete a consistência linguística do website e a experiência de utilizadores que dependem destas tecnologias de apoio. (Figura 2)

    Image

    Figura2 - Textos alternativos dos botões da barra de paginação estão em inglês.

    URLs a verificar

    Recomendações
    Recomendamos rever o texto alternativo dos botões do carrossel para que correspondam sua funcionalidade no website em questão.

    Recomendação

    Remover o atributo title do elemento para eliminar a tooltip e melhorar a usabilidade da página.
    Recomendações:

  • evidência: issue #64 Outras violações - Existem ferramentas fornecidas por terceiros no website com problemas de acessibilidade

    etiqueta: melhoriaetiqueta: outras violações

    Evidências:

    Na página Pesquisar disponibiliza incorporação de ferramenta externa, As ferramentas presentes no site devem, preferencialmente, ser nativas. A vantagem é um maior nível de personalização na sua construção, o que torna mais fácil garantir que serão acessíveis a todos os utilizadores. Deve-se evitar usar tecnologia fornecida por terceiros porque não é possível editar o seu código, correndo o risco de herdar problemas de acessibilidade, sem ser possível proceder à sua correção.

    Verificámos que, ao submeter uma pesquisa, o utilizador é redirecionado para uma página de resultados fornecida pela Programmable Search Engine, uma ferramenta da Google. Esta ferramenta tem alguns problemas de acessibilidade, por exemplo problemas de contrastes em textos e imagens em miniatura, sem texto alternativo (Figura 1 e 2).

    Image

    Figura 1- O A ferramenta externa para pesquisa apresenta erros de contraste

    Image

    Figura 2 - Elementos interativos da paginação com área de clique inferior ao recomendado (44px)

    Para além disso, não é dada nenhuma indicação ao utilizador de que irá abrir um novo separador, o que adiciona complexidade à tarefa.

    URLs a verificar

    Recomendações:

    Recomendamos construir os resultados da pesquisa na própria página, garantindo que cumpre com os critérios de acessibilidade mencionados neste relatório.

Significado das etiquetas utilizadas