Skip link

Definizione — Lo skip link è un collegamento, solitamente il primo elemento focalizzabile della pagina, che consente di saltare direttamente alla sezione principale (ad es. <main>). È cruciale per chi naviga da tastiera o con screen reader perché evita di ripetere ogni volta header, menù e banner. Soddisfa WCAG 2.4.1 (A) “Bypassare i blocchi”.

Implementazione essenziale

<a class="skip-link" class="text-primary" href="#contenuto">Salta al contenuto principale</a>
<header>…</header>
<main id="contenuto" tabindex="-1">
  <h1>Titolo pagina</h1>
  …
</main>

CSS (visibile al focus)

.skip-link {
  position: absolute; left: 1rem; top: -100rem;
  padding: .5rem .75rem; background: #fff; border: 2px solid currentColor;
}
.skip-link:focus { top: 1rem; z-index: 1000; }

Buone pratiche

• Posizione: rendilo il primo focus della pagina; non nasconderlo agli screen reader.
• Target: punta a <main id="…">; aggiungi tabindex="-1" per consentire lo spostamento del focus via script.
• Visibilità: al focus deve essere ben contrastato e non coperto dal menu fisso.
• SPA: dopo cambi pagina via JS, sposta il focus al titolo del contenuto e aggiorna eventualmente una regione aria-live di stato.

Test rapidi

• Premi Tab appena caricata la pagina: lo skip link è il primo elemento? È visibile al focus?
• Attivalo: il focus si sposta sull’h1 o sull’area principale senza intralci?