- 2025-10-09
- 4 minuti
Skip Link HTML: come migliorare l'accessibilita del sito web
Lo skip link è un link che consente alle persone di saltare blocchi ripetuti, andando direttamente al contenuto principale della pagina.
Questa tecnica è indicata nelle WCAG, nel Criterio di successo 2.4.1 Salto di blocchi, ed è utilissima per chi naviga da tastiera e in generale chi non utilizza un sistema di puntamento come il mouse o il trackpad.
Come creare lo skip link
Nel codice HTML, devi prima di tutto assicurarti di aver definito un’area di contenuto principale; l’ideale è utilizzare il tag <main>:
<main id="main">
...
</main>
e poi aggiungere il link a questa sezione, tramite ancora:
<a href="#main">Salta al contenuto principale</a>
Se vuoi, puoi fare in modo che lo skip link sia nascosto, ma deve essere raggiungibile da tastiera e tecnologie assistive e tornare visibile nel momento in cui riceve il focus.
Per farlo, puoi attribuire questo codice CSS:
.skip-link:not(:focus) {
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.skip-link {
border: 2px solid var(--primary-color);
position: absolute !important;
background: var(--grey-light);
top: 0px;
left: 0px;
padding: 4px 8px;
z-index: 9999;
color: var(--primary-color) !important;
}
In questo modo il link verrà nascosto visivamente quando non riceve il focus.
Sostituisci le variabili CSS con le tue variabili o direttamente il codice colore che preferisci.
Dove inserire lo skip link
Deve esserci uno skip link in ogni pagina del sito o della web application, e deve essere il primo elemento focusabile di pagina.
Ergo: mettilo prima di tutti gli altri elementi, subito dopo l’apertura del tag <body>, in modo da saltare il menu di navigazione e tutti gli altri elementi posti all’inizio della pagina, come il logo.
Articoli Correlati
