HTML Homepage MyMonitor

Neste relatório:

• Menu
• Breadcrumb
• Nome do sítio Web
• Avaliação mais recente
• Sumário da Declaração de Acessibilidade
• Correções de texto - Sobre a Declaração de Acessibilidade
• Correções de texto - Níveis de conformidade
• Botão voltar ao topo, está sem texto alternativo
• Páginas Responsive
• Landmarks de 1º nível
• Saltar para o conteúdo principal da página
• 2 menus iguais

Menu

Transformar em menu do tipo:

<nav aria-label="menu principal do MyMonitor">
 <ul>
  <li><a href="/">MyMonitor</a></li>
  <li><button ...>Sair</button></li>
 </ul>
</nav>

Ou seja, a estrutura ficará algo como:

Desta forma, os leitores de ecrã irão percecionar o elemento como sendo uma estrutura de navegação:

Breadcrumb

O Breadcrumb atual tem apresenta-se consoante iamgem anterior, com o seguinte código:

<nav _ngcontent-mhy-c305="" fxlayout="row"
      ng-reflect-fx-layout="row"
      style="flex-direction: row; box-sizing: border-box; display: flex;">
<a _ngcontent-mhy-c305="" href="/">Ecossistema</a>
<span _ngcontent-mhy-c305="">&gt;</span>

Notas (elementos a corrigir):

• o último elemento não deve ter link.
• o elemento não tem estrutura - apresenta-se como um monte de links e sinais ‘>’.

Aconselha-se a utilizar uma estrutura semelante à estrutura do Breadcrumb do Ágora.

O Breadcrumb do Ágora tem:

• marcação landmark nav
• título para landmark nav (i.e. ‘você está aqui’)
• lista ordenada de links
• marcação da página atual na estrutura

Será algo como:

<nav ... aria-label="você está aqui">
  <ol>
   <li><a ...>acessibilidade.gov</a></li>
   <li><a ...>MyMonitor</a></li>
   <li><a ... aria-current="page">Gerar Declaração de Acessibilidade</a></li>
  </ol>
</nav>

Nome do sítio Web

O cabeçalho <h1> está corretamente marcado. Contudo aconselha-se a corrigir o texto para:

<p>Sumário da Declaração de Acessibilidade</p>

O nome do sítio Web está marcado como:

<p>Portal da Justiça</p>

Aconselha-se a indicar um rótulo para contextualizar este campo. Poderá ficar escondido visualmente e visível para leitores de ecrã. Poderá ser contrastado com um ícone antes do nome. Poderá ter os dois.

<p><i class="icon-website"><strong class="sr-only">Sítio Web: </strong></i>Portal da Justiça</p>

Avaliação mais recente

O código atual:

<p _ngcontent-mhy-c351="" class="m-0"><strong _ngcontent-mhy-c351="">Avaliação mais recente</strong></p>
<p _ngcontent-mhy-c351=""> 14 de setembro de 2023 </p>

Deve passar a:

<p><strong>Avaliação mais recente</strong> 14 de setembro de 2023</p>

O estilo pode ser o que está no Mockup.

Sumário da Declaração de Acessibilidade

A versão linear atual desta componente mostra a estrutura não tem nexo (ver imagem seguinte).

Aconselha-se uma estrutura do tipo lista com 4 itens.

<ul aria-label="dados atualmente inscritos na Declaração de Acessibilidade">
  <li><strong>Amostra:</strong> <span>1 página</span></li>
  <li>Avaliação automática:
   <ul aria-label="avaliação automática">
     <li><strong>Pontuação:</strong> 10 pontos <span>escala MyMonitor</span></li>
     <li><a href="consultar_aa.html">Consultar avaliação automática</a></li>
   </ul>
  </li>
  <li>Avaliação manual:
   <ul aria-label="avaliação manual">
     <li><strong>Satisfaz:</strong> <span>25%</span> dos requisitos da <em lang="en">checklist</em> 10 aspetos críticos de acessibilidade funcional</li>
     <li><a href="consultar_am.html">Consultar avaliação manual</a></li>
   </ul>
  </li>
  <li><strong>Estado da Declaração de Acessibilidade</strong> Não conforme</li>
</ul>

Ou seja, estruturalmente apresenta-se assim:

• Amostra: 1 página
• Avaliação automática:
  • Pontuação: 10 pontos escala MyMonitor
  • Consultar avaliação automática
• Avaliação manual:
  • Satisfaz: 25% dos requisitos da checklist 10 aspetos críticos de acessibilidade funcional
  • Consultar avaliação manual
• Estado da Declaração de Acessibilidade Não conforme

Correções de texto - Sobre a Declaração de Acessibilidade

Corrigir o texto para:

Sobre a Declaração de Acessibilidade

Como posso declarar que o meu sítio Web satisfaz os requisitos de acessibilidade? Através da Declaração de Acessibilidade. Desde setembro de 2020, todos os sítios Web da Administraçãoo Pública estão obrigados a publicar uma Declaração de Acessibilidade.

Para mais informações, consulte a página:

• 3 passos para publicar a Declaração de Acessibilidade.

<h2>Sobre a Declaração de Acessibilidade</h2>
<p>Como posso declarar que o meu sítio Web satisfaz os requisitos de acessibilidade? Através da Declaração de Acessibilidade. Desde setembro de 2020, todos os sítios Web da Administraçãoo Pública estão obrigados a publicar uma Declaração de Acessibilidade.</p>
<p>Para mais informações, consulte a página:</p>
<ul>
 <li><a href="3passos.html">3 passos para publicar a Declaração de Acessibilidade</a>.</li>
</ul>

Correções de texto - Níveis de conformidade

Níveis de conformidade

A Declaração de Acessibilidade tem 3 estados possíveis divide-se em niveis de conformidade:

• Plenamente conforme
• Parcialmente conforme
• Não conforme

Nota: Há que efetuar revisão dos textos.

Botão voltar ao topo, está sem texto alternativo

Fig. - evidência do 1º aspeto

Fig. - evidência do 2º aspeto

Fig. - evidência do 3º e 4º aspeto

Fig. - evidência em como o 4º aspeto é visto no Chrome. Parece ser um problema do Safari, não ver o title do SVG. Por isso o VO não o lê.

Há 3 aspetos estranhos no atual botão:

• 1º, o VO não fornece o nome acessível;
• 2º, o ANDI diz que existe um nome acessível;
• 3º, há um nome acessível no elemento <title> do SVG que é ‘monitor_icons_tools_back-to-top’ (!?)
• 4º, o elemento <title> parece que não é processado pelo browser - surge escrito a cinzento.
• 5º, o svg nao tem role=”img”; adicionei, mas o title continua a não ser lido pelo VO nem forma o nome acessível no <button>.

O que o botão deve fazer:

• Botão está sem texto alternativo.
• O nome acessível, ou parte dele, deve estar visível.

Páginas Responsive

Precisamos de páginas responsive.

Fig. Página num iPhone 11.

Landmarks de 1º nível

Precisamos de uma página com as landmarks de 1º nível devidamente marcadas.

Algo como:

<body>
  <header>(...)</header>
  <main>(...)</main>
  <footer>(...)</footer>
</body>

Atualmente (1º nível)

Tentando descer mais um pouco, temos:

Nota:

• O uso de
  para efeitos de estilo é causa de despedimento da equipa de acessibilidade 
• O botão go to top parece estar perdido. Ou pertence ao footer, ou pertence ao main?
• Nada de script no body  . É script. É style, a referência vai para o head da página. Problemas de carregamento da página? Sim, é provável. Estudar os métodos de carregamento de script ‘async’ e ‘defer’.

Tentando entrar em maior profundidade na página:

Notas:

• Há muitas peças que não estão dentro nem de header, nem de main, nem de footer.
• Os atributos angular ngcontent-mhy-c308 são desconhecidos na gramática HTML. Diz o standard HTML que ter prefixo data, ou seja data_ngcontent … Que todos desrespeitem a gramática de HTML, nós não o vamos poder fazer.

Saltar para o conteúdo principal da página

Com o atual set, não foi possível perceber com leitor de ecrã se o link está correto ou não. Ao acionar o link com leitor de ecrã, o salto não é efetuado.

2 menus iguais

Nota:

• Não se consegue fazer 1 só rodapé em vez de 2?