Criar activos acessíveis: Ligações

As hiperligações acessíveis ajudam todos os utilizadores (especialmente os que utilizam leitores de ecrã ou navegação por teclado) a compreender para onde uma hiperligação os levará e como interagir com ela. Este artigo aborda as práticas recomendadas para escrever um texto de ligação claro, utilizando um contexto significativo e evitando frases vagas como “clica aqui”. Aprende a tornar as tuas ligações mais úteis, informativas e compatíveis com as normas de acessibilidade.

Requisitos

• As hiperligações devem ser semanticamente designadas como tal.
• Idealmente, isto significa utilizar um elemento <a> com um valor href válido. Definir role="link" (e adicionar todos os outros aspectos da funcionalidade da ligação) pode ser aceitável em casos problemáticos raros.
• Um link deve ter texto que um programa possa reconhecer, seguindo o algoritmo de cálculo de nome acessível.
• As especificidades desta informação são definidas por outras especificações, como a WAI-ARIA, ou as normas da plataforma relevante.
• O objetivo de cada ligação deve ser claro e distinguível de outras ligações na mesma página, quer a partir do próprio texto da ligação (de preferência), quer a partir do contexto circundante da ligação.
• Aconselha-se a evitar nomes de ligações como:
  • Aprende mais,
  • Descobre mais,
  • Clica aqui para mais detalhes.
• As hiperligações que conduzem aos mesmos destinos devem utilizar consistentemente o mesmo texto de hiperligação (ou um texto muito semelhante) em todas as páginas do sítio Web
• As hiperligações devem poder ser focadas pelo teclado sem exigir um tempo preciso para cada batida de tecla.
• Além disso, as ligações devem ser activadas utilizando a tecla Enter/Return.
• A ordem de navegação dos elementos que podem ser focados (ligações, elementos de formulários, etc.) deve ser lógica e intuitiva.
• A ordem dos elementos deve obedecer a uma sequência lógica.
• As hiperligações devem ser visualmente distinguíveis do texto circundante sem hiperligações.
• As hiperligações não devem depender apenas da cor para se diferenciarem do texto circundante, a menos que haja contraste suficiente entre elas e o texto.
• Quando se passa o rato por cima da hiperligação ou esta é focada, deve aparecer um sinal visual adicional (como um sublinhado ou um contorno).
• As ligações devem ter um rácio de contraste de 4,5 para 1 (para texto pequeno) ou de 3 para 1 (para texto grande) em relação ao fundo.
• Todas as hiperligações devem apresentar um indicador visual de foco quando estão focadas.
• O contraste de todos os indicadores visuais de focagem em relação ao fundo deve ser de, pelo menos, 3 para 1.
• Os utilizadores devem ter uma forma de saltar blocos de conteúdo repetidos em várias páginas Web (por exemplo, uma longa lista de ficheiros num sítio Web de comércio eletrónico que é um elemento padrão de muitas páginas).
  • A ligação “saltar” deve ser o primeiro elemento visível da página.
  • A ligação “saltar” deve estar sempre visível ou no foco do teclado.
  • as hiperligações “Saltar”, os pontos de referência (por exemplo, <nav>, <main>, etc.) e o índice da página são métodos aceitáveis para cumprir o requisito WCAG 2.4.1 que permite aos utilizadores contornar blocos de conteúdo. É ideal incorporar todas estas técnicas no design, sempre que adequado.
• Um índice da página pode ser colocado no topo do conteúdo ou no cabeçalho.
• Idealmente, as ligações no índice devem corresponder à estrutura de títulos no conteúdo da página.

Exemplos

	O painel de filtros abre-se a pedido do utilizador, permitindo-lhe saltar a leitura do conteúdo desta coluna através do leitor de ecrã.
	NÃO FAZ: O exemplo a seguir usa incorretamente o tabindex para especificar uma ordem de tabulação alternativa. Se esta lista for navegada pela tecla tab, a lista é navegada pela ordem Página inicial, capítulo 3, capítulo 2, capítulo 1, o que não segue a sequência no conteúdo.
	Quando os campos de texto recebem o foco, é apresentada uma barra vertical no campo, indicando que o utilizador pode inserir texto, ou todo o texto é realçado, indicando que o utilizador pode escrever sobre o texto.
	NÃO FAZ: Neste exemplo, quando se utiliza um teclado, o botão de chamada para ação é ignorado (ou mesmo todo o elemento que dá ao utilizador informações cruciais).
	NÃO FAZ: Todos os elementos marcados a vermelho têm o mesmo aspeto, mas o preço de visualização é uma ligação. O resto do texto azul são apenas destaques. Isto significa que as hiperligações não são visualmente distinguíveis do texto circundante sem hiperligação. NÃO FAZ: Ao mesmo tempo, os elementos marcados a verde causam ação, mas parecem texto normal. Isto significa que as hiperligações não se distinguem visualmente do texto sem hiperligações que as rodeia.