kit-selo

Selo de Usabilidade e Acessibilidade

Índice

Introdução

O Selo de Usabilidade e Acessibilidade destina-se principalmente às entidades que estão obrigadas ao cumprimento da Lei n.º 36/2011, de 21 de junho, que estabelece a adoção de normas abertas nos sistemas informáticos do Estado, na sequência da qual surgiu o Regulamento Nacional de Interoperabilidade Digital (RNID). O último diploma que alterou a legislação que estabelece o RNID (Lei n.º 36/2011, de 21 de junho e Resolução do Conselho de Ministros n.º 2/2018, de 5 de janeiro) foi o Decreto-Lei n.º 83/2018, de 19 de outubro. Neste diploma, onde se estabelecem os requisitos de acessibilidade dos sítios Web e das aplicações móveis de organismos públicos, o grupo-alvo do RNID ficou assim definido:

«Artigo 2.º
Âmbito de aplicação

  1. A presente lei aplica-se às seguintes entidades:
    • a) Estado;
    • b) Regiões Autónomas;
    • c) Institutos públicos;
    • d) Entidades administrativas independentes;
    • e) Fundações públicas;
    • f) Associações públicas;
    • g) Entidades do setor público empresarial.
  2. No que se refere à acessibilidade dos sítios Web e das aplicações móveis, a presente lei aplica-se igualmente às seguintes entidades:
    • a) Autarquias locais;
    • b) Organizações Não Governamentais que prestam serviços essenciais ao público ou que prestam serviços que visam especificamente responder às necessidades das pessoas com deficiência ou que lhes são diretamente dirigidos;
    • c) Instituições de ensino superior, estabelecimentos de educação pré-escolar e de educação escolar, públicos e privados com financiamento público, no que se refere ao conteúdo relativo a funções administrativas essenciais por via eletrónica.»
Redação introduzida na Lei n.º 36/2011 pelo DL n.º 83/2018, de 19 de outubro

Como se observa da enumeração anterior, para além do setor público, há um alargamento a alguns setores privados. O cumprimento dos requisitos prescritos pelo Selo de Usabilidade e Acessibilidade é fator de qualidade dos conteúdos e dos serviços disponibilizados em linha pelo que todos os setores estão convidados à sua adoção.

O Selo está estruturado em três níveis, correspondendo a 3 etapas de esforço diferenciadas. Cada uma destas etapas é chancelada por um Selo. O Selo Bronze chancela a conformidade para com os requisitos de nível 1. Ao nível intermédio corresponde o Selo Prata e ao nível mais elevado corresponde o Selo Ouro. Para obter o Selo Ouro, é necessário adicionar aos testes com utilizadores, os requisitos definidos para o Selo Bronze e para o Selo Prata.

O Selo de Usabilidade e Acessibilidade é também ele um instrumento pedagógico. A lista de requisitos não é exaustiva e dela fazem parte aspetos básicos que respondem a preocupações funcionais práticas dos utilizadores. Para o caso das pessoas com deficiências ou incapacidades a seleção dos requisitos levou em conta o princípio básico de “antes de usar é preciso aceder”, significando isto que é importante eliminar todo o tipo de barreiras que impedem estes utilizadores - utilizadores de tecnologias de apoio - de aceder aos serviços e à informação disponibilizada na Internet. Só depois de aceder podemos falar de usabilidade.

Processo de Candidatura

A AMA elaborou os requisitos a observar para a obtenção de cada um dos Selos - Bronze, Prata, Ouro - numa lógica de prática corrente, diária, a usar pelas equipas de desenvolvimento e de edição de conteúdos. As checklists não são para serem usadas apenas no momento da candidatura ao Selo. As listas de requisitos e todo o trabalho efetuado para a sua verificação - ferramentas utilizadas, estudos efetuados, etc. -, à medida que for sendo produzido, deve ser publicado no sítio Web da entidade.

Uma vez que todas as entidades abrangidas pelo DL n.º 83/2018 estão obrigadas a disponibilizar para cada sítio Web uma página com a Declaração de Acessibilidade e Usabilidade onde se faça referência a todos os esforços levados a efeito para tornar o seu sítio Web mais acessível e mais usável, é nesta página que devem ser sintetizadas todas as evidências e todas as hiperligações para relatórios e estudos que sustentam as mesmas. Para elaborar a página da Declaração de Acessibilidade e Usabilidade, a AMA criou uma ferramenta que permite gerar a Declaração de acordo com os requisitos definidos na legislação. Esta Declaração deve ficar na pasta /acessibilidade do sítio Web (i.e. www.dominio_do_site.pt/acessibilidade).

A Declaração de Acessibilidade e Usabilidade é tudo aquilo que precisa para se candidatar ao Selo. Preenchida a Declaração de Acessibilidade e Usabilidade e publicada no respetivo sítio Web, a entidade pode candidatar-se a um dos Selos, enviando à AMA um pedido de candidatura. Do pedido deve apenas fazer parte o endereço público da Declaração de Acessibilidade e Usabilidade e qual é o Selo a que se candidata: Bronze, Prata ou Ouro. O pedido pode ser feito para o endereço de correio eletrónico: Selo@ama.pt.

Após confirmar a veracidade das análises apresentadas, a AMA entrará em contacto com a entidade e, em caso afirmativo, disponibilizará o código necessário para a afixação do Selo no respetivo sítio Web.

Níveis de Classificação

O Selo de Usabilidade e Acessibilidade está estruturado em 3 níveis de classificação, correspondendo a 3 níveis de esforço distintos:

Nível 1 - Selo Bronze

Para a atribuição do Selo Bronze, o sítio Web tem de cumprir com os requisitos constantes da checklist “Conteúdo” e ainda passar a bateria de testes de um validador de acessibilidade Web para o ‘AA’ das WCAG 2.1, de acordo com a metodologia constante no artigo 9.º, n.º 1, alínea a) do DL nº 83/2018, de 19 de outubro.

O nível de cumprimento desses parâmetros durante o primeiro ano deverá ser de 75%.

Nível 2 - Selo Prata

Para a atribuição do Selo Prata, cumulativamente ao que é exigido para o nível 1, o sítio Web tem de estar em conformidade para com a checklist “Transação” e da checklist “10 aspetos funcionais”.

A checklist “10 aspetos funcionais” é para ser usada de acordo com a metodologia referida no artigo 9.º, n.º 1, alínea b) do DL n.º 83/2018, de 19 de outubro.

O nível de cumprimento desses parâmetros durante o primeiro ano deverá ser de 75%.

Nível 3 - Selo Ouro

Para a atribuição do Selo Ouro, cumulativamente ao que é exigido para o nível 2, a entidade tem de efetuar testes com utilizadores ao sítio Web. Os testes deverão ser realizados por uma entidade entidade devidamente credenciada.

Este nível está também alinhado com a recomendação constante na metodologia sugerida pelo DL n.º 83/2018 no artigo 9.º, n.º 1, alínea c).

Requisitos para obter o Selo Bronze

Usabilidade: conformidade para com a Checklist “Conteúdo”

1 · CLAREZA DO CONTEÚDO

1.1

1.1 O sítio Web apresenta um resumo breve do seu propósito, visível sem se fazer scroll

Num primeiro vislumbre do sítio Web deve ser visível uma breve definição do seu propósito que dê a indicação ao utilizador de que sítio Web se trata e quais são as tarefas que se podem levar a efeito.

1.2

1.2 Os termos mais complexos têm uma definição agregada

Quando são usados termos complexos ou técnicos que não sejam de uso corrente, estes devem ter agregada uma definição. Todos os termos definidos desta forma devem fazer parte de um glossário disponível no sítio Web.

1.3

1.3 Cada bloco de conteúdo contém a sua data de atualização

Cada bloco de conteúdo isolado ou conjunto de blocos de conteúdo relacionado deverá ter a data da sua atualização associada, expressa num tamanho de letra 2pt abaixo ao do corpo do texto, com contraste mais reduzido mas nunca inferior a 4,5:1.

1.4

1.4 A informação sobre a entidade responsável pelo conteúdo está em todas as páginas

A identificação da entidade responsável pelos conteúdos produzidos, incluindo uma hiperligação para a página de contactos deverá constar do rodapé de todas as páginas.

2 · USABILIDADE DO CONTEÚDO

2.1

2.1 O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos

De forma a assegurar a boa legibilidade do texto para todos os utilizadores, o tamanho de letra do texto que compõe o corpo do documento deverá ser, no mínimo, de 12 pontos, assegurando sempre que os mesmos são escaláveis para tamanhos superiores, sempre que o utilizador considere necessário.

2.2

2.2 A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos

A informação secundária, como os autores de textos ou de imagens, as datas de publicação ou outros tipos de meta-informação, podem usar tamanhos de letra mais pequenos, mas, no mínimo, com 10 pontos, assegurando sempre que os mesmos são escaláveis para tamanhos superiores, sempre que o utilizador considere necessário.

2.3

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

Para manter o conforto de leitura, os blocos ou linhas de texto não deverão ter mais de 100 caracteres de largura. Os 80 caracteres correspondem à dimensão que se apresenta nos estudos como a mais confortável para os utilizadores.

2.4

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

Para assegurar a leitura confortável de blocos de texto deve ser usado um espaçamento entre linhas de 1.5x do tamanho da letra.

3 · ESTRUTURA DA NAVEGAÇÃO

3.1

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

A navegação principal deve ser equilibrada, nem com demasiadas opções de topo sem opções secundárias, nem com poucas opções de topo e muitas opções secundarias. Nenhum nível de navegação deve ter mais de 9 opções.

3.2

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

As opções de primeiro nível da navegação principal estão sempre visíveis e encontram-se sempre no mesmo local em todas as páginas. A posição atual do utilizador na estrutura de navegação deve ser evidenciada.

3.3

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

As hiperligações de texto devem apresentar um contraste mínimo de 4,5:1 com o texto envolvente e uma representação visual complementar da cor - idealmente as hiperligações devem apresentar-se sublinhadas. As hiperligações em texto devem apresentar-se da mesma forma em todo o sítio Web.

4 · ESTRUTURA DA INFORMAÇÃO

4.1

4.1 Os documentos longos têm um índice no topo com hiperligações internas para o mesmo

Os documentos com mais de três ecrãs de altura deverão ter a hierarquia de cabeçalhos espelhada num índice no topo da página com hiperligações internas para as respetivas secções e subsecções.

4.2

4.2 O layout do sítio _Web_ é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal

O layout do sítio Web deve ser adaptável aos tamanhos mais comuns de visualização, adaptando-se a várias larguras de ecrã sem que surjam barras de varrimento horizontais.

5 · ELEMENTOS INTERATIVOS

5.1

5.1 Não existem elementos interativos acionados apenas com a passagem do rato (hover)

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

5.2

5.2 Os elementos interativos têm uma dimensão mínima de 44px CSS (44pt) (vertical e horizontal)

De forma a assegurar que todos os elementos interativos são facilmente acionáveis por qualquer tipo de dispositivo apontador ou toque, estes devem ter a dimensão mínima de 44px CSS de altura e de largura.

5.3

5.3 Há apenas um botão de ação principal por página e o mesmo encontra-se destacado

Deve existir apenas um botão de ação principal por página e o mesmo deve apresentar-se numa cor contrastante. Todos os outros botões devem ser considerados como secundários.

5.4

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

Os elementos gráficos clicáveis devem ser percecionáveis como tal, através da forma, da cor ou do aparente volume.

Acessibilidade: conformidade ‘AA’ das WCAG 2.1 de acordo com uma ferramenta automática

O sítio Web tem de passar a bateria de testes de um validador automático de acessibilidade Web para a conformidade ‘AA’ das Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.1), de acordo com a metodologia constante no artigo 9.º, n.º 1, alínea a) do DL nº 83/2018, de 19 de outubro:

  1. Para os sítios Web, as entidades referidas no artigo 2.º devem adotar os seguintes procedimentos de monitorização:
    • a) Procedimento simplificado automático ou semiautomático, correspondente a uma avaliação automática a uma amostra de páginas do sítio Web composta, no mínimo, pela página de entrada e por todas as páginas hiperligadas à página de entrada e contemplando, sempre que possível, os vários tipos de templates utilizados, recorrendo a um validador automático ou semiautomático de acessibilidade Web comummente utilizado no mercado;

Apresentam-se a seguir algumas das ferramentas de validação automática que podem ser usadas para proceder à análise da conformidade ‘AA’ das WCAG 2.1. Fazemos notar que a grande maioria das ferramentas atualmente existentes no mercado têm como referência a versão 2.0 das WCAG, o que é aceitável para a determinação da conformidade.

Requisitos para obter o Selo Prata

Usabilidade: conformidade para com a checklist “Transação”

1 · FORMULÁRIOS

1.1

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

A ordem de tabulação por entre os campos deve corresponder à sequência normal de preenchimento do formulário.

1.2

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

Os formulários não devem ser apresentados de forma excessivamente longa. Os formulários que ocupem mais de 2 ecrãs de altura devem ser distribuídos por tantos ecrãs quantos os necessários, para cumprir com esta regra. Os formulários longos podem também ter vários momentos de interação diferidos, solicitando ao utilizador a informação absolutamente necessária em cada etapa, em oposição à solicitação de toda a informação necessária logo num primeiro momento de interação.

1.3

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

Os formulários distribuídos por várias páginas devem indicar no topo da página a sequência de passos necessária para os concluir, juntamente com a designação de cada passo. O utilizador deve ser capaz de selecionar os passos anteriores para retornar aos ecrãs respetivos e, se necessário, corrigir informação.

2 · CAMPOS

2.1

2.1 O tamanho dos campos deve refletir o tamanho previsível dos dados

O tamanho dos campos deve refletir o tamanho previsível para a entrada dos dados. Por exemplo, um campo para telefone deve ter a largura estritamente necessária para conter todos os dígitos. Nem mais nem menos.

2.2

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

Em vez de mostrar campos inativos, o formulário deve esconder os campos dependentes do campo-chave sempre que este não tenha sido ativado. Ao ativar o campo-chave são exibidos os campos que dependem da condição nele definida.

2.3

2.3 As legendas dos campos são breves e claras

As legendas associadas aos campos devem ser claras e o mais breves possível, sem recorrer a grandes explicações. Se essas explicações forem necessárias, devem ser apresentadas num bloco de texto paralelo.

2.4

2.4 Campos obrigatórios devem ser claramente indicados como tal

A identificação não deve basear-se apenas na cor. A sinalética visual de identificação deve ser notória. Deve ser disponibilizado um equivalente alternativo compatível com as tecnologias de apoio usadas por utilizadores com necessidades especiais.

3 · RESPOSTA

3.1

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

O sistema deve indicar o que está a processar ou qual o tempo de espera expectável quando o utilizador desencadeia ações que levem a este comportamento.

3.2

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

O sucesso de uma transação deve ser claramente comunicado ao utilizador através de uma mensagem de confirmação.

4 · ERROS

4.1

4.1 A informação já introduzida deve poder ser corrigida a qualquer momento

Toda a informação já transmitida pelo utilizador numa sessão pode ser corrigida, em qualquer momento, antes da transação ser finalizada.

4.2

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

O utilizador deve poder recuperar de qualquer ação que tenha tomado durante a sessão.

4.3

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

As mensagens de erro devem ser apresentadas claramente associadas aos campos a que dizem respeito. Isto não invalida a necessidade de as apresentar numa lista sumário. Esta última técnica é particularmente útil em páginas longas.

4.4

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

As mensagens de erro devem ser claras e sucintas, não expondo desnecessariamente o utilizador a mecanismos internos do sistema, explicando claramente os passos necessários para que o utilizador resolva o problema.

Acessibilidade: conformidade para com a checklist “10 aspetos funcionais”

A checklist “10 aspetos funcionais” é para ser usada de acordo com a metodologia referida no artigo 9.º, n.º 1, alínea b) do DL n.º 83/2018:

  1. Para os sítios Web, as entidades referidas no artigo 2.º devem adotar os seguintes procedimentos de monitorização:
    (...)
    • b) Procedimento simplificado manual, correspondente a uma avaliação manual pericial a uma amostra de páginas que permita responder à diversidade de elementos constantes da lista de verificação para sítios Web publicada no sítio Web www.acessibilidade.gov.pt;

1 · MENUS DE NAVEGAÇÃO

1.1

1.1 O menu de navegação deve estar estruturado como uma lista de opções

Para que possa ser bem interpretado por tecnologias de apoio, os menus e submenus devem estar estruturados com elementos nativos, do tipo <ul>, ou com a semântica e o estado dos elementos identificados com técnicas em ARIA.

1.2

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

Deve ser possível percorrer a estrutura de navegação quer com um dispositivo apontador quer com o teclado.

1.3

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

As imagens corretamente legendadas permitem ser interpretadas como texto, tornando todas as opções de navegação acessíveis.

2 · TÍTULOS E SUBTÍTULOS

2.1

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

O título principal de cada página, que sumariza o seu conteúdo, deve ser identificado como o primeiro nível dos títulos (h1). Não deverão ser usados mais do que um elemento deste tipo.

2.2

2.2 Existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)

Os títulos são empregues de forma hierárquica para melhor estruturar os conteúdos, das informações mais gerais às mais particulares. Deverão ser usados de forma consistente por todo o sítio Web.

3 · TABELAS DE DADOS

3.1

3.1 As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>

Identificar os cabeçalhos de uma tabela ajuda a melhor identificar os eixos que caracterizam a informação em cada célula.

3.2

3.2 A legenda da tabela está marcada com o elemento <caption>

Todas as tabelas deverão conter uma legenda descritiva do seu conteúdo, incluindo as fontes da informação, se necessário.

4 · FORMULÁRIOS

4.1

4.1 Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição

De forma a tornar a seleção de campos pequenos mais fácil, a legenda deverá estar associada ao campo respetivo com o elemento <label>, pois desta forma aumenta-se a sua área clicável. Para os utilizadores de leitores de ecrã (pessoas cegas) a associação da etiqueta ao campo de edição é também fundamental.

4.2

4.2 É possível identificar os campos de preenchimento obrigatório quando se usa apenas um leitor de ecrã

Os campos obrigatórios devem ser preferencialmente agrupados na parte inicial de um formulário e claramente identificados como tal. Se não for possível, cada campo deverá estar identificado textualmente ou como Obrigatório ou como Opcional. Não deverão ser usados apenas símbolos ou cores como elemento identificador.

4.3

4.3 É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã

Os erros identificados no decorrer do preenchimento de um formulário deverão preferencialmente ser listados de forma condensada, direcionando cada elemento da lista ao respetivo campo. Cada campo deverá associar a mensagem de erro a si próprio. As mensagens de erro deverão ser breves e claras.

5.1

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

As imagens não decorativas deverão ter uma descrição breve associada, nomeadamente através do uso do atributo <ALT>. Esta legenda deve descrever fielmente o propósito da imagem no contexto em que se encontra.

5.2

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

Gráficos resultantes de análise de dados deverão ser acompanhados da tabela de dados que lhe deu origem, de forma a preservar o acesso à informação completa.

5.3

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

As hiperligações compostas apenas por uma imagem obrigam que esta tenha um equivalente alternativo em texto que represente fielmente o destino da hiperligação.

6 · CONTRASTES

6.1

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

Deve assegurar-se no corpo do documento que o rácio de contraste entre a cor do texto e a cor de fundo é, no mínimo, de 4,5:1, de forma a assegurar a sua legibilidade para utilizadores com deficiências da visão.

6.2

6.2 O rácio de contraste entre a cor do texto de tamanho grande (maior ou igual que 18 pontos ou maior ou igual que 14 pontos negrito) e a cor do fundo é superior a 3:1

Os textos de tamanho superior a 18 pontos, ou os textos de tamanho superior a 14 pontos mas a negrito, devem assegurar um rácio de contraste mínimo de 3:1 entre a cor do texto e a cor do fundo.

7 · PLAYERS

7.1

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

Os leitores de multimédia não devem iniciar automaticamente a reprodução dos elementos e têm de ser operáveis usando apenas um rato ou usando apenas um teclado.

7.2

7.2 O vídeo ou o áudio deve conter preferencialmente legendas fechadas sincronizadas. Caso não seja possível, no mínimo, deve-se disponibilizar uma transcrição textual

O uso de legendas fechadas destina-se essencialmente a pessoas surdas. Recomendam-se para a produção das referidas legendas técnicas de tradaptação conhecidas para o efeito bem como o enriquecimento das legendas de sons cuja mensagem não seja percetível visualmente (p.e. o toque de uma campanha de uma porta).

Para vídeos com mensagens eminentemente visuais (p.e. um vídeo com música de fundo que passa um conjunto de mensagens apenas percetíveis à visão, os mesmos devem ter uma versão equivalente alternativa com produção de audiodescrição. A audiodescrição é fundamental para que pessoas cegas ou com baixa visão possam percecionar a mensagem veiculada.

8 · ESTRUTURA DA PÁGINA

8.1

8.1 Quando se retira a CSS, todos os elementos HTML devem alinhar à esquerda

Quando se desativam todos os estilos visuais, o conteúdo da página é apresentado alinhado à esquerda e apresenta-se de forma linear.

8.2

8.2 Quando se retira a CSS, a informação aparece numa ordem lógica

Tendo em conta que o posicionamento de elementos no código pode não refletir a ordem visual de leitura, deve ser assegurada a ordem correta do conteúdo quando se desativam os estilos visuais.

8.3

8.3 Quando se retira a CSS, deve ser possível reconhecer a semântica dos diversos elementos

Os elementos que estruturam o conteúdo devem estar semanticamente bem estruturados, usando os elementos de HTML apropriados a cada tipo de conteúdo, como título, parágrafos, listas, …

8.4

8.4 Quando se retira a CSS, a informação relevante permanece visível?

Toda a informação visível deve permanecer na página sob forma textual, quando se desativam os estilos visuais.

8.5

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

A estrutura de composição gráfica da página não é feita recorrendo a elementos de tabela mas sim a uma maior diversidade de elementos semânticos (p.e. <main>) e genéricos (p.e. <div>), que permitem a recomposição visual para diferentes tipos e dimensões de ecrã.

9 · SINTAXE DE HTML

9.1

9.1 A página apresenta-se sem erros de (x)HTML

A página não deve apresentar erros de sintaxe de (x)HTML.

10 · FICHEIROS PDF

10.1

Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT

Os ficheiros PDF devem ter o seu texto inteiramente extraível para que se possa passar o respetivo conteúdo para um processador de texto sem perda de informação.

Requisitos para obter o Selo Ouro

Testes de Usabilidade

Para obter o Selo Ouro, além dos procedimentos descritos para o Selo Bronze e para o Selo Prata, as entidades deverão apresentar prova da realização de testes com utilizadores.

Este nível está também alinhado com a recomendação constante na metodologia sugerida pelo DL n.º 83/2018 no artigo 9.º, n.º 1, alínea c):

  1. Para os sítios Web, as entidades referidas no artigo 2.º devem adotar os seguintes procedimentos de monitorização:
    (...)
    • c) Testes de usabilidade com pessoas com deficiência, dos quais devem fazer parte como objeto de análise, pelo menos, uma tarefa e uma tipologia de utilizadores.

1 · NÚMERO DE UTILIZADORES

Nos testes com utilizadores devem participar, no mínimo, um bloco de 4 utilizadores + 2 utilizadores com necessidades especiais pertencentes a uma das seguintes tipologias: visão, audição, motora, intelectual. :
No mínimo 2 participantes com necessidades especiais por tipologia. Deve ser realizado um bloco de testes por cada 5 ações principais do sítio Web em causa.

2 · PROTOCOLO ADEQUADO

O teste deve focar-se nas principais funções do sítio Web e ser comum a todos os utilizadores. No caso de utilizadores com necessidades especiais, o protocolo deve ser aplicado no seu local de trabalho/consulta habitual usando as tecnologias de apoio habituais e com as configurações personalizadas pelo próprio participante.

3 · PROTOCOLO DE TESTES SEM VIÉS

O teste procurará não influenciar as opções do utilizador e não deverá fornecer pistas sobre a realização das tarefas, incluindo termos usados. Sempre que apropriado deve ser solicitado aos participantes que verbalizem o que estão a pensar enquanto desempenham a sua tarefa no sítio Web.

4 . Autorizações e registos das sessões

A entidade deve solicitar autorização por escrito aos participantes e, sempre que apropriado, deve efetuar registos vídeo ou áudio das sessões.

5 · RELATÓRIO FINAL COM OBSERVAÇÕES E RECOMENDAÇÕES

O relatório final deve incluir uma lista de observações e recomendações para cada uma das tarefas.

6 · INCORPORAÇÃO DE RECOMENDAÇÕES

As entidades deverão evidenciar que as recomendações foram incorporadas no sítio Web.

Condições de atribuição e afixação do Selo

Período de Atribuição

A atribuição do Selo é válida por um período de 12 meses. Contudo, se se verificar que o sítio Web sofreu uma alteração profunda o Selo será revogado.

Método de Aplicação

Após a atribuição do Selo, é disponibilizado à entidade um código que permite afixar no sítio Web o Selo que lhe foi atribuído. A entidade poderá selecionar um de quatro estilos de exibição disponíveis (ver anexo: Selos em formato svg), de forma a que se enquadre melhor na estrutura do seu sítio Web.

Qualquer utilizador que acione a hiperligação existente no Selo será direcionado para o sítio Web do Selo (https://selo.usabilidade.gov.pt) onde poderá comprovar a autenticidade do mesmo.

A entidade tem completa liberdade para afixar o Selo de Usabilidade e Acessibilidade em qualquer página ou páginas do sítio Web e nestas selecionar a posição que considerar mais apropriada.

Caducidade do Selo

As entidades podem renovar o Selo por igual período de 12 meses remetendo à AMA um processo composto de evidências atualizadas à data da renovação. Caso a entidade opte por não renovar o Selo, o mesmo caduca e será solicitado à entidade que retire o código que o afixa no respetivo sítio Web.

Anexos

Formato SVG do Selo Usabilidade e Acessibilidade

Todos os selos que se encontram abaixo estão em formato SVG, o formato vetorial gráfico do W3C. Na prática, é possível escalar qualquer um destes gráficos sem perda de resolução - pode ter um pequeno ícone ou um gráfico do tamanho de um múpi. Para os descarregar, basta selecionar a imagem e com o menu contextual (botão direito do rato) selecionar “guardar como”.

Para cada nível existem 4 versões do selo. Pode optar por afixar aquela que melhor se adequa ao seu design.

Versões do Selo Ouro

Selo Ouro
Selo Ouro - vertical
Selo Ouro - horizontal e letra branca
Selo Ouro - horizontal

Versoões do Selo Prata

Selo Prata
Selo Prata - vertical
Selo Prata - horizontal e letra branca
Selo Prata - horizontal

Versões do Selo Bronze

Selo Bronze
Selo Bronze - vertical
Selo Bronze - horizontal e letra branca
Selo Bronze - horizontal

Checklist “10 aspetos funcionais de acessibilidade”

Nota: a entidade deve preencher esta Checklist, publicá-la no sítio Web, e disponibilizar um link para a mesma na Declaração de Acessibilidade e Usabilidade. Deve igualmente disponibilizar um relatório que evidencie a prova para cada um dos aspetos assinalados com “Sim” na Checklist.

10 aspetos funcionais - Checklist para sítios Web
1. Menus de navegação sim não n.a.
1.1 O menu de navegação está estruturado como uma lista de opções (com elementos nativos, do tipo <ul>, ou com a semântica e o estado dos elementos identificados com técnicas em ARIA)?
1.2 É possível selecionar as opções e as subopções do menu quer com rato quer com teclado?
As imagens-link, caso existam no menu, têm um equivalente alternativo em texto correto?
2. Títulos e subtítulos sim não n.a.
2.1 Existe um título <h1> marcado na página?
2.2 Existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)?
3. Tabelas de dados sim não n.a.
3.1 As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>?
3.2 A legenda da tabela está marcada com o elemento <caption>?
4. Formulários sim não n.a.
4.1 Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição?
4.2 É possível identificar os campos de preenchimento obrigatório quando usa apenas um leitor de ecrã?
É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã?
5. Gráficos e imagens-link sim não n.a.
A imagem ou gráfico tem uma legenda curta (i.e. atributo alt)?
5.1 O gráfico é acompanhado de uma descrição longa (p.e. tabela de dados que deu origem ao gráfico)?
5.2 As imagens-link têm equivalentes alternativos em texto corretos?
6. contrastes sim não n.a.
6.1 Para texto de tamanho normal (menor que 18pt ou menor que 14pt negrito), o rácio de contraste entre a cor do texto e a cor do fundo é superior a 4,5:1?
6.2 Para texto de tamanho grande (maior ou igual que 18pt ou maior ou igual que 14pt negrito), o rácio de contraste entre a cor do texto e a cor do fundo é superior a 3:1?
7. Players (leitores) de vídeo ou de áudio sim não n.a.
7.1 É possível ativar os botões de controlo do leitor quer com o rato quer com o teclado?
7.2 O vídeo ou o áudio têm legendas fechadas sincronizadas e/ou, no mínimo, está disponível uma transcrição textual?
8. Estrutura da página sim não n.a.
8.1 Quando se retira a CSS, todos os elementos (x)HTML alinham à esquerda?
8.2 Quando se retira a CSS, a informação aparece numa ordem lógica?
8.3 Quando se retira a CSS, é possível reconhecer a semântica dos diversos elementos (títulos, subtítulos, parágrafos, listas, ...)?
8.4 Quando se retira a CSS, a informação relevante permanece visível?
8.5 A maquetização da página é feita sem recorrer ao elemento <table> (tabelas layout)?
9. Sintaxe de (x)HTML sim não n.a.
9.1 A página apresenta-se sem erros de (x)HTML?
10. Ficheiros PDF sim não n.a.
10.1 Usando a aplicação Adobe Reader, é possível, no mínimo, efetuar uma cópia do texto do documento PDF e passar o respetivo conteúdo para um processador de texto sem perda de informação?

Checklist “Conteúdo”

Conteúdo - Checklist para sítios Web
1. Clareza do conteúdo sim não n.a.
1.1 O sítio _Web_ apresenta um resumo breve do seu propósito, visível sem se fazer scroll
1.2 Os termos mais complexos têm uma definição agregada
1.3 Cada bloco de conteúdo contém a sua data de atualização
1.4 A informação sobre a entidade responsável pelo conteúdo está em todas as páginas
2. Usabilidade do conteúdo sim não n.a.
2.1 O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos
2.2 A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos
2.3 Blocos e linhas de texto com largura não superior a 100 caracteres
2.4 O espaçamento entre linhas não é inferior a 1.5x do tamanho da letra
3. Estrutura da navegação sim não n.a.
3.1 Nenhum nível de navegação tem mais de 9 opções
3.2 A navegação principal está sempre visível e sempre no mesmo local
3.3 As hiperligações de texto não devem ser diferenciados apenas com base na cor
4. Estrutura da informação sim não n.a.
4.1 Os documentos longos têm um índice no topo com hiperligações internas para o mesmo
4.2 O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal
5. Elementos interativos sim não n.a.
5.1 Não existem elementos interativos acionados apenas com a passagem do rato (hover)
5.2 Os elementos interativos têm uma dimensão mínima de 44px CSS (44pt) (vertical e horizontal)
5.3 Há apenas um botão de ação principal por página e o mesmo encontra-se destacado
5.4 Elementos gráficos interativos têm de aparentar ser clicáveis

Checklist “Transação”

Transação - Checklist para sítios Web
1. Formulários sim não n.a.
1.1 A sequência de tabulação entre campos segue a sequência de preenchimento
1.2 Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas
1.3 Os formulários com mais de uma página têm a sequência de passos ilustrada
2. Campos sim não n.a.
2.1 O tamanho dos campos deve refletir o tamanho previsível dos dados
2.2 É usada revelação progressiva em vez de campos inativos
2.3 As legendas dos campos são breves e claras
2.4 Campos obrigatórios devem ser claramente indicados como tal
3. Resposta sim não n.a.
3.1 Em ações longas, o sistema deve indicar o que está a acontecer
3.2 Deve ser confirmado o sucesso da transação/envio de informação
4. erros sim não n.a.
4.1 A informação já introduzida deve poder ser corrigida a qualquer momento
4.2 As ações destrutivas nunca devem ser permanentes; deve ser sempre possível desfazer a operação
4.3 As mensagens de erro são claramente identificadas junto aos campos de origem
4.4 As mensagens de erro devem mostrar os passos concretos para a resolução dos mesmos