### [Migliorare l'accessibilità della barra di avanzamento di WPForms](https://wpforms.com/developers/improving-the-accessibility-of-the-wpforms-progress-bar/) **Pubblicato:** 11 dicembre 2025 **Autore:** Umair Majeed **Estratto:** Scopri come migliorare l'accessibilità per i moduli multipagina di WPForms. **Contenuto:** Utilizzi moduli multipagina e desideri che la barra di avanzamento e le intestazioni di sezione superino più controlli di accessibilità? Alcuni scanner segnalano problemi come nomi accessibili mancanti sulla barra di avanzamento e livelli di intestazione saltati all'interno dei campi divisori. In questo tutorial, ti mostreremo come aggiungere uno snippet di JavaScript personalizzato che: - Aggiunge un `aria-label` alla barra di avanzamento - Cambia le intestazioni dei divisori di sezione da `h3` a `h2` per migliorare la gerarchia delle intestazioni Questo esempio è inteso come aiuto per casi specifici e non rende WPForms completamente conforme a WCAG. La progettazione del tuo sito e l'accessibilità generale rimangono tua responsabilità. --- ## Prima di iniziare Questo tutorial è progettato per moduli multipagina che: - Utilizzano l'indicatore di pagina in stile **barra di avanzamento** - Includono campi **Divisore** che producono intestazioni all'interno del modulo Avrai anche bisogno di un modo per aggiungere PHP personalizzato al tuo sito, come un plugin specifico per il sito o un plugin di snippet. Se hai bisogno di aiuto per aggiungere codice personalizzato, consulta la nostra guida su come [aggiungere snippet PHP personalizzati per WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). ## Aggiunta dello snippet di correzione dell'accessibilità Per aggiungere i miglioramenti all'accessibilità, utilizza lo snippet di codice seguente. Stampa un piccolo script nel footer del tuo sito che aggiorna la barra di avanzamento e le intestazioni dei divisori di sezione sul front-end. Dopo aver salvato lo snippet, apri una pagina che contiene il tuo modulo multipagina e verifica che la barra di avanzamento funzioni ancora come previsto. ## Come funziona lo snippet La prima funzione aggiunge un `aria-label` a ogni elemento con le classi `wpforms-page-indicator progress` in modo che la barra di avanzamento abbia un nome accessibile. La seconda funzione trova le intestazioni `h3` all'interno dei campi divisori, le ricrea come elementi `h2` con gli stessi attributi e contenuto, e sostituisce gli originali per migliorare la gerarchia delle intestazioni. ## Personalizzazione dello snippet Puoi regolare lo snippet per adattarlo meglio al tuo sito. ### Modifica il testo dell'etichetta aria All'interno del primo blocco di script, aggiorna questa riga: ``` $(this).attr('aria-label', 'Form Page Progress'); ``` Cambia il testo tra virgolette con un'etichetta che abbia senso per il tuo modulo, come ad esempio: ``` $(this).attr('aria-label', 'Graduation application progress'); ``` Questo è il testo che gli screen reader annunceranno per la barra di avanzamento. ### Targetizzazione di un solo modulo specifico Per impostazione predefinita, i selettori: ``` $('.wpforms-page-indicator.progress') $('.wpforms-field-divider h3') ``` si applicano a ogni barra di avanzamento e divisore di WPForms sul tuo sito. Se desideri limitare questo comportamento a un singolo modulo, puoi aggiungere l'ID del modulo al selettore. Ad esempio, per il modulo ID 123: ``` $('#wpforms-123 .wpforms-page-indicator.progress') $('#wpforms-123 .wpforms-field-divider h3') ``` Ciò mantiene le modifiche limitate solo a quel modulo. Ecco fatto, ora hai imparato come dare ai tuoi moduli multipagina una barra di avanzamento e una struttura di intestazione più accessibili utilizzando uno snippet JavaScript personalizzato. Successivamente, potresti voler consultare la nostra guida su [come creare moduli multipagina in WPForms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms) per vedere tutte le opzioni per la configurazione delle interruzioni di pagina e degli indicatori di avanzamento. **Categorie:** Campi, Stile, Estensione ---