Migliorare l'accessibilità della barra di avanzamento di WPForms

Utilizzi moduli multipagina e desideri che la barra di avanzamento e le intestazioni delle sezioni superino più controlli di accessibilità? Alcuni scanner segnalano problemi quali 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 i titoli dei divisori delle sezioni da h3 a h2 migliorare la gerarchia delle intestazioni

Questo esempio è pensato come aiuto per casi specifici e non rende WPForms completamente conforme alle WCAG. Il design del tuo sito e l'accessibilità complessiva rimangono comunque sotto la tua responsabilità.

Prima di iniziare

Questo tutorial è pensato per moduli multipagina che:

Utilizza l'indicatore di pagina in stile barra di avanzamento
Includi campi divisori 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 per 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 dell'accessibilità

Per aggiungere i miglioramenti relativi all'accessibilità, utilizza il frammento di codice riportato di seguito. Esso inserisce 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 ciascun elemento con il wpforms-page-indicator progress classi in modo che la barra di avanzamento abbia un nome accessibile. La seconda funzione trova h3 le intestazioni all'interno dei campi divisori, le ricrea come h2 elementi con gli stessi attributi e contenuti, e sostituisce gli originali per migliorare la gerarchia delle intestazioni.

Personalizzazione dello Snippet

È possibile modificare lo snippet per adattarlo meglio al proprio sito.

Modifica il testo dell'etichetta dell'aria

All'interno del primo blocco di script, aggiorna questa riga:

$(this).attr('aria-label', 'Stato di avanzamento della pagina del modulo');

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

$(this).attr('aria-label', 'Stato di avanzamento della domanda di laurea');

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

Individua solo un modulo specifico

Per impostazione predefinita, i selettori:

$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')

si applica a tutte le barre di avanzamento e ai divisori WPForms presenti 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')

In questo modo le modifiche rimangono limitate solo a quel modulo.

Ecco fatto, ora hai imparato come rendere i tuoi moduli multipagina più accessibili grazie a una barra di avanzamento e a una struttura dei titoli utilizzando uno snippet JavaScript personalizzato.

Successivamente, potresti voler consultare la nostra guida sulla creazione di moduli multipagina in WPForms per vedere tutte le opzioni disponibili per configurare le interruzioni di pagina e gli indicatori di avanzamento.