Semântica de link
O que a norma pede
Todo link está marcado no código como link, para ser reconhecido e acionado pela tecnologia assistiva e pelo teclado.
- 1.3.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Indique na especificação o que é link e diferencie os links do texto comum com sublinhado ou outro sinal além da cor. Mantenha o mesmo estilo de link em todo o produto.
Card que leva ao serviço
Um card da página inicial abre a página do serviço.
Errado: Sem indicação
Na especificação
Card com ação “ao clicar, abrir página”, sem definir o elemento.
O card pode virar uma div clicável.
Certo: Definido como link
Na especificação
Card: o título é um link para /servicos/iptu.
O comportamento de link está garantido.
Faça links com o elemento a e um href real; span ou div com clique não recebe foco nem aparece na lista de links. Em aplicações de página única, use o componente de link do framework, que gera um a de verdade.
Navegação para o serviço
Um item leva à página do IPTU.
Errado: Span clicável
<span class="link" onclick="router.push('/iptu')">IPTU</span>Não recebe foco nem é anunciado como link.
Certo: Link de verdade
<a href="/iptu">IPTU</a>Funciona com teclado, leitor de tela e nova aba.
Inclua nos critérios de aceite que toda navegação use a com href e peça a verificação automática de elementos clicáveis sem semântica. Links falsos também atrapalham a indexação do site.
Menu da nova versão
O menu foi refeito em um framework novo.
Errado: Itens com onclick
Situação
Itens do menu são div com clique.
O menu some para quem usa teclado.
Certo: Itens como links
Situação
Itens do menu usam o componente de link do framework.
O menu funciona para todos.
Abra a lista de links do leitor de tela e compare com os links visíveis; todo elemento que leva a outra página deve estar nela. Confira também se cada link recebe foco com Tab e abre em nova aba.
Menu principal
O leitor de tela lista os links da página.
Errado: Menu ausente da lista
Leitor de tela anuncia: “Lista de links: Início, Contato”
Os itens do menu não são links.
Certo: Menu completo
Leitor de tela anuncia: “Lista de links: Início, Serviços, Notícias, Contato”
Todos os destinos estão acessíveis.
Crie links com a ferramenta de link do editor, em vez de colar endereços soltos no texto. Não sublinhe textos que não são links.
Link para o edital
O texto remete ao edital.
Errado: Endereço como texto
No editor
“Veja o edital em www.cidade.gov.br/edital-2025.”
O endereço não é um link.
Certo: Link no texto
No editor
“Veja o [edital de 2025].”
O link é reconhecido e acionável.