Links e Navegação Clara

O que é?

Práticas para tornar links e menus claros, descritivos e consistentes.

Trata-se de criar rótulos claros, usar de contraste adequado, diferenciar visual entre links e texto comum, indicar estados de interação – como foco (teclado ativo), hover (cursor sobre), visitado (link acessado) – e manuter estrutura consistente de menus e rodapés.

Por que é importante?

Links vagos ou menus inconsistentes confundem usuários.

Usuários de leitores de tela percorrem listas de links isolados — expressões como “clique aqui” ou “leia mais” perdem sentido. Pessoas com baixa visão ou deficiência cognitiva podem não identificar links sem boa diferenciação visual. Menus inconsistentes podem desorientar a navegação e fazer a pessoa perder a referência no conteúdo.

Quando utilizar?

Sempre que houver links ou menus.

Todas as interfaces que usam navegação ou hiperlinks devem aplicar essas diretrizes, tais como páginas de curso no Moodle, sites, portais, PDFs e apresentações.

Como aplicar?

Use rótulos descritivos e destaque visual consistente.

Rótulos: descreva destino ou ação do link (exemplo: “Acesse o Guia de Acessibilidade”).
Diferenciação visual: use cor com sublinhado ou ícone para distinguir links.
Estados de interação (foco/hover): garanta destaque visível.
Consistência: mantenha a ordem e posição de menus e rodapés.
Links externos: informe quando abrirem em nova aba ou janela.
Acessibilidade por teclado: garanta foco visível durante a navegação por Tab.

Método de verificação

Testar navegação por leitores de tela, foco visível pela navegação por teclado e analisar a consistência de navegação.

Leitor de tela: Teste a navegação por leitores de tela, percorra links com a funcionalidade (NVDA/JAWS). Cada um deve fazer sentido isoladamente.
Foco: navegue pelo teclado com Tab e Shift + Tab, verifique se o foco visível aparece.
Consistência: compare menus entre páginas e verifique consistência da navegação.
Automação: use WAVE / Axe para localizar links genéricos ou pouco descritivos.

Exemplos

Aplicar descrições corretas como "Acesse o Guia de Acessibilidade" e não aplicar descrições vagas como "Clique aqui".

Corretos:

Descrições de links e botões com detalhes que informem o tema, o formato e tamanho do arquivo, como “Acesse o Manual de Acessibilidade (PDF, 2 MB)”;
Links com cor diferente e sublinhados (sinal de interatividade);
Menus consistentes entre páginas.

Incorretos:

Descrições de links e botões como “Clique aqui”, pois não indicam o destino;
Link visualmente idêntico ao texto comum (exemplo: sem cor distinta e sublinhado);
Menus reorganizados em cada página.

O que não fazer?

Não insira links genéricos; não permita focos invisíveis; não crie menus inconsistentes.

Não aplique links vagos, pois não descrevem a ação ou o conteúdo;
Não use apenas cor para destaque, sem sublinhar, pois isso não garante percepção por todos;
Não deixe foco invisível, pois dificulta a navegação por teclado;
Não altere a ordem dos menus, pois quebra a consistência da navegação;
Não deixe de informar abertura em nova aba, pois o usuário pode perder o contexto.

Normas de referência

WCAG 2.4.1; WCAG 2.4.4; WCAG 2.4.9; WCAG 2.4.8; NBR 17225; eMAG.

WCAG 2.4.1 (Ignorar blocos): permite pular menus repetitivos.
WCAG 2.4.4 e 2.4.9 (Propósito do link): garantem que links sejam compreensíveis isoladamente.
WCAG 2.4.8 (Localização): ajuda o usuário a saber onde está na navegação.
NBR 17225 (Norma brasileira convergente às diretrizes internacionais) e eMAG (Guia de acessibilidade para governo eletrônico) detalham o uso de links descritivos e menus consistentes.

Outras normas relacionadas:

WCAG 1.4.1 (Uso da cor): links não devem depender apenas da cor para diferenciação.
WCAG 2.4.7 (Foco visível): foco sempre perceptível.

Saiba mais

Guias sobre links acessíveis e navegação.

W3C – Links e navegação: https://www.w3.org/TR/html401/struct/links.html
WebAIM – Accessible Links: https://webaim.org/techniques/hypertext/
eMAG – Diretrizes para links e menus: https://emag.governoeletronico.gov.br/
Documentação de acessibilidade do Moodle: https://moodle.com/pt-br/acessibilidade/

Índice