Nota: Para recolha das evidências relativas a esta lista de verificação utilize o ficheiro Excel: Recolha de evidências da Lista de verificação “10 aspetos críticos de acessibilidade funcional” (xlsx, 125KB)
Requisitos a cumprir:
1 – Menu de navegação
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 É 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 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 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á ser utilizado mais do que um <h1> por página.
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 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 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 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 É 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 É 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 – Gráficos e imagens-link
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 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 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 – Contraste
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 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 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 O vídeo ou o áudio deve conter preferencialmente legendas fechadas sincronizadas. Caso não seja possível, no mínimo, deve disponibilizar-se 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 (por ex., o toque de uma campaínha de uma porta).
Para vídeos com mensagens eminentemente visuais (por ex., 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 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 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 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ítulos, parágrafos, listas, …
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 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 (por ex., <main>) e genéricos (por ex., <div>), que permitem a recomposição visual para diferentes tipos e dimensões de ecrã.
9 – Sintaxe de HTML
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.