Premi Tab sulla maggior parte dei siti di e-commerce e conta. Uno, due, tre… sei ancora nell’intestazione. Dieci, quindici, venti… hai superato il menu di navigazione. Venticinque Tab dopo, finalmente raggiungi il contenuto principale.
Per chi usa un mouse, quell’intestazione è un sovraccarico invisibile. Per gli utenti da tastiera, è un muro che scalano ogni volta che caricano una pagina, o navigano di nuovo verso una pagina già visitata. Su un negozio con un mega menu di 30 elementi, quel muro può richiedere più di un minuto per essere attraversato.
I link di salto della navigazione risolvono questo problema in due secondi. Premi Tab una volta, dai Invio e sei al contenuto. È la funzionalità di accessibilità più semplice nello sviluppo web, eppure la maggior parte dei negozi Shopify non ne ha uno, e molti di quelli che ne hanno implementano erroneamente.
- WCAG 2.4.1 (Livello A) richiede un meccanismo per bypassare i blocchi di contenuto ripetuti—i link di salto sono la soluzione standard
- L'intestazione media dell'e-commerce obbliga gli utenti da tastiera attraverso 20-40 arresti di tabulazione prima di raggiungere il contenuto principale
- I link di salto riducono il sovraccarico di navigazione da 30+ secondi a meno di 2 secondi per pagina
- Solo il 32% dei primi 1 milione di siti web ha un link di salto funzionante (WebAIM 2024)
- GitHub, Amazon e Google utilizzano tutti link di salto—sono pratica standard, non un caso limite
Perché Esistono i Link di Salto
Ogni sito web ha blocchi di contenuto ripetuti: il logo, la navigazione principale, la barra di ricerca, banner promozionali, forse una barra di utilità con link di accesso/carrello. Gli utenti del mouse saltano istantaneamente questi elementi—i loro occhi saltano al contenuto e il cursore li segue.
Gli utenti da tastiera non hanno quel lusso. L’ordine di tabulazione è lineare. Ogni elemento interattivo nell’intestazione viene visitato in sequenza: collegamento del logo, ogni elemento nav, pulsante di ricerca, icona del carrello, collegamento dell’account. Se il tuo mega menu è espandibile, ogni elemento del sottomenu si aggiunge al conteggio.
WCAG Success Criterion 2.4.1 (Bypass Blocks) esiste specificamente per affrontare questo. Al Livello A—il livello minimo di conformità—richiede “un meccanismo per bypassare i blocchi di contenuto che vengono ripetuti su più pagine Web.”
I link di salto della navigazione sono la soluzione universalmente accettata. W3C Web Accessibility Initiative li elenca come la tecnica preferita per soddisfare 2.4.1.
Quanto è Male il Problema Senza Link di Salto?
Per quantificare il problema, considera un’intestazione tipica del negozio Shopify:
| Elemento | Arresti di Tabulazione |
|---|---|
| Logo (link) | 1 |
| Elementi di navigazione principale (6 categorie) | 6 |
| Link del mega menu per categoria (media 8) | 48 |
| Pulsante di ricerca | 1 |
| Account/accesso | 1 |
| Icona del carrello | 1 |
| Link banner promozionale | 1 |
| Selettore lingua/valuta | 2 |
| Totale | 61 |
A circa 0,5 secondi per pressione di Tab, sono 30 secondi di sovraccarico prima di raggiungere il contenuto principale. Su ogni pagina. Se un utente visita 5 pagine in una sessione, sono 2,5 minuti di tabulazione attraverso la stessa navigazione.
Gli utenti di screen reader lo sperimentano ancora più acutamente. Ogni arresto di tabulazione non è solo un salto visivo—lo screen reader annuncia l’elemento: “Link, Abbigliamento da donna. Link, Abbigliamento da uomo. Link, Bambini. Link, Saldi…” Ogni annuncio richiede 1-2 secondi di audio.
Un link di salto funzionante elimina tutto questo.
Come Funzionano i Link di Salto
Un link di salto è un collegamento di ancoraggio che punta all’area di contenuto principale. È il primo elemento focalizzabile sulla pagina—il che significa la prima cosa che appare quando un utente preme Tab.
Implementazione di Base
L’HTML è minimo:
<!-- Primo elemento dentro <body> -->
<a href="#main-content" class="skip-link">Salta al contenuto principale</a>
<!-- ...intestazione, navigazione, ecc... -->
<!-- Area di contenuto principale -->
<main id="main-content" tabindex="-1">
<!-- Contenuto della pagina qui -->
</main>
Il tabindex="-1" sull’elemento <main> è importante. Senza di esso, alcuni browser non sposteranno il focus sul target quando il link di salto viene attivato. L’elemento deve essere programmaticamente focalizzabile anche se non dovrebbe apparire nell’ordine di tabulazione normale.
CSS: Visibile Se Focalizzato, Nascosto Altrimenti
I link di salto sono tipicamente nascosti fino a quando l’utente non preme Tab. Questo li mantiene invisibili per gli utenti del mouse mentre li rende la prima cosa che gli utenti da tastiera incontrano:
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
z-index: 9999;
}
.skip-link:focus {
position: fixed;
top: 10px;
left: 10px;
width: auto;
height: auto;
padding: 12px 24px;
background: #000000;
color: #FFFFFF;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 100000;
}
Quando il link di salto riceve il focus (l’utente preme Tab), scorre nella vista all’angolo in alto a sinistra. È grande, ad alto contrasto e impossibile da perdere. Quando il focus si sposta oltre ad esso, scompare di nuovo.
Perché display: none Non Funziona
Un errore comune è nascondere i link di salto con display: none o visibility: hidden:
/* NON fare questo */
.skip-link {
display: none;
}
.skip-link:focus {
display: block;
}
Gli elementi con display: none vengono rimossi completamente dall’ordine di tabulazione. Il link di salto diventa non focalizzabile—potrebbe anche non esistere.
La tecnica corretta utilizza il posizionamento fuori schermo. L’elemento è ancora nel DOM e nell’ordine di tabulazione; è solo visivamente posizionato dove nessuno può vederlo fino a quando non viene focalizzato.
Implementazione dei Link di Salto in Shopify
L’aggiunta di un link di salto a un negozio Shopify richiede la modifica del file di layout del tema. Ecco il processo passo dopo passo.
Passaggio 1: Modifica theme.liquid
Apri l’editor tema Shopify e vai a Layout > theme.liquid. Trova il tag di apertura <body> e aggiungi il link di salto immediatamente dopo:
<body>
<a href="#MainContent" class="skip-link">Salta al contenuto</a>
<!-- resto del tuo tema... -->
Passaggio 2: Aggiungi l’ID di Destinazione
Trova dove inizia il tuo contenuto principale. Nella maggior parte dei temi Shopify, questo è un tag <main> o un <div> con una classe specifica. Aggiungi l’ID di destinazione:
<main id="MainContent" role="main" tabindex="-1">
Molti temi Shopify hanno già un elemento con id="MainContent". Controlla il tuo tema prima di aggiungere un duplicato.
Passaggio 3: Aggiungi il CSS
Aggiungi gli stili del link di salto al file CSS del tuo tema. Utilizza gli stili della sezione precedente, adattando i colori al tuo marchio.
Passaggio 4: Testa
Premi Tab sulla homepage del tuo negozio. Il link di salto dovrebbe apparire all’angolo in alto a sinistra. Premi Invio. Il focus dovrebbe saltare all’area di contenuto principale, bypassando l’intera intestazione.
Testa su più pagine—pagine di prodotto, pagine di raccolta, carrello e checkout—per verificare che il link di salto funzioni in modo coerente.
Link di Salto Multipli
Alcuni siti traggono beneficio da più di un link di salto. Se la tua pagina ha più aree di contenuto (filtri della barra laterale, griglia di prodotti, navigazione del footer), puoi fornire scorciatoie per ciascuno:
<div class="skip-links">
<a href="#MainContent" class="skip-link">Salta al contenuto</a>
<a href="#ProductGrid" class="skip-link">Salta ai prodotti</a>
<a href="#SearchBar" class="skip-link">Salta alla ricerca</a>
</div>
Ogni link di salto aggiuntivo appare quando l’utente preme Tab oltre quello precedente. Il primo Tab mostra “Salta al contenuto”, il secondo mostra “Salta ai prodotti”, il terzo mostra “Salta alla ricerca”.
Usa questo modello con moderazione. Due o tre link di salto è utile. Dieci link di salto sconfigge lo scopo—stai solo creando un altro blocco da bypassare.
Come i Siti Top Gestiscono Questo
- GitHub: Due link di salto—”Skip to content” e “Skip to footer navigation”
- Amazon: Un link di salto—”Skip to main content”
- Google: Un link di salto—”Skip to main content” (appare sui risultati di ricerca)
- BBC: Tre link di salto—”Skip to content,” “Accessibility Help,” e “Skip to Live Chat”
Il consenso industriale è che uno o due link di salto copre il 95% dei casi d’uso.
Errori di Implementazione Comuni
Nonostante sia una delle funzionalità di accessibilità più semplici, i link di salto falliscono sorprendentemente spesso. Il rapporto di WebAIM 2024 su 1 Milione di Pagine Iniziali ha rilevato che solo il 32,4% dei primi milioni di siti web aveva un link di salto funzionante.
Ecco i fallimenti più comuni:
Errore 1: Il Link di Salto Non Va da Nessuna Parte
Il link di salto esiste, ma l’ID di destinazione non corrisponde:
<!-- Il link punta a #main -->
<a href="#main" class="skip-link">Salta al contenuto</a>
<!-- Ma il contenuto ha un ID diverso -->
<main id="MainContent">
Premere Invio sul link di salto non fa nulla. L’utente è confuso.
Soluzione: Verifica che il valore href corrisponda all’id sull’elemento di destinazione. Testa facendo clic sul link di salto e verificando se il focus si sposta.
Errore 2: La Destinazione Non È Focalizzabile
Senza tabindex="-1", alcuni browser non sposteranno il focus sulla destinazione:
<!-- Manca tabindex -->
<main id="MainContent">
L’hash dell’URL cambia (vedi #MainContent nella barra degli indirizzi), ma il focus rimane dove era. L’utente preme Tab e ottiene il prossimo elemento header invece del primo elemento di contenuto.
Soluzione: Aggiungi tabindex="-1" all’elemento di destinazione.
Errore 3: Il Link di Salto Non È Mai Visibile
Alcune implementazioni mantengono il link di salto permanentemente nascosto:
.skip-link {
display: none !important;
}
Questo viola WCAG. I link di salto devono essere visibili quando focalizzati. Possono essere fuori schermo per impostazione predefinita, ma devono apparire al focus.
Soluzione: Utilizza la tecnica di posizionamento fuori schermo descritta sopra, non display: none.
Errore 4: Il Link di Salto Appare Dopo Altri Elementi
Se il link di salto non è il primo elemento focalizzabile, sconfigge il suo scopo. Gli utenti tabulano attraverso altri elementi prima di raggiungerlo:
<body>
<div class="promo-bar">
<a href="/sale">Vendita estiva - 20% di sconto</a>
</div>
<a href="#MainContent" class="skip-link">Salta al contenuto</a>
Qui, il collegamento del banner promozionale riceve il focus per primo. Il link di salto è secondo.
Soluzione: Posiziona il link di salto come primo figlio di <body>, prima di qualsiasi banner, intestazione o altro contenuto.
Link di Salto e Screen Reader
I link di salto vanno a beneficio di tutti gli utenti da tastiera, ma sono particolarmente importanti per gli utenti di screen reader.
Quando uno screen reader incontra una pagina, legge gli elementi in ordine DOM. Senza un link di salto, l’utente sente l’intestazione completa su ogni pagina: “Banner, link, Navi Plus. Navigazione, lista, 6 elementi. Link, Abbigliamento da donna. Link, Abbigliamento da uomo…” Questo richiede 30-60 secondi per pagina.
Con un link di salto, lo screen reader annuncia: “Link, Salta al contenuto.” L’utente preme Invio e sente immediatamente l’intestazione della pagina o il primo paragrafo.
Gli screen reader moderni hanno anche una navigazione dei landmark integrata (premi H per saltare ai titoli, premi 1-6 per i livelli di titoli, premi D per i landmark). Ma i link di salto sono un fallback universale che funziona anche quando l’HTML semantico è imperfetto.
Controllo tema ShopifySe stai utilizzando un tema basato su Shopify Dawn (2.0+), il link di salto è già integrato. Cerca "skip" nel tuo theme.liquid per verificare. Se sei su un tema più vecchio o un tema personalizzato, probabilmente dovrai aggiungerne uno manualmente.
L’Argomento della Velocità per i Link di Salto
I link di salto non riguardano solo la conformità all’accessibilità. Sono una funzionalità di produttività.
Considera un acquirente B2B che effettua un ordine settimanale. Visitano il tuo negozio, vanno direttamente a una pagina di raccolta tramite segnalibro e iniziano ad aggiungere prodotti. Se stanno utilizzando la navigazione da tastiera (molti professionisti dell’inserimento dati lo fanno), ogni ricaricamento della pagina li costringe attraverso l’intestazione di nuovo.
Senza link di salto: 30 secondi di tabulazione dell’intestazione per pagina, 20 pagine per sessione = 10 minuti sprecati in navigazione ripetuta.
Con link di salto: 2 secondi per pagina, 20 pagine per sessione = 40 secondi totali.
Questo è una riduzione del 93% del sovraccarico di navigazione. Per un acquirente frequente, questa è la differenza tra “tollerabile” e “efficiente.” È il genere di dettaglio che trasforma un cliente una tantum in un cliente abituale.
Strumenti come Navi+ Menu Builder possono aiutare generando strutture di navigazione che funzionano bene con i link di salto e la navigazione da tastiera già pronti—il che significa che non devi adattare questi modelli a un tema che non è stato progettato per loro.
Elenco di Controllo dei Test
Prima di considerare la tua implementazione del link di salto completa, verifica ciascuno di questi:
- Premi Tab su un caricamento di pagina fresh. Il link di salto appare visivamente in cima al viewport.
- Premi Invio sul link di salto. Il focus si sposta al contenuto principale (verifica con Tab—l’elemento focalizzato successivo dovrebbe essere all’interno del contenuto principale, non nell’intestazione).
- Il link di salto ha un contrasto sufficiente (4.5:1 per il testo, poiché è testo di dimensioni normali).
- Il link di salto funziona su ogni tipo di pagina: homepage, raccolta, prodotto, carrello, risultati di ricerca, blog.
- Su mobile (testa nei dev tools del browser), il link di salto appare e funziona ancora correttamente.
- Il link di salto è il primo elemento focalizzabile sulla pagina—niente altro riceve il focus prima di esso.
- Dopo aver utilizzato il link di salto, premere Shift+Tab sposta il focus di nuovo nell’intestazione (non di nuovo al link di salto).
Se tutti e sette passiamo, la tua implementazione del link di salto è solida. Ha richiesto 15 minuti per costruire e farà risparmiare agli utenti da tastiera ore di frustrazione cumulativa.
Questo articolo è parte della guida più ampia su Navigazione da tastiera: perché è importante oltre l’accessibilità.