# Skip link: il primo link della pagina

Lo skip link è il primo link della pagina: porta la tastiera al contenuto principale e salta il menu. Lo chiede il criterio 2.4.1 Bypass Blocks, livello A.

> Pagina: https://ui.eneawork.it/blog/skip-link-guida
> Markdown: https://ui.eneawork.it/blog/skip-link-guida.md

*2026-11-01*

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.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. L'indice dei tag, che copre 1.275 componenti, assegna il tag navigation a 30 record e link a 5, letto da /api/components/tags lo stesso giorno.

## 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.

## FAQ

### Lo skip link è obbligatorio?

Sì, per il livello A: il criterio 2.4.1 Bypass Blocks chiede un meccanismo per saltare i blocchi ripetuti. Un link di salto è il modo più semplice, ma anche un main ben strutturato con titoli può bastare.

### Deve essere il primo elemento del body?

Sì, deve essere il primo elemento focusabile. Se un altro link o un bottone lo precede, chi usa la tastiera lo raggiunge dopo e il salto perde senso.

### Perché il main ha tabindex meno uno?

Perché il focus deve arrivare al contenitore, non solo allo scroll. tabindex="-1" rende il main focusabile da codice senza aggiungerlo all'ordine di tabulazione.

### Posso nasconderlo con display none?

No. display:none e visibility:hidden tolgono il link anche dall'ordine di tabulazione, quindi non può mai ricevere il focus. Spostalo fuori schermo e riportalo dentro al focus.

### Serve anche in una single page application?

Sì, e serve anche spostare il focus dopo il cambio di route. In una SPA il main resta lo stesso nodo: senza focus esplicito il lettore di schermo non annuncia la pagina nuova.