Relatório Avaliação da Candidatura da Casa Pia (website)

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#8 Não é possível identificar quais opções contém subopções com o leitor de ecrã

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.2

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

  • Ver requisito 1.2 da lista 10 aspetos

  Ao navegar com o leitor de ecrã no menu principal, não é anunciado quando a opção de primeiro nível está aberta ou fechada:

  

  Leitor de ecrã não anuncia que a opção "Casa Pia de Lisboa" está fechada

  

  A opção de primeiro nível "Casa Pia de Lisboa" possui 10 opções

  Recomendamos rever a construção do menu para garantir que o leitor de ecrã identifique corretamente as opções que contêm subopções, e informe se estas se encontram abertas ou fechadas. Para tal, é necessário utilizar o atributo aria-expanded, em conjunto com JavaScript, de modo a gerir o estado de abertura e fecho dessas opções.

• evidência: issue#7 Não é possível distinguir o menu principal de outros menus de navegação com o leitor de ecrã

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 1.2

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

  • Ver requisito 1.2 da lista 10 aspetos

  O uso de landmarks é fundamental para permitir que os utilizadores realizem saltos entre as diferentes secções de uma página. No entanto, verifica-se que atualmente não é possível identificar o menu principal como uma área de navegação.
  Isso acontece porque a tag nav, responsável por indicar semanticamente uma navegação, está aplicada apenas às opções internas do menu, ou seja, quando o menu se encontra fechado, o mesmo não é reconhecido como uma navegação pelas tecnologias de apoio. Para além disso, é possível identificar uma nav dentro de outra nav, que é o caso das redes sociais:

  

  Quando o menu é aberto é possível identificar as opções como uma navegação. É possível identificar que existe uma nav dentro de outra nav que pertence as redes sociais

  

  Estruturalmente é possível identificar que o botão de abrir/fechar menu está fora da landmark nav

  

  Quando o menu está fechado, ele não é reconhecido como uma navegação

  Para além disso, é possível identificar 3 navegações com o leitor de ecrã: redes sociais, opções do rodapé, e o menu lateral (navegação):

  

  Para garantir a correta atribuição da landmark nav nos menus de navegação, e assegurar uma experiência de utilização e acessibilidade adequada, recomendamos que sejam consideradas as seguintes orientações:

  • No menu principal, deve ser removido o nav das redes sociais. Assim garantimos que não exista uma nav dentro de outra nav. As redes sociais e o texto "A CONSTRUIR FUTUROS DESDE 1780" devem estar estruturalmente fora da nav do menu principal de navegação.
  • O botão de abrir/fechar o menu deverá estar incluído dentro da mesma nav que contém as respetivas opções de navegação.
  • Ao integrar o botão dentro da nav, ela ficará permanentemente visível para tecnologias de apoio. Tendo em conta que existem três nav na página, é necessário diferenciá-las. Por exemplo, o menu principal poderá ser identificado como “Menu principal Casa Pia”, enquanto o menu lateral deverá ser nomeado de acordo com a sua função específica (não pode estar sem nome).
  • Para evitar redundância de termos e melhorar a clareza, sugerimos ainda a renomeação das navegações do rodapé:
    • “Menu Rodapé” deverá passar a “Opções do rodapé”;
    • “Menu Redes Sociais” deverá ser simplificado para “Redes sociais”.

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

Lista de evidências recolhidas:

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

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

  Ao corrigir as notas levantadas na issue #7 o menu principal não fará uso de imagens-link. E esse critério passa a ser considerado como "Não aplicável".

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

Lista de evidências recolhidas:

• evidência: issue#10 O h1 não está atrelado ao logotipo na homepage

  etiqueta: chk 10 webetiqueta: melhoriaetiqueta: R 2.1

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

  • Ver requisito 2.1 da lista 10 aspetos

  Na página inicial do website, o cabeçalho h1 está oculto visualmente e não está atrelado ao logotipo:

  

  Estruturalmente é possível identificar o h1 e a imagem do logotipo como dois elementos separados

  Sugerimos atribuir o cabeçalho h1 a um elemento que represente a página e que também esteja visível, nesse caso o logotipo.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#16 Existem páginas com cabeçalhos mal atribuídos

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

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

  Na página Creche e Pré-Escolar, verifica-se que os títulos “Creche” e “Pré-Escolar” estão definidos como cabeçalhos h2. No entanto, os respectivos acordeões encontram-se igualmente definidos como h2, quando deveriam estar estruturados como h3:

  

  Os títulos dos acordeões estão estruturados como h2

  Isso acontece em outras páginas do website e por esse motivo devem rever todo o website:

  • https://casapia.pt/educacao-e-formacao/ensino-basico/
  • https://casapia.pt/creche-e-pre-escolar/
  • https://casapia.pt/educacao-e-formacao/ensino-basico/

  Recomendamos que os títulos dos acordeões sejam definidos como cabeçalhos de nível h3.

• evidência: issue#15 A hierarquia de cabeçalhos não está visível para as tecnologias de apoio

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

  O uso de cabeçalhos permite o utilizador realizar saltos por entre as secções de conteúdo da página, facilitando a navegação e procura por um conteúdo.

  No entanto, verifica-se, de forma generalizada no website, que, apesar de ter sido implementada uma sequência hierárquica de cabeçalhos através dos títulos dos acordeões, essa estrutura não é reconhecida pelos leitores de ecrã:

  

  O título h2 dos acordeões não está a ser identificado pelos leitores de ecrã

  Isso acontece porque o cabeçalho se encontra estruturado dentro do botão do acordeão, o que faz com que perca a sua semântica. Por exemplo, na página Creche e Pré-escolar a estrutura HTML mostra que o cabeçalho está dentro da tag button:

  

  Recomendamos rever a construção do acordeão para garantir o seu correto funcionamento. Para isso, o botão deve ser estruturado dentro do cabeçalho:

  

  Exemplo de construção de um acordeão em que o button está dentro do h3 no HTML

  Para mais informações partilhamos o exemplo de construção do acordeão da W3C. Esse problema está relacionado com outra issue e por esse motivo recomendamos corrigirem a issue #33

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

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

  Existem páginas em que os subtítulos não estão estruturados como cabeçalhos. Como por exemplo, na página Prémios e Certificações os subtítulos "Marca Entidade Empregadora Inclusiva 2025", "Concurso Escolas com Voz", "Escola Azul", "Bandeira Verde Eco-Escolas", "Selo Escola Saudável 2023-2025" e "Prémio Sonae Educação 2024 – Finalista" não estão estruturados como cabeçalhos:

  

  Título "Concurso Escolas com Voz" está estruturado como parágrafo no HTML

  ---

  Na página Educação e Formação os títulos "Equipa de Admissões da Casa Pia de Lisboa" e "Plano Nacional das Artes" não estão estruturados como cabeçalhos:

  

  Título "Equipa de Admissões da Casa Pia de Lisboa" está estruturado como parágrafo

  ---

  Outro exemplo acontece na página CACI, os subtítulos de "Localização" e "Contactos" não estão estruturados como cabeçalhos, para além de estar em falta um título para informar o horário de atendimento:

  

  ---

  Na página Perguntas frequentes (FAQ) os subtítulos dentro de cada acordeão não estão estruturados como cabeçalhos:

  

  Subtítulos "Como devo proceder para fazer uma candidatura?", "Quais os Cursos que existem na Casa Pia de Lisboa I. P.?" e "Como obtenho o documento do Escalão de Abono?" não estão estruturados como cabeçalhos

  Recomendamos reverem de modo geral o website, para garantir que os subtítulos dos conteúdos estejam devidamente estruturados como cabeçalhos, respeitando a hierarquia do conteúdo.

  Por exemplo, na página Prémios e Certificações os subtítulos "Marca Entidade Empregadora Inclusiva 2025", "Concurso Escolas com Voz", "Escola Azul", "Bandeira Verde Eco-Escolas", "Selo Escola Saudável 2023-2025" e "Prémio Sonae Educação 2024 – Finalista" devem ser estruturados como h3, uma vez que o título "Prémios" é um h2.

  Na página Educação e Formação o subtítulos "Equipa de Admissões da Casa Pia de Lisboa" e "Plano Nacional das Artes" devem ser estruturados como h2.

  Na página Perguntas frequentes (FAQ) devem estruturar os subtítulos que estão dentro de cada acordeão como um cabeçalho h3.

  É necessário rever todas as páginas do website, partilhamos as seguintes páginas identificadas durante a análise:

  • https://casapia.pt/cultura/benemeritos/
  • https://casapia.pt/cultura/biblioteca-cesar-da-silva/
  • https://casapia.pt/educacao-nao-formal/educacao-ambiental/
  • https://casapia.pt/outras-respostas/unidade-de-investigacao/
  • https://casapia.pt/outras-respostas/centro-de-recursos/
  • https://casapia.pt/outras-respostas/caarpd/
  • https://casapia.pt/outras-respostas/caci/
  • https://casapia.pt/educacao-nao-formal/educacao-ambiental/

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 2.2

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

  Na página inicial Casa Pia, existe um salto do cabeçalho h1 para o h3:

  

  Na página Orgânica existe um salto do cabeçalho h2 para o h4:

  

  Recomendamos que:

  • Na página inicial Casa Pia, é necessário incluir um título h2 "Notícias em destaque" e deve ser estruturado antes do carrossel. Na próxima secção da página, para evitar títulos repetidos, é necessário alterar o título "Notícias em destaque" para "Notícias".
  • Na página Orgânica, os cabeçalhos h4 "Fátima Matos", "Joaquina Franco" e "Sofia Athayde" devem ser estruturados com cabeçalhos h3

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#12 Não foi encontrado tabelas no website

  etiqueta: chk 10 webetiqueta: R 3.1etiqueta: N/A

  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

  Não foi localizado nas páginas da análise o uso de tabelas. Por esse motivo esse critério é considerado como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#13 Não foi encontrado tabelas no website

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

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

  Não foi localizado nas páginas da análise o uso de tabelas. Por esse motivo esse critério é considerado como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#17 Há formulários que não estão construídos com os elementos HTML corretos

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 4.1

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

  O campo de pesquisa não possui uma etiqueta associada ao campo:

  

  Não é possível identificar a tag label

  Recomendamos que os campos de formulário, tenham a respetiva etiqueta estruturada com o elemento label, de forma a que, ao clicar na mesma, o cursor seja automaticamente colocado no seu respectivo campo. A associação entre a etiqueta e o campo é feita através do atributo for na etiqueta label e do atributo id no campo input, os quais devem ter exatamente o mesmo valor. Idealmente a etiqueta deverá estar visível junto ao respectivo campo.

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#18 Não existem campos de preenchimento obrigatório no website

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

  É 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

  Não identificamos campos de preenchimento obrigatório no website. Por esse motivo o critério está a ser considerado como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#19 Não existem campos de preenchimento obrigatório no website

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

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

  Não existem campos de preenchimento obrigatório no website, pelo que não é necessário apresentar qualquer mensagem de erro. Por esse motivo, o critério está a ser considerado como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#21 Existem imagens informativas que não possuem texto alternativo

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.1

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

  Na página Unidade de Investigação, a informação sobre localização, endereço e contacto está sendo transmitida pelo texto "Localização" e por duas imagens. No entanto, as imagens estão sem texto alternativo:

  

  Página Unidade de Investigação apresenta 3 informações: localização cujo título está sendo atribuído como um texto, e duas imagens para representar o endereço e contacto do estabelecimento e não possuem texto alternativo

  Para além disso, é possível verificar que essas informações estão sendo apresentadas de forma diferente em outros locais do website. Na página CACI, as informações estão sendo descritas por textos (localização, contactos e horário de atendimento):

  

  Na página Centro de Recursos, a informação está sendo transmitida apenas em texto:

  

  Na página Unidade de Investigação, pela forma com que as informações estão sendo apresentadas, sem títulos e com uso de imagens, recomendamos que estas tenham um texto alternativo preenchido, como por exemplo, alt="endereço", alt="email".

• evidência: issue#20 Existem imagens com texto alternativo inapropriado

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.1

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

  Na página Fab.CPL existe uma imagem cujo texto alternativo está inapropriado pois não transmite uma informação relevante para o utilizador:

  

  Texto alternativo "Círculo do R com eletrodomésticos antigos num balde" é inapropriado pois não transmite informação útil para o utilizador

  Recomendamos rever as imagens que tenham texto alternativo para garantir que elas transmitem uma informação útil e que se enquadra no contexto do conteúdo. Nesse exemplo mencionado, uma possível sugestão de texto seria alt="Etapas de reutilização de um equipamento: revitalizar, reaproveitar, reutilizar e reciclar."

  ---

  Outro exemplo acontece na página Desenvolvimento Sustentável cuja imagens estão sendo descritas pela abreviatura e número "ODS 1, 2, 3, 4, 5, 6, 7, 8, ... , 13":

  

  Recomendamos incluir no texto alternativo de cada imagem a descrição de cada ODS. Por exemplo, "ODS 1: Erradicar a pobreza".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#22 Existem imagens sem descrição do conteúdo

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.2

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

  Na página Fab.CPL existem imagens complexas cujo texto alternativo não descreve integralmente o seu conteúdo.

  Por exemplo, a imagem da equipa Fab apresenta como texto alternativo “equipa fab cpl 2025/26”. No entanto, o nome e a função de cada pessoa da equipa são transmitidas exclusivamente de forma visual através da imagem.

  Desta forma, um utilizador que recorra a um leitor de ecrã não consegue aceder à mesma informação, uma vez que esta não se encontra devidamente descrita no texto alternativo.

  

  Texto alternativo não descreve os nomes e funções de cada pessoa

  O mesmo acontece nas imagens apresentadas do calendário e dos espaços:

  

  O texto alternativo do calendário "horários equipa fab cpl 2025/26" não transmite a informação sobre os horários e disponibilidade de cada pessoa

  

  O texto alternativo das plantas "espaço fab piso 1" e "espaço fab piso 2" não transmitem a informação do local

  Para que o texto alternativo não exceda o limite máximo de 100 caracteres, recomendamos reverem as imagens para garantir que a informação seja apresentada em texto na própria página e que deverá estar próximo a sua respetiva imagem. Para mais informações partilhamos exemplos de como incluir imagens com o seu respectivo conteúdo em texto: https://www.w3.org/WAI/tutorials/images/complex/#example-2-description-containing-textual-information

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 5.3

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

  Na página de Eventos e Notícias, existem imagens-link que não possuem texto alternativo prenchido:

  

  Imagem-link representada pelo título "Concerto – Curso Básico de Música" não possui texto alternativo preenchido

  

  Imagem-link representada pelo título "Casa Pia de Lisboa leva a educação mais longe com o Programa Erasmus+" não possui texto alternativo preenchido

  Recomendamos rever as imagens-link para garantir que a imagem tenha um texto alternativo preenchido.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 6.1

  Na página Formação Profissional existem textos posicionados em cima das imagens-link que estão com contraste abaixo do recomendado:

  

  Texto técnico de desporto praticamente ilegível com a imagem de fundo

  Recomendamos que seja incluída um background mais escuro aonde o texto está sendo exibido na imagem. Outra alternativa seria:

  • Substituir o texto genérico "Saiba Mais" dos links pelo o texto que está em cima da imagem assim resolve o problema de links genéricos "Saiba mais".
  • Remover o cabeçalho h3 que está atribuído de forma inapropriada.
  • A imagem-link direciona o utilizador para o mesmo local que o link "Saiba mais". Para evitar links duplicados e que remetem para o mesmo local, recomendamos que as imagens sejam estruturadas apenas como imagens, pois já terão o seu respetivo link posicionado abaixo da imagem.

  

  Exemplo de construção que remove problemas de contraste entre as imagens, cabeçalhos inapropriados e links repetitivos

  ---

  Na página inicial e na de Eventos o texto relativo as datas dos eventos possui contraste de 2:1:

  

  Texto da data com contraste de 2:1 na página inicial

  

  Texto da data com contraste de 2:1 na página de eventos

  Recomendamos rever os pares de cores #38C3F2 e #FFF e os textos posicionados em cima de imagens, como topo do website e na página Formação Profissional para garantir que o contraste seja de no mínimo, 4,5:1.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#27 A legenda fornecida pelo vídeo é automática

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 7.2

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

  Na página de Galeria de vídeos e imagens, o vídeo apresentado fornece legendas automáticas e não traduz fielmente o conteúdo que está sendo apresentado pelo vídeo:

  

  O texto da legenda "...colaboradores bom projeto..." deveria ser "colaboradores erguem um projeto..."

  

  Ínicio do vídeo apresenta conteúdo em texto com uma música de fundo, no entanto, a legenda automática não informa corretamente

  Recomendamos incluir uma legenda no vídeo. Para isso, poderão reaproveitar as legendas geradas automaticamente pelo YouTube, procedendo à sua edição, de forma a criar uma versão final da legenda com o conteúdo fiel ao apresentado. Nessa etapa devem incluir na legenda o conteúdo inicial do vídeo que é apresentado apenas em texto.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#33 Os acordeões não estão construídos de forma apropriada (inserir issue)

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

  Verifica-se que todos os acordeões do website não são identificados quando é utilizada a navegação por títulos. Tal situação ocorre porque, apesar de terem sido aplicados cabeçalhos aos respetivos títulos, eles estão estruturalmente inseridos dentro do botão. Isso faz com que a sua semântica seja anulada, deixando de ser reconhecidos como cabeçalhos pelos mecanismos de navegação do leitor de ecrã:

  

  Leitor de ecrã identifica apenas o cabeçalho h1, os títulos que estão estruturados como h2 não são identificados

  

  Na estrutura HTML verifica-se que o cabeçalho h2 está dentro da tag button

  Recomenda-se corrigir todos os acordeões do website para garantir que os leitores de ecrã identifiquem os seus respectivos títulos e permita realizar saltos entre os conteúdos. Para isso, estruturalmente o botão deverá estar dentro do cabeçalho.
  Para mais informações partilhamos o exemplo de construção do acordeão da W3C. O problema está relacionado com outras issues, por esse motivo recomendamos reverem a issue #15

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

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

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

  Na página Outras Respostas, está sendo apresentado um grupo de links que não estão estruturados como listas ul li:

  

  Links que fazem parte do mesmo grupo de informação não estão sendo estruturados como lista ul li

  Na página de Missão e Valores, os valores são apresentados visualmente sob a forma de lista. No entanto, na estrutura HTML, não estão estruturados como tal:

  

  Uso da tag br e do caractere "-" para estilizar visualmente o conteúdo como uma lista

  Na página Creche e Pré-escolar, existem grupos de acordeões que não estão estruturados como uma lista ul li. Vale ressaltar que isso está a acontecer em todos os locais em que o acordeão está sendo apresentado:

  

  Grupo de acordeões não estão agrupados estruturalmente como uma lista ul li

  Recomendamos reverem todo o website para garantir que:

  • A apresentação visual de uma lista deve ser transmitida também estruturalmente no HTML. Para isso é necessário utilizar as tags ul li.
  • Grupos de links e acordeões devem ser estruturados dentro de listas ul li para que seja possível identificar o número de opções disponíveis.

• evidência: issue#31 Existem conteúdos estruturados como uma lista de forma inapropriada

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

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

  Na página Transparência, existem listas que não se encontram corretamente estruturadas. Por exemplo, as ligações “Site institucional” e “Portal de Serviços da Casa Pia de Lisboa” não estão organizadas de forma estruturada dentro de uma lista.
  Para além disso, verifica-se que a opção da lista “Avisos sobre os procedimentos pré-contratuais mais relevantes:” está estruturada junto com o texto “– as publicações obrigatórias constam do Portal Base dos Contratos Públicos”, quando deveria apresentar-se como uma lista encadeada (sublista), garantindo assim uma organização hierárquica adequada da informação:

  

  Recomendamos estruturar as opções “Site institucional” e “Portal de Serviços da Casa Pia de Lisboa” como uma lista. O texto "– as publicações obrigatórias constam do Portal Base dos Contratos Públicos", deverá ser uma lista encadeada ul li que deve estar posicionada estruturalmente a seguir do li "Avisos sobre os procedimentos pré-contratuais mais relevantes:" que faz parte da lista principal.

• evidência: issue#30 Existem cards estruturados de forma inapropriada no website

  etiqueta: chk 10 webetiqueta: NOKetiqueta: R 8.3

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

  Na página de Eventos, foi identificado que cada card contém dois links com o mesmo nome, o que gera redundâncias na navegação:

  

  Estruturalmente é possível identificar a imagem-link e um cabeçalho h2 link, que direciona o utilizador para o mesmo conteúdo

  Recomendamos que para card seja atribuído apenas um link. A área selecionável do card pode ser expandida até o limite do card. Para mais informações podem consultar o guia de boas práticas para estruturar cartões utilizando o método Streched link do Bootstrap

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#36 Não foi identificado modais no website

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

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

  Não foi identificado o uso de modais no website. Por esse motivo, o critério é considerado como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#37 Não foi identificado modais no website

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

  Quando uma caixa de diálogo está aberta, a navegação com teclado (Browser ou Tecnologia de apoio) tem de ficar circunscrita aos elementos que compõem a caixa de diálogo
  – ver requisito 9.2 na lista 10 aspetos

  Não foi identificado o uso de modais no website. Por esse motivo, o critério é considerado como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#38 Não foi identificado modais no website

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

  A caixa de diálogo tem de ter um mecanismo que permita sair ou fechar a caixa, quer através de teclado quer através de um dispositivo apontador
  – ver requisito 9.3 na lista 10 aspetos

  Não foi identificado o uso de modais no website. Por esse motivo, o critério é considerado como "Não aplicável".

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#39 Não foi identificado modais no website

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

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

  Não foi identificado o uso de modais no website. Por esse motivo, o critério é considerado como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#41 O propósito do site não é explícito

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: 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

  O propósito de um website é diferente da missão ou objetivo da instituição. A página inicial deve incluir uma breve descrição das principais funcionalidades disponíveis no website.

  

  A frase: "A Casa Pia de Lisboa é um Instituto Público, tutelado pelo Ministério do Trabalho, Solidariedade e Segurança Social" descreve a instituição e não o que é possível encontrar e fazer no website

  Recomenda-se que a descrição do propósito seja alterada para representar mais fielmente a finalidade do site e a informação que contém, tal como se verifica no exemplo do site acessibilidade.gov:

  

  Frase: "O sítio para a divulgação, partilha e promoção das melhores práticas de acessibilidade para conteúdos Web e aplicações móveis." explica que tipo de conteúdo é possível consultar no website da acessibilidade.gov

etiqueta: N/A

Lista de evidências recolhidas:

• evidência: issue#42 Não existe termos complexos no website

  etiqueta: chk conteúdoetiqueta: R 1.2etiqueta: N/A

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

  Não foi localizado termos complexos no website da Casa Pia. Por esse motivo, o critério será considerado como "Não aplicável".

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#43 Existem páginas 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

  A página de Contactos, Imprensa e Publicações não possuem data de atualização, pelo que deve ser corrigido:

  

  Página de contactos sem data de atualização

  Recomendamos que todas as páginas de conteúdos tenham a sua respectiva data de atualização.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 1.4

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

  Não foi encontrado o nome da entidade responsável pelo conteúdo nas páginas ou no rodapé do website:

  

  Não é possível identificar o responsável pelo conteúdo do website

  Recomendamos incluir no rodapé o nome da entidade responsável pelo conteúdo do website. Por exemplo, caso o responsável pelo conteúdo do website seja a própria Casa Pia, poderá ser inserido no rodapé do website a informação de copyright: "© 2026 Casa Pia – Todos os direitos reservados."

  

  Exemplo de como incluir a informação sobre o responsável pelo conteúdo do website

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#46 A informação secundária tem um tamanho de letra inferior a 10pt (equivalente a 13.3px)

  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

  O tamanho de letra do link "Portal de serviços" é de 12px, pelo que deverá ser corrigido para um tamanho igual ou superior a 10pt (13.3px):

  

  O tamanhos dos links e dos textos que estão sendo apresentados no rodapé é de 12.8px, pelo que deverá ser corrigido para um tamanho igual ou superior a 10pt (13.3px):

  

  Recomendamos rever o conteúdo considerado como secundário, para garantir que tenham um tamanho, de no mínimo, 13.3px.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#47 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 acessibilidade o tamanho da linha do bloco de texto é de 136 caracteres:

  

  Recomendamos a revisão de todas as páginas do website, de forma a garantir que as linhas de texto não ultrapassem os 80 caracteres (incluindo espaços). Para o efeito, deverá ser definida uma largura máxima para as caixas de texto (propriedade max-width, em CSS), utilizando unidades relativas ao tamanho da fonte (como em ou rem), assegurando assim que não seja excedido o número máximo de caracteres por linha.
  No limite, podem ir até aos 100 caracteres (incluindo espaços). Essa verificação deve ser feita também nos conteúdos que estão sendo apresentados dentro de acordeões.

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#49 O menu ultrapassa 9 opções nas subopções de Casa pia Lisboa

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 3.1

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

  A opção "Casa Pia de Lisboa" do menu possui 10 subopções, pelo que está acima do recomendado:

  

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

etiqueta: NOK

Lista de evidências recolhidas:

• evidência: issue#52 O índice está a ser substituído por acordeões que não estão estruturados corretamente

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: R 4.1

  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 uso de acordeões como substituição de um índice é uma solução válida, mas é importante ter em consideração alguns aspetos essenciais para garantir a acessibilidade. A estrutura do acordeão deve ser construída de forma adequada, assegurando que funcione sem problemas para todos os utilizadores, incluindo aqueles que utilizam tecnologias de apoio.

  Existem acordeões no website que não estão estruturados corretamente e que devem ser corrigidos pois os títulos não estão a ser identificados pelas tecnologias de apoio:

  

  O título h2 dos acordeões não está a ser identificado pelos leitores de ecrã

  Para mais informações recomendamos corrigirem as issues #33 e #15

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

Lista de evidências recolhidas:

• evidência: issue#53 Não está sendo apresentado scroll horizontal, mas a forma de apresentação do conteúdo pode ser melhorada

  etiqueta: chk conteúdoetiqueta: melhoriaetiqueta: 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

  Em diferentes resoluções o conteúdo se adapta não exibindo o scroll horizontal. No entanto, vale ressaltar que existem conteúdos que embora não apresentem o scroll horizontal eles estão com a largura dos textos muito pequena para a resolução apresentada, como por exemplo, o mobile:

  

  Bloco de texto muito pequeno sendo que ha espaço nas laterais

  Recomendamos sempre ter um espaço entre as laterais para permitir uma leitura adequada do conteúdo, no entanto, esse espaço deve ser pequeno para não reduzir a área de apresentação do texto.

etiqueta: NOK

Lista de evidências recolhidas:

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

  etiqueta: chk conteúdoetiqueta: NOKetiqueta: 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

  Existem elementos interativos com com tamanho abaixo do recomendado:

  

  Controles do carrosel com 10px de altura e largura na página inicial do website

  

  Botão de pesquisa com 27,63 de altura e 37,81 de largura apresentado no topo do website

  

  Redes sociais com 25,28px de altura e 12px de largura nas páginas internas de notícias e eventos

  

  Redes sociais com 25,28px de altura e 12px de largura de largura no rodapé do website

  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#57 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

  Há elementos interativos no website com pouco contraste. Por exemplo, os controles do carrossel da página inicial, a sua cor tem um contraste abaixo de 3:1:

  

  Controles do carrossel com contraste de 1,4:1 com a cor de fundo branca

  O menu lateral da página inicial também possui constraste abaixo do recomendado:

  

  Botões no menu lateral com contraste de 2:1 com a cor de fundo branca

  Recomendamos a revisão das cores dos vários estados dos elementos para garantir os valores mínimos de contraste em elementos interativos, principalmente nos pares de cores #38C3F2 (azul-claro) com #FFFFFF (branco) e #D4DAEB (azul-acizentado) com #FFFFFF (branco).