Avançar para o conteúdo
SilktideAjuda

Âncora em falta

A Silktide testa links que apontam para uma parte específica da mesma página — como #content — e comunica aqueles cujo destino não existe. Clicar num link destes não faz nada silenciosamente, deixando o utilizador onde estava.

<!-- Incorreto: não existe nada na página com id="content" -->
<a href="#content">Saltar para o conteúdo</a>

<!-- Corrigido: o destino existe -->
<a href="#content">Saltar para o conteúdo</a>
...
<main id="content">...</main>

Por que motivo isto é importante

Os links para âncoras em falta falham silenciosamente: não existe nenhuma página de erro, a página simplesmente não muda. Para utilizadores com visão, isto é confuso; para utilizadores de e de teclado, é ainda pior, porque estes links dentro da página são frequentemente os próprios mecanismos — como "saltar para o conteúdo" ou um índice — que tornam uma página longa navegável. Uma âncora quebrada remove discretamente esse atalho.

Como corrigir

  1. Adicione o destino em falta: atribua ao elemento pretendido um id que corresponda ao fragmento do link, por exemplo <section id="pricing"> para um link para #pricing.
  2. Ou corrija o link se o destino existir com um id diferente — os fragmentos distinguem maiúsculas de minúsculas, por isso #Pricing não corresponde a id="pricing".
  3. Se o link existir apenas para acionar , aponte ainda assim o respetivo fragmento para o id do elemento real. O link mantém assim o seu significado sem JavaScript; poderá ser necessário impedir a deslocação predefinida no seu script.
<!-- O fragmento corresponde ao elemento que o script apresenta -->
<a href="#details" onclick="toggle('details')">Mostrar detalhes</a>
<div id="details">...</div>

Como a Silktide testa isto

  1. Encontra todos os links na página cujo destino inclui um fragmento (a parte depois de #).
  2. Mantém apenas os links que apontam para a página atual — links compostos apenas por #fragment ou URLs completas para a mesma página. Os links para âncoras noutras páginas não são testados por esta verificação.
  3. Procura um elemento cujo id corresponda ao fragmento ou uma âncora <a name="..."> antiga com um nome correspondente.
  4. Assinala o link se nenhum dos dois existir.

Saiba mais

Última atualização

Esta página foi útil?