Source: https://amagovpt.github.io/kit-selo/
Timestamp: 2019-07-19 14:21:04+00:00
Document Index: 36121704

Matched Legal Cases: ['artigo 9', 'artigo 9', 'artigo 9', 'artigo 9', 'artigo 9', 'artigo 9']

Selo de Usabilidade e Acessibilidade | kit-selo
kit-selo
Requisitos para obter o Selo Bronze
Usabilidade: conformidade para com a checklist “Conteúdo”
Acessibilidade: conformidade ‘AA’ das WCAG 2.1 de acordo com uma ferramenta automática
Requisitos para obter o Selo Prata
Usabilidade: conformidade para com a checklist “Transação”
Acessibilidade: conformidade para com a checklist “10 aspetos funcionais”
Requisitos para obter o Selo Ouro
Condições de atribuição e afixação do Selo
Selos em formato SVG
Checklist “10 aspectos funcionais”
Checklist “Conteúdo”
Checklist “Transaçã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:
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 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.
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.
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.
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 externa à administração pública.
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 · CLAREZA DO CONTEÚDO
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.
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.
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.
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
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.
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.
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.
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
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.
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.
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
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.
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
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.
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.
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.
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.
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:
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.
AccessMonitor / Observatório Português da Acessibilidade Web (em português)
http://accessmonitor.acessibilidade.gov.pt
https://rocketvalidator.com
https://siteimprove.com
Deque / aXe
A sequência de tabulação entre campos segue a sequência de preenchimento
Os formulários com mais de 2 ecrãs de altura devem ser distribuídos por várias páginas
Os formulários com mais de uma página têm a sequência de passos ilustrada
O tamanho dos campos deve refletir o tamanho previsível dos dados
É usada revelação progressiva em vez de campos inativos
As legendas dos campos são breves e claras
Campos obrigatórios devem ser claramente indicados como tal
Em ações longas, o sistema deve indicar o que está a acontecer
Deve ser confirmado o sucesso da transação/envio de informação
A informação já introduzida deve poder ser corrigida a qualquer momento
As ações destrutivas nunca devem ser permanentes; deve ser sempre possível desfazer a operação
As mensagens de erro são claramente identificadas junto aos campos de origem
As mensagens de erro devem mostrar os passos concretos para a resolução dos mesmos
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:
O menu de navegação deve estar estruturado como uma lista de opções
É 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, devem ter o correspondente equivalente alternativo em texto
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.
Existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)
As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>
A legenda da tabela está marcada com o elemento <caption>
Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição
É possível identificar os campos de preenchimento obrigatório quando se usa apenas um leitor de ecrã
É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã
A imagem ou gráfico tem um equivalente alternativo em texto, curto e correto
O gráfico é acompanhado de uma descrição longa
As imagens-link têm um equivalente alternativo correto
6 · CONTRASTES
No corpo de um documento, o rácio de contraste entre a cor do texto e a cor do fundo é superior a 4,5:1
O rácio de contraste entre a cor do texto de tamanho grande (maior que 18pt) ou texto maior que 14pt Negrito e o fundo é superior a 3:1
Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado
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.
Quando se retira a CSS, todos os elementos HTML devem alinhar à esquerda
Quando se retira a CSS, a informação aparece numa ordem lógica
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, …
Quando se retira a CSS, a informação relevante permanece visível?
A maquetização da página não é feita através do 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ã.
A página não tem erros de HTML
A página não deve apresentar erros de sintaxe de HTML.
Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT
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):
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.
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.
4 . Autorizações e registos das sessões
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.
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.
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
Versoões do Selo Prata
Versões do Selo Bronze
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
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)?
As imagens-link, caso existam no menu, têm um equivalente alternativo em texto correto?
2. Títulos e subtítulos
Existe um título <h1> marcado na página?
Existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)?
3. Tabelas de dados
As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th>?
A legenda da tabela está marcada com o elemento <caption>?
Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição?
É 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
A imagem ou gráfico tem uma legenda curta (i.e. atributo alt)?
O gráfico é acompanhado de uma descrição longa (p.e. tabela de dados que deu origem ao gráfico)?
As imagens-link têm equivalentes alternativos em texto corretos?
Para texto de tamanho normal (maior que 18pt) ou maior que 14pt negrito, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 4,5:1?
Para texto de tamanho grande (maior que 18pt) ou maior que 14pt negrito, o rácio de contraste entre a cor do texto e a cor de fundo é superior a 3:1?
7. Players (leitores) de vídeo ou de áudio
É possível ativar os botões de controlo do leitor quer com o rato quer com o teclado?
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
Quando se retira a CSS, todos os elementos (x)HTML alinham à esquerda?
Quando se retira a CSS, a informação aparece numa ordem lógica?
Quando se retira a CSS, é possível reconhecer a semântica dos diversos elementos (títulos, subtítulos, parágrafos, listas, ...)?
A maquetização da página não é feita através do elemento <table> (tabelas layout)?
9. Sintaxe de (x)HTML
A página não tem erros de (x)HTML?
10. Ficheiros PDF
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?
Conteúdo - Checklist para sítios Web
1. Clareza do conteúdo
O sítio _Web_ apresenta um resumo breve do seu propósito, visível sem se fazer scroll
2. Usabilidade do conteúdo
3. Estrutura da navegação
As hiperligações de texto não devem ser diferenciados apenas com base na cor
4. Estrutura da informação
O layout do sítio Web é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal
5. Elementos interativos
Transação - Checklist para sítios Web