Amélioration de l'accessibilité de la barre de progression WPForms

Vous utilisez des formulaires multipage et souhaitez que la barre de progression et les titres de section passent davantage de contrôles d'accessibilité ? Certains scanners signalent des problèmes tels que des noms accessibles manquants sur la barre de progression et des niveaux de titre ignorés à l'intérieur des champs de séparation.

Dans ce tutoriel, nous vous montrerons comment ajouter un extrait de code JavaScript personnalisé qui :

• Ajoute une aria-label à la barre de progression
• Change les titres des séparateurs de section de h3 à h2 pour améliorer la hiérarchie des titres

Avant de commencer

Ce tutoriel est conçu pour les formulaires multipage qui :

• Utilisent l'indicateur de page de style barre de progression
• Incluent des champs Séparateur qui génèrent des titres à l'intérieur du formulaire

Vous aurez également besoin d'un moyen d'ajouter du PHP personnalisé à votre site, tel qu'un plugin spécifique au site ou un plugin d'extraits.

Si vous avez besoin d'aide pour ajouter du code personnalisé, veuillez consulter notre guide sur la façon d'ajouter des extraits de code PHP personnalisés pour WPForms.

Ajout de l'extrait de correction d'accessibilité

Pour ajouter les améliorations d'accessibilité, utilisez l'extrait de code ci-dessous. Il imprime un petit script dans le pied de page de votre site qui met à jour la barre de progression et les titres des séparateurs de section côté client.

Après avoir enregistré l'extrait, ouvrez une page contenant votre formulaire multipage et vérifiez que la barre de progression fonctionne toujours comme prévu.

Comment fonctionne l'extrait

La première fonction ajoute un aria-label à chaque élément avec les classes wpforms-page-indicator progress afin que la barre de progression ait un nom accessible. La seconde fonction trouve les titres h3 à l'intérieur des champs de séparation, les recrée en tant qu'éléments h2 avec les mêmes attributs et contenu, et remplace les originaux pour améliorer la hiérarchie des titres.

Personnalisation de l'extrait

Vous pouvez ajuster l'extrait pour mieux correspondre à votre site.

Modifier le texte de l'aria-label

Dans le premier bloc de script, mettez à jour cette ligne :

$(this).attr('aria-label', 'Form Page Progress');

Changez le texte entre guillemets par une étiquette qui a du sens pour votre formulaire, par exemple :

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

C'est le texte que les lecteurs d'écran annonceront pour la barre de progression.

Cibler un formulaire spécifique uniquement

Par défaut, les sélecteurs :

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

s'appliquent à toutes les barres de progression et tous les séparateurs WPForms sur votre site.

Si vous souhaitez limiter ce comportement à un seul formulaire, vous pouvez ajouter l'ID du formulaire au sélecteur. Par exemple, pour le formulaire ID 123 :

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

Cela maintient les modifications limitées à ce formulaire uniquement.

C'est tout, vous avez maintenant appris comment donner à vos formulaires multipage une barre de progression et une structure de titres plus accessibles à l'aide d'un extrait de code JavaScript personnalisé.

Ensuite, vous voudrez peut-être consulter notre guide sur la création de formulaires multipage dans WPForms pour voir toutes les options de configuration des sauts de page et des indicateurs de progression.