Accessibilità ·
Come aggiungere un link per saltare al contenuto principale
Scopri come aiutare chi usa la tastiera a raggiungere subito il contenuto principale, senza cambiare l’aspetto della pagina. La guida spiega come impostare l’HTML, gestire la visibilità del link quando riceve il focus e fare i controlli prima della pubblicazione.
Il percorso ripetuto prima del contenuto
Chi usa la tastiera può essere costretto a passare ogni volta dal logo, dai link di servizio, dal menu, dalla ricerca e dall’account prima di arrivare al titolo della pagina. Ripetere questo percorso su ogni pagina rende la navigazione lenta e faticosa, soprattutto per chi non può o non vuole usare il puntatore. Un link per saltare al contenuto offre una scorciatoia chiara. Inseriscilo all’inizio del documento, prima della navigazione ripetuta, e collegalo al contenuto principale, non a un elemento scelto solo per ragioni estetiche.
Perché questo link è utile
Il link non sostituisce una buona struttura dei landmark o una gerarchia corretta dei titoli. Serve a superare rapidamente un blocco che si ripete in tutte le pagine. Rende anche più chiaro l’ordine della pagina: prima la navigazione, poi l’area principale. Essendo un normale link, browser e tecnologie assistive possono interpretarlo senza problemi, e chi naviga con la tastiera può usarlo direttamente. Quando non è attivo può restare poco evidente, ma non va nascosto in modo da sparire anche dal focus da tastiera.
Struttura e stile del link
Inserisci il link vicino all’inizio del body, per esempio con l’etichetta “Salta al contenuto principale”. Assegna all’elemento main un identificatore stabile, come id="main-content", e usa lo stesso identificatore come destinazione del link. Lascia il link nel documento, ma spostalo fuori dall’area visibile finché non riceve :focus o :focus-visible. Quando riceve il focus, rendilo ben visibile con uno sfondo evidente, un contrasto sufficiente e spazio adeguato per leggerlo. Non usare solo lo stato hover: chi naviga con la tastiera ha bisogno di vedere il focus. Se la pagina ha un’intestazione fissa, controlla che il punto raggiunto non finisca nascosto. Un margine di scorrimento sulla destinazione può aiutare.
Un esempio di struttura
Una struttura di base comprende un primo link con un’etichetta chiara, un elemento main con un id corrispondente e uno stile che renda visibile il link quando riceve il focus. Se il sito usa un layout condiviso, inseriscilo lì: tutte le pagine lo riceveranno nello stesso modo. Se ci sono più aree ripetute, fai in modo che la prima destinazione porti al compito principale, di solito il contenuto, non al footer o a un pannello secondario.
Controlli prima della pubblicazione
Gli errori più comuni sono inserire il link dopo la navigazione, collegarlo a un contenitore decorativo, nasconderlo con display: none o rimuovere il contorno del focus senza sostituirlo. Provalo premendo Tab subito dopo aver caricato la pagina: dovrebbe essere il primo controllo utile, diventare visibile e spostare il focus sul contenuto previsto. Ripeti il test su una pagina con un’intestazione lunga e su una finestra stretta.
Quando usarlo
Usa un link per saltare al contenuto nei siti con intestazioni, menu, strumenti di ricerca o altri blocchi ripetuti prima dell’area principale. È particolarmente utile nei layout condivisi e nei siti con molte pagine o molti contenuti.
Quando evitarlo
Non ometterlo solo perché l’intestazione sembra compatta. Evita invece di aggiungere molti link di salto che si fanno concorrenza, a meno che ogni destinazione porti a un’area davvero utile e sia stata verificata.
Da ricordare
- Inserisci il link prima della navigazione ripetuta.
- Collegalo al vero contenuto principale.
- Rendilo visibile quando riceve il focus da tastiera, non solo al passaggio del mouse.
- Controlla che un’intestazione fissa non nasconda il punto raggiunto.
- Prova la prima sequenza di Tab sui template effettivi del sito.
Checklist
- Il link è il primo controllo utile raggiungibile da tastiera?
- L’etichetta spiega chiaramente dove porta?
- La destinazione ha un identificatore stabile?
- Il link è leggibile quando riceve il focus?
- Il focus arriva nel punto previsto?
- Il punto raggiunto finisce sotto un’intestazione fissa?
Domande frequenti
Un link per saltare al contenuto deve essere sempre visibile?
Non necessariamente. Può restare poco visibile finché non riceve il focus da tastiera, ma deve essere raggiungibile e ben visibile quando viene focalizzato.
Il link può puntare a un titolo invece che all’elemento main?
Sì, ma l’area main è di solito la destinazione più chiara. Se scegli un titolo, verifica che il comportamento del focus e la struttura della pagina restino comprensibili.