Creare un collegamento di salto che funzioni davvero
Collegare l'ancora a un elemento che può ricevere il focus
Creare un collegamento di salto che funzioni davvero è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Le due parti di un link di salto
Un link di salto funzionante ha due parti: un'ancora che conduce da qualche parte e una destinazione su cui può effettivamente atterrare. Devono essere presenti entrambe.
La parte dell'ancora
L'ancora è un normale link il cui href è un fragment, ad esempio un cancelletto seguito da un id. Facendovi clic, si indica al browser dove andare.
<a href="#main">Skip to main content</a>La parte della destinazione
La destinazione è l'elemento che volete raggiungere. Dategli un id corrispondente, così il fragment nell'href avrà un punto a cui puntare.
<main id="main"> ... </main>main è la destinazione naturale
Fate puntare il link di salto al landmark main. È l'unica area che contiene il contenuto specifico della pagina, esattamente il punto in cui gli utenti vogliono arrivare.
Fare clic non basta
Un problema comune del passato: il link fa scorrere la pagina, ma il focus rimane sul link. Il Tab successivo rimanda l'utente direttamente nella barra di navigazione.
Rendete focalizzabile la destinazione
La soluzione consiste nel permettere al focus di spostarsi davvero lì. Aggiungete tabindex uguale a meno uno, così la destinazione può ricevere il focus dal link di salto.
<main id="main" tabindex="-1"> ... </main>Perché meno uno e non zero
Meno uno significa gestibile tramite script e raggiungibile come destinazione di un link, ma non incluso nell'ordine di Tab. L'elemento non diventerà un punto di tabulazione indesiderato per gli altri utenti.
I browser moderni aiutano
Oggi la maggior parte dei browser sposta automaticamente il focus sulla destinazione del fragment. Tuttavia, aggiungere tabindex meno uno garantisce il funzionamento ovunque: è quindi meglio mantenerlo.
Testate con le orecchie e con gli occhi
Ricaricate la pagina, premete Tab una volta, poi Invio. L'indicatore del focus dovrebbe passare al contenuto e il Tab successivo dovrebbe proseguire al suo interno. ✅
Mantenete il testo chiaro
Usate un'etichetta esplicita. Vai al contenuto principale comunica esattamente cosa accadrà, molto meglio di un generico «Salta» o di un'icona.
L'ordine nella pagina
Posizionate l'ancora come primo figlio di body, prima dell'intestazione, così Tab la raggiungerà prima di qualsiasi altro elemento della pagina.
Verifica rapida
Che cosa permette al focus di raggiungere effettivamente l'area main?
Riepilogo
Collegate un'ancora a un id corrispondente su main, aggiungete tabindex meno uno e testate con Tab. Questo è un link di salto che funziona davvero. 🎯
Domande Frequenti
La lezione «Creare un collegamento di salto che funzioni davvero» è gratuita?
Sì — il testo completo di «Creare un collegamento di salto che funzioni davvero» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Creare un collegamento di salto che funzioni davvero»?
Collegare l'ancora a un elemento che può ricevere il focus Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Creare un collegamento di salto che funzioni davvero»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Perché esiste il collegamento Vai al contenuto principale
- Creare un collegamento di salto che funzioni davvero
- Nascosto visivamente fino al focus
- Più collegamenti di salto per le pagine lunghe