Skip link: il primo link della pagina

Uno skip link è un collegamento nascosto che compare al primo Tab e porta il focus al contenuto principale, saltando il menu ripetuto su ogni pagina. Il criterio WCAG 2.4.1 Bypass Blocks, livello A, chiede esattamente questo: un meccanismo per superare i blocchi di contenuto ripetuti.

Dove va messo

Nel DOM è il primo elemento focusabile: prima dell'header, non dopo. Deve puntare all'id del contenuto principale, e il bersaglio deve avere tabindex="-1". Senza quell'attributo alcuni browser spostano solo lo scroll e il Tab successivo riparte dal menu. Il pattern è descritto nelle WAI-ARIA Authoring Practices, pubblicate dal W3C con W3C Document License.

Il markup minimo

Skip to main content
...
...

Tre dettagli decidono se funziona. Il testo dice dove si va, non «salta». Il link resta nel flusso del documento, quindi non va avvolto in un contenitore con aria-hidden. Il bersaglio ha tabindex="-1" per ricevere il focus, e non va nascosto con display:none.

Nasconderlo senza romperlo

.skip-link {
  position: absolute;
  top: -10rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
}

.skip-link:focus {
  top: 1rem;
}

Il link esce dallo schermo con il posizionamento, non con display:none o visibility:hidden: quei valori lo tolgono anche dall'ordine di tabulazione. Al focus torna visibile, e il bordo nero su bianco misura 21:1, sopra il 3:1 richiesto dal criterio 1.4.11 Non-text Contrast, livello AA. Il criterio 2.4.7 Focus Visible, livello AA, chiede che l'indicatore resti visibile.

Come verificarlo in dieci secondi

Carica la pagina e premi Tab una volta sola: il primo elemento evidenziato deve essere lo skip link. Premi Enter e controlla che il focus sia nel main, poi premi Tab di nuovo: il primo controllo deve essere dentro il contenuto, non nel menu. Lo stesso controllo si automatizza solo in parte, perché gli strumenti non simulano la sequenza.

npx --yes pa11y https://example.com --standard WCAG2A

Pa11y è open source con licenza LGPL-3.0 e riporta violazioni statiche con selettore e criterio. Il 2.4.1 non ha però un test automatico affidabile: un link presente ma non raggiungibile passa comunque. La sequenza di Tab resta la prova.

Il catalogo EneUI

EneUI indicizza i componenti della categoria accessibilità, la navigazione e il record sidebar di shadcn, licenza MIT del progetto shadcn/ui. La sidebar è il caso tipico da saltare: resta montata su ogni route e ripete decine di link. Controllo eseguito il 1 novembre 2026 sul catalogo da 111.985 componenti.

La limitazione

Lo skip link serve a chi usa la tastiera, non a chi usa un lettore di schermo: quel gruppo naviga per landmark e titoli e quasi non lo incontra. Non sostituisce una struttura di heading corretta né un <main> unico per pagina; se il main non esiste, il link non ha bersaglio.

Dove continuare

La checklist operativa è in componenti React accessibili; la mappa dei ruoli è in che cos'è ARIA. Il confronto tra blocchi di navigazione è in i migliori menu block.