CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Selo de Usabilidade e Acessibilidade | kit-selo</title> <meta name="generator" content="Jekyll v3.10.0" /> <meta property="og:title" content="Selo de Usabilidade e Acessibilidade" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Kit Selo de Usabilidade e Acessibilidade" /> <meta property="og:description" content="Kit Selo de Usabilidade e Acessibilidade" /> <link rel="canonical" href="https://amagovpt.github.io/kit-selo/" /> <meta property="og:url" content="https://amagovpt.github.io/kit-selo/" /> <meta property="og:site_name" content="kit-selo" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Selo de Usabilidade e Acessibilidade" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebSite","description":"Kit Selo de Usabilidade e Acessibilidade","headline":"Selo de Usabilidade e Acessibilidade","name":"kit-selo","url":"https://amagovpt.github.io/kit-selo/"}</script>  <link rel="stylesheet" href="/kit-selo/assets/css/style.css?v=ce16406120eb563d615384ab65e4bc4704b37a1a">      </head> <body> <div class="container-lg px-3 my-5 markdown-body"> <h1><a href="https://amagovpt.github.io/kit-selo/">kit-selo</a></h1> <h1 id="selo-de-usabilidade-e-acessibilidade">Selo de Usabilidade e Acessibilidade</h1> <p><strong>Nota prévia: caso encontre algum problema com o presente documento que nos queira reportar, use, por favor, o endereço de correio eletrónico: <a href="mailto:acessibilidade@ama.gov.pt">acessibilidade@ama.gov.pt</a></strong>.</p> <h2 id="índice">Índice</h2> <ul> <li><a href="#introdução">Introdução</a></li> <li><a href="#processo-de-candidatura">Processo de Candidatura</a></li> <li><a href="#níveis-de-classificação">Níveis de Classificação</a></li> <li><a href="#requisitos-selo-bronze">Requisitos Selo Bronze</a></li> <li><a href="#requisitos-selo-prata">Requisitos Selo Prata</a></li> <li><a href="#requisitos-selo-ouro">Requisitos Selo Ouro</a></li> <li><a href="#condições-de-atribuição-e-afixação-do-Selo">Condições de atribuição e afixação do Selo</a></li> <li>Anexos <ul> <li><a href="#formato-svg-do-selo-usabilidade-e-acessibilidade">Selos em formato SVG</a></li> <li>Listas de requisitos: <ul> <li><a href="/kit-selo/checklists/checklist-10aspetos.html">Lista de requisitos “10 aspectos funcionais”</a></li> <li><a href="/kit-selo/checklists/checklist-conteudo.html">Lista de requisitos “Conteúdo”</a></li> <li><a href="/kit-selo/checklists/checklist-transacao.html">Lista de requisitos “Transação”</a></li> </ul> </li> <li>Documentos de recolha de evidências das listas de requisitos: <ul> <li><a href="/kit-selo/checklists/sintese-10aspetos.xlsx">Recolha de evidências da lista de requisitos 10 aspetos funcionais (xlsx, 125KB)</a></li> <li><a href="/kit-selo/checklists/sintese-conteudo.xlsx">Recolha de evidências da lista de requisitos “Conteúdo” (xlsx, 103KB)</a></li> <li><a href="/kit-selo/checklists/sintese-transacao.xlsx">Recolha de evidências da lista de requisitos “Transação” (xlsx, 87KB)</a></li> </ul> </li> <li>Documentos de recolha de evidências das Listas de Requisitos em formato código aberto: <ul> <li><a href="/kit-selo/checklists/sintese-10aspetos.ods">Recolha de evidências da lista de requisitos 10 aspetos funcionais (ods, 56KB)</a></li> <li><a href="/kit-selo/checklists/sintese-conteudo.ods">Recolha de evidências da lista de requisitos “Conteúdo” (ods, 53KB)</a></li> <li><a href="/kit-selo/checklists/sintese-transacao.ods">Recolha de evidências da lista de requisitos “Transação” (ods, 50KB)</a></li> </ul> </li> <li>Declaração de Acessibilidade e Usabilidade <ul> <li><a href="https://www.acessibilidade.gov.pt/gerador/">Gerador da Declaração de Acessibilidade e Usabilidade</a></li> </ul> </li> </ul> </li> </ul> <h1 id="introdução">Introdução</h1> <p>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, a qual estabelece a adoção de normas abertas nos sistemas informáticos do Estado. Na sequência desta legislação surgiu o <a href="https://diariodarepublica.pt/dr/detalhe/resolucao-conselho-ministros/2-2018-114457664" title="Última versão: RCM n.º 5/2018, de 5 de janeiro">Regulamento Nacional de Interoperabilidade Digital (RNID)</a>. 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 estabelecem-se os requisitos de acessibilidade dos sítios web e das aplicações móveis de organismos públicos de todos os Estados-Membros da União Europeia. Os requisitos de acessibilidade encontram-se na <a href="https://www.etsi.org/human-factors-accessibility/en-301-549-v3-the-harmonized-european-standard-for-ict-accessibility">Norma Europeia EN301549</a>. O grupo-alvo do RNID está definido como:</p> <blockquote> <p>«Artigo 2.º<br /> Âmbito de aplicação</p> <ol> <li>A presente lei aplica-se às seguintes entidades: <ol type="none"> <li>a) Estado;</li> <li>b) Regiões Autónomas;</li> <li>c) Institutos públicos;</li> <li>d) Entidades administrativas independentes;</li> <li>e) Fundações públicas;</li> <li>f) Associações públicas;</li> <li>g) Entidades do setor público empresarial.</li> </ol> </li><li>No que se refere à acessibilidade dos sítios web e das aplicações móveis, a presente lei aplica-se igualmente às seguintes entidades: <ol type="none"> <li>a) Autarquias locais;</li> <li>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;</li> <li>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.»</li> </ol> </li></ol> <cite>Redação introduzida na Lei n.º 36/2011 pelo DL n.º 83/2018, de 19 de outubro</cite> </blockquote> <p>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.</p> <p>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 básico. Ao nível intermédio corresponde o Selo Prata e ao nível mais elevado corresponde o Selo Ouro. Os requisitos aplicáveis a cada nível são cumulativos com os requisitos dos níveis que o antecedem - por exemplo, para obter o Selo Ouro, é necessário adicionar ao relatório com os testes com utilizadores, os requisitos definidos para o Selo Bronze e para o Selo Prata.</p> <p>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 que os estudos têm relevado serem críticos e 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.</p> <h2 id="processo-de-candidatura">Processo de Candidatura</h2> <p>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 listas de requisitos 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. -, devem ir engrossando a compilação de evidências anexas à Declaração de Acessibilidade. São as evidências que sustentam a declaração - conforme, parcialmente conforme, não conforme - tornada pública na Declaração de Acessibilidade.</p> <p>Para preencher a Declaração de Acessibilidade, a AMA criou uma ferramenta que permite gerar a Declaração de acordo com o modelo definido na legislação - <a href="https://www.acessibilidade.gov.pt/gerador/">use o gerador da Declaração de Acessibilidade e Usabilidade</a>. A Declaração deve ficar publicada na pasta /acessibilidade do sítio web (i.e. www.dominio_do_site.pt/acessibilidade).</p> <p>A Declaração de Acessibilidade e Usabilidade é, ela própria, o formulário de candidatura. Ela é tudo o que precisa para se candidatar ao Selo. Basta ir à <a href="https://selo.usabilidade.gov.pt/candidatura.html#scroll-error">página de Candidatura do sitio web do Selo</a> e dizer-nos em que endereço se encontra a Declaração e qual é o Selo a que pretende candidatar-se: bronze. prata ou ouro. A equipa da AMA dará início á validação da informação constante da Declaração e dar-lhe-á retorno via correio eletrónico.</p> <h2 id="níveis-de-classificação">Níveis de Classificação</h2> <p>O Selo de Usabilidade e Acessibilidade está estruturado em 3 níveis de classificação, correspondendo a 3 níveis de esforço distintos:</p> <ul> <li>O nível 1, o mais básico, corresponde ao Selo Bronze;</li> <li>O nível 2, o intermédio, corresponde ao Selo Prata;</li> <li>O nível 3, o mais exigente em termos de esforço, corresponde ao Selo Ouro.</li> </ul> <h2 id="requisitos-selo-bronze">Requisitos Selo Bronze</h2> <p>Para a atribuição do Selo Bronze, a Declaração de Acessibilidade e Usabilidade deve declarar que o sítio web está “plenamente conforme” para com os requisitos de acessibilidade constantes do DL n.º 83/2018 e anexar evidências que comprovem, no mínimo:</p> <ol> <li>A existência de uma avaliação automática às práticas de acessibilidade de uma amostra de páginas feita por um validador de acessibilidade que comprove a inexistência de violações de conformidade nível ‘AA’ das WCAG 2.1 do W3C. A amostra deve, no mínimo, contemplar a primeira página e todas as páginas, pertencentes ao domínio, diretamente hiperligadas a esta, e;</li> <li>A existência da <a href="checklists/checklist-10aspetos">lista de requisitos “10 aspetos críticos de acessibilidade funcional”</a>, com evidências compiladas que demonstrem a satisfação dos requisitos constantes da lista de requisitos, e;</li> <li>A existência da <a href="checklists/checklist-conteudo">lista de requisitos “Conteúdo”</a>, com evidências compiladas que demonstrem a satisfação dos requisitos constantes da lista de requisitos.</li> </ol> <p>Aviso: para o primeiro ano de operação do Selo de Usabilidade e Acessibilidade considera-se “plenamente conforme” se, no mínimo:</p> <ul> <li>da avaliação automática recolhida no AccessMonitor resultar nota 9 em todas as páginas da amostra, e;</li> <li>da avaliação manual efetuada às duas listas de requisitos resultar um grau de satisfação de 75% dos requisitos existentes em cada uma delas.</li> </ul> <h2 id="requisitos-selo-prata">Requisitos Selo Prata</h2> <p>Para a atribuição do Selo Prata, a Declaração de Acessibilidade e Usabilidade deve declarar que o sítio web está “plenamente conforme” para com os requisitos de acessibilidade constantes do DL n.º 83/2018 e anexar evidências que comprovem, no mínimo:</p> <ol> <li>Responder ao esquema de conformidade do Selo Bronze, e;</li> <li>A existência da <a href="checklists/checklist-transacao">lista de requisitos “Transação”</a>, com evidências compiladas que demonstrem a satisfação dos requisitos constantes da lista de requisitos.</li> </ol> <p>Aviso: para o primeiro ano de operação do Selo de Usabilidade e Acessibilidade considera-se “plenamente conforme” se, no mínimo:</p> <ul> <li>da avaliação automática recolhida no AccessMonitor resultar nota 9 em todas as páginas da amostra, e;</li> <li>da avaliação manual efetuada às três listas de requisitos resultar um grau de satisfação de 75% dos requisitos existentes em cada uma delas.</li> </ul> <h2 id="requisitos-selo-ouro">Requisitos Selo Ouro</h2> <p>Para a atribuição do Selo Ouro, a Declaração de Acessibilidade e Usabilidade deve declarar que o sítio web está “plenamente conforme” para com os requisitos de acessibilidade constantes do DL n.º 83/2018 e anexar evidências que comprovem, no mínimo:</p> <ol> <li>Responder ao esquema de conformidade do Selo Prata, e;</li> <li>A existência de um relatório dos testes levados a efeito com utilizadores - testes de usabilidade.</li> </ol> <p>Os testes de usabilidade devem contemplar uma amostra de, no mínimo, 6 participantes, com um grupo composto por 2 pessoas com deficiência, de uma das tipologias constante da EN301549, e 4 pessoas sem deficiência.</p> <h3 id="algumas-notas-a-observar-na-realização-dos-testes-de-usabilidade">Algumas notas a observar na realização dos testes de usabilidade</h3> <p><strong>1. Protocolo de testes adequado</strong></p> <p>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 deficiência ou incapacidades, o protocolo deve ser aplicado no seu local habitual de utilização, usando as suas tecnologias de apoio com as configurações personalizadas pelo próprio participante.</p> <p><strong>2. Protocolo de testes sem viés</strong></p> <p>O teste procurará não influenciar as opções do utilizador e não deverá fornecer pistas sobre a realização das tarefas. 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.</p> <p>Sugere-se a criação de um número reduzido de tarefas, na ordem das 3 a 4 tarefas, que permita a realização expectável da sessão não superior a 1 hora.</p> <p><strong>3. Autorizações e registos das sessões</strong></p> <p>A entidade deve solicitar autorização por escrito aos participantes e, sempre que apropriado, deve efetuar registos vídeo ou áudio das sessões.</p> <p><strong>4. Relatório final com observações e recomendações</strong></p> <p>O relatório final a incluir na Declaração de Acessibilidade deve conter:</p> <ul> <li>Caracterização dos participantes, incluindo as pessoas com deficiência (experiência de uso, faixas etárias, tipologias de incapacidades, tecnologias de apoio utilizadas, …).</li> <li>Metodologia e material de registo utilizado.</li> <li>Guião das tarefas realizadas.</li> <li>Resultados obtidos: <ul> <li>taxas de sucesso na execução das tarefas;</li> <li>tempos de execução das tarefas (eficiência);</li> <li>barreiras encontradas;</li> <li>estratégias de navegação;</li> <li>grau de satisfação dos utilizadores para com o sítio web;</li> </ul> </li> <li>Principais recomendações e lições aprendidas.</li> <li>Correções efetuadas à luz das recomendações e lições aprendidas.</li> </ul> <h2 id="condições-de-atribuição-e-afixação-do-selo">Condições de atribuição e afixação do Selo</h2> <h3 id="período-de-atribuição">Período de Atribuição</h3> <p>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.</p> <h3 id="método-de-aplicação">Método de Aplicação</h3> <p>Após a atribuição do Selo, pode afixar o mesmo usando o seguinte código HTML:</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://selo.usabilidade.gov.pt"</span><span class="nt">></span> <span class="nt"><img</span> <span class="na">alt=</span><span class="s">"Selo Ouro de Usabilidade e Acessibilidade"</span> <span class="na">src=</span><span class="s">"/caminho-para-a-imagem/ouro.svg"</span><span class="nt">></span> <span class="nt"></a></span> </code></pre></div></div> <p>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. A única obrigatoriedade é que o Selo surja, pelo menos, na página de entrada do sítio Web.</p> <h3 id="caducidade-do-selo">Caducidade do Selo</h3> <p>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.</p> <h2 id="anexos">Anexos</h2> <h3 id="formato-svg-do-selo-usabilidade-e-acessibilidade">Formato SVG do Selo Usabilidade e Acessibilidade</h3> <p>Todos os selos que se encontram abaixo estão em formato <abbr title="Scalable Vector Graphics" lang="en">SVG</abbr>, o formato vetorial gráfico do <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>. 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”.</p> <p>Para cada nível existem 4 versões do selo. Pode optar por afixar aquela que melhor se adequa ao seu <em lang="en">design</em>.</p> <h4 id="versões-do-selo-ouro">Versões do Selo Ouro</h4> <p><img height="150" alt="selo vertical com fundo dourado e letra a branco com a expressão Selo Ouro" src="img/ouro.svg" /><br /> <img height="150" alt="selo vertical com fundo dourado e letra a branco com a expressão Selo Ouro, Usabilidade & Acessibilidade" src="img/ouro-vertical.svg" /><br /> <img height="150" alt="selo horizontal com fundo dourado e letra a branco com a expressão Selo Ouro e, com fundo branco e letra cinzenta a expressão Selo de Usabilidade & Acessibilidade" src="img/ouro-horizontal-branco.svg" /><br /> <img height="150" alt="selo horizontal com fundo dourado e letra a branco com a expressão Selo Ouro, Selo de Usabilidade & Acessibilidade" src="img/ouro-horizontal.svg" /></p> <h4 id="versoões-do-selo-prata">Versoões do Selo Prata</h4> <p><img height="150" alt="selo vertical com fundo prata e letra a branco com a expressão Selo Prata, Usabilidade & Acessibilidade" src="img/prata.svg" /><br /> <img height="150" alt="selo vertical com fundo prata e letra a branco com a expressão Selo Prata" src="img/prata-vertical.svg" /><br /> <img height="150" alt="selo horizontal com fundo dourado e letra a branco com a expressão Selo Prata e, com fundo branco e letra cinzenta a expressão Selo de Usabilidade & Acessibilidade" src="img/prata-horizontal-branco.svg" /><br /> <img height="150" alt="selo horizontal com fundo prata e letra a branco com a expressão Selo Prata, Selo de Usabilidade & Acessibilidade" src="img/prata-horizontal.svg" /></p> <h4 id="versões-do-selo-bronze">Versões do Selo Bronze</h4> <p><img height="150" alt="selo vertical com fundo bronze e letra a branco com a expressão Selo Bronze, Usabilidade & Acessibilidade" src="img/bronze.svg" /><br /> <img height="150" alt="selo vertical com fundo bronze e letra a branco com a expressão Selo Bronze" src="img/bronze-vertical.svg" /><br /> <img height="150" alt="selo horizontal com fundo bronze e letra a branco com a expressão Selo bronze e, com fundo branco e letra cinzenta a expressão Selo de Usabilidade & Acessibilidade" src="img/bronze-horizontal-branco.svg" /><br /> <img height="150" alt="selo horizontal com fundo bronze e letra a branco com a expressão Selo Bronze, Selo de Usabilidade & Acessibilidade" src="img/bronze-horizontal.svg" /></p> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script> <script>anchors.add();</script> </body> </html>