Rendi il tuo sito web accessibile con un solo clic: la scelta di oltre 60,000 siti web in tutto il mondo

Come aggiungere collegamenti di navigazione saltati ai menu di WordPress

Pubblicato da

Marlene Fichtner

Caricato su

Gennaio 6, 2025

Lista di controllo gratuita per l'accessibilità
Ottieni una checklist gratuita con i controlli di accessibilità più importanti.
I link di salto della navigazione sono essenziali per migliorare l'accessibilità sul tuo sito WordPress. Consentono agli utenti, in particolare a quelli che utilizzano lettori di schermo o navigazione tramite tastiera, di ignorare i menu ripetitivi e accedere direttamente al contenuto principale. L'aggiunta di link di salto migliora l'usabilità e garantisce la conformità con gli standard di accessibilità come WCAG.

Perché è importante ignorare i collegamenti di navigazione

I collegamenti di salto della navigazione offrono diversi vantaggi:

  • Usabilità migliorata: Riduce lo sforzo richiesto per navigare nei menu per gli utenti che si affidano a tecnologie assistive.
  • Accessibilità migliorata: Garantisce la conformità alle linee guida sull'accessibilità come WCAG e ADA.
  • Migliore esperienza utente: Rende il tuo sito più facile da navigare per tutti gli utenti.

Guida passo passo per aggiungere collegamenti di navigazione saltati

Passaggio 1: aggiungere HTML per i collegamenti di salto

Aggiungi il codice HTML per un collegamento di salto nella parte superiore del file di intestazione del tuo sito:

Vai al contenuto principale

Garantire il href l'attributo punta all'ID del contenitore di contenuto principale.

Passaggio 2: aggiungere un ID al contenuto principale

Nel tuo tema WordPress, individua il contenitore del contenuto principale e aggiungi un ID:

    
</div>

Passaggio 3: Definisci lo stile del collegamento di salto

Imposta lo stile del link di salto per assicurarti che sia visibile quando è attivo. Aggiungi il seguente CSS al tuo tema:

.skip-link { posizione: assoluta; alto: -40px; sinistra: 0; sfondo: #000; colore: #fff; imbottitura: 10px; decorazione del testo: nessuna; indice z: 100; } .skip-link:focus { alto: 0; }

Passaggio 4: testare il collegamento di salto

Utilizza una tastiera per navigare nel tuo sito e verifica che il collegamento di salto appaia e funzioni correttamente. Premi Tab per concentrarsi sul collegamento di salto e Enter per attivarlo.

Buone pratiche per i collegamenti di navigazione saltati

  • Posiziona prima i collegamenti di salto: Assicurati che il collegamento di salto sia il primo elemento attivabile sulla pagina.
  • Utilizzare etichette trasparenti: Il testo del collegamento dovrebbe indicare chiaramente il suo scopo, ad esempio "Vai al contenuto principale".
  • Test su tutti i dispositivi: Verifica la funzionalità su desktop, tablet e dispositivi mobili.

Casi di studio: Skip Links in azione

Caso di studio 1: sito web educativo

Una piattaforma didattica ha implementato i collegamenti di salto, migliorando la navigazione per gli studenti che utilizzano lettori di schermo e migliorando del 15% i punteggi di accessibilità.

Caso di studio 2: Negozio di e-commerce

Un rivenditore online ha aggiunto i collegamenti di salto al proprio menu di navigazione, riducendo i tassi di abbandono e migliorando l'usabilità per gli utenti che utilizzano la tastiera.

FAQ: Aggiunta di collegamenti di navigazione saltati

Cosa sono i link di salto della navigazione?

I collegamenti di salto navigazione consentono agli utenti di saltare i menu di navigazione ripetitivi e di andare direttamente al contenuto principale della pagina.

I link di salto sono obbligatori per la conformità all'accessibilità?

Sebbene non siano esplicitamente richiesti, i collegamenti di salto contribuiscono a soddisfare le linee guida WCAG migliorando la navigazione per gli utenti di tecnologie assistive.

Posso aggiungere collegamenti di salto senza modificare il codice?

Sì, alcuni plugin di accessibilità come Plugin di accessibilità WP One Tap può aggiungere automaticamente i collegamenti di salto.

I link di salto funzionano sui dispositivi mobili?

Sì, se implementati correttamente, i collegamenti di salto funzionano su tutti i dispositivi, compresi i dispositivi mobili.

Come faccio a testare i link di salto della navigazione?

Utilizza una tastiera per navigare nel tuo sito e assicurati che il collegamento di salto sia attivabile e funzionale.

Questo blog ha solo scopo informativo e non costituisce consulenza legale. Non rilasciamo dichiarazioni o garanzie in merito all'accuratezza, completezza o applicabilità dei contenuti. I requisiti di accessibilità possono variare a seconda della giurisdizione e del caso d'uso. Nella misura consentita dalla legge, decliniamo qualsiasi responsabilità derivante dall'affidamento sulle informazioni fornite. 

Articoli Correlati

Come ottimizzare l'accessibilità per i siti WordPress multilingue

Garantire l'accessibilità sui siti WordPress multilingue è fondamentale per creare un'esperienza web inclusiva...

Come creare caroselli di immagini accessibili in WordPress

I caroselli di immagini sono elementi visivamente accattivanti che possono aumentare l'attrattiva del tuo WordPress...

Come risolvere i problemi di accessibilità nei temi WordPress di terze parti

I temi WordPress di terze parti spesso offrono design accattivanti, ma potrebbero non disporre di funzionalità di accessibilità integrate.

Come garantire l'accessibilità nei post del blog WordPress

L'accessibilità nei post del blog garantisce che i tuoi contenuti siano inclusivi e utilizzabili da tutti...

Come progettare moduli accessibili in Elementor

La creazione di moduli accessibili in Elementor garantisce che tutti gli utenti, compresi quelli con disabilità, possano...

Procedura dettagliata: risoluzione dei problemi di accessibilità in WooCommerce

WooCommerce è una piattaforma popolare per la creazione di negozi online, ma garantirne l'accessibilità è...

Come testare l'accessibilità con gli screen reader su WordPress

Testare il tuo sito WordPress con gli screen reader è fondamentale per assicurarti che sia accessibile...

Come aggiungere la compatibilità con la ricerca vocale a WordPress

La ricerca vocale sta diventando sempre più popolare poiché gli utenti si affidano a dispositivi intelligenti e virtuali...

Rendi il tuo sito accessibile oggi stesso

Scelto da oltre 60,000 siti web, realizzato in Europa. OneTap è il plugin di accessibilità WordPress numero 1. Migliora l'accessibilità in 1 minuto, senza bisogno di scrivere codice.
1
Scegli il tuo Pacchetto
2
Scarica Plugin
3
Installa con 1 clic
Finito
1
Scegli Pacchetto
2
Scarica Plugin
3
Installazione
Finito
Checklist gratuita per l'accessibilità per WordPress

Cosa sbagliano la maggior parte dei siti WordPress e come risolverlo. Ottieni una pratica checklist dettagliata per individuare i problemi di accessibilità più comuni sul tuo sito WordPress.