Migliorare l'accessibilità della barra di avanzamento di WPForms

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 JavaScript personalizzato che:

• Aggiunge un aria-label alla barra di avanzamento
• Modifica le intestazioni dei divisori di sezione da h3 a h2 per migliorare la gerarchia delle intestazioni

Prima di iniziare

Questo tutorial è progettato per moduli multipagina che:

• Utilizzano lo stile barra di avanzamento come indicatore di pagina
• Includono campi Divisore che generano 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.

Aggiunta dello snippet di correzione per l'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');

Modifica il testo tra virgolette con un'etichetta che abbia senso per il tuo modulo, ad esempio:

$(this).attr('aria-label', 'Graduation application progress');

Questo è il testo che gli screen reader annunceranno per la barra di avanzamento.

Individua 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 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 per vedere tutte le opzioni per la configurazione delle interruzioni di pagina e degli indicatori di avanzamento