Nascosto visivamente fino al focus
Nascondere il collegamento agli utenti del mouse e mostrarlo premendo Tab
Nascosto visivamente fino al focus è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 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.
La tensione progettuale
I link di salto sono fondamentali, ma molti team temono che appesantiscano il layout. La soluzione classica è nasconderli visivamente, lasciandoli pronti per chi usa la tastiera.
Mai display none
Non ricorrete a display none o visibility hidden. Rimuovono il link dall'albero dell'accessibilità, impedendo a chiunque di portargli il focus.
Nascosto visivamente, ma presente
L'obiettivo è uno stato nascosto visivamente: invisibile sullo schermo, ma pienamente presente per tastiere e screen reader.
Il pattern del ritaglio
Un trucco comune riduce il link a un pixel e lo ritaglia. Rimane nel DOM e nell'ordine del focus, semplicemente fuori dalla vista.
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }Mostratelo quando riceve il focus
Il punto fondamentale è lo stato di focus. Quando Tab raggiunge il link, il CSS ne ripristina le dimensioni e lo riporta nella visuale.
.skip-link:focus { width: auto; height: auto; clip: auto; top: 0; }Perché focus e non hover
Usate focus, mai hover. Chi usa la tastiera non può usare il passaggio del mouse: una visualizzazione attivata solo con hover lascerebbe il link permanentemente invisibile.
Rendetelo chiaramente visibile
Quando viene mostrato, dategli uno sfondo e un padding ben visibili. Deve sembrare un pulsante evidente, non un testo tenue che l'utente potrebbe non notare.
Mantenete il contorno del focus
Non rimuovete il contorno del focus dal link mostrato. Gli utenti devono vedere esattamente dove è finito il focus.
Attenzione ai calcoli della posizione
Spesso il link nascosto si trova fuori dallo schermo con un valore negativo di top, poi passa a top zero quando riceve il focus. Questo movimento rende la comparsa intenzionale.
Un'utilità riutilizzabile
Questo pattern per nascondere visivamente gli elementi è così utile che la maggior parte dei team lo conserva come classe utility condivisa per qualsiasi contenuto sr-only.
Testate la comparsa
Premete Tab dopo aver caricato la pagina da zero. Il link di salto dovrebbe comparire subito. Spostatevi con Tab e dovrebbe scomparire di nuovo. ✅
Verifica rapida
Quale approccio nasconde correttamente un link di salto finché non serve?
Riepilogo
Nascondete il link di salto con il ritaglio, mai con display none, e mostratelo quando riceve il focus, con un contorno ben visibile. Invisibile finché non serve. 🎯
Domande Frequenti
La lezione «Nascosto visivamente fino al focus» è gratuita?
Sì — il testo completo di «Nascosto visivamente fino al focus» è 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 «Nascosto visivamente fino al focus»?
Nascondere il collegamento agli utenti del mouse e mostrarlo premendo Tab 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 3 di 4.
Quanto tempo richiede la lezione «Nascosto visivamente fino al focus»?
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