Résumé de l'IA
Vous utilisez des formulaires multipages 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 l'absence de noms accessibles sur la barre de progression et des niveaux de titre ignorés dans les champs de séparation.
Dans ce tutoriel, nous vous montrerons comment ajouter un extrait de code JavaScript personnalisé qui :
- Ajoute un
aria-labelà la barre de progression - Modifie les titres des sections de séparation de
h3àh2améliorer la hiérarchie des titres
Avant de commencer
Ce tutoriel est conçu pour les formulaires multipages qui :
- Utilisez l'indicateur de page de type barre de progression.
- Inclure des champs Diviseur qui affichent des en-têtes dans le formulaire
Vous aurez également besoin d'un moyen d'ajouter du code PHP personnalisé à votre site, tel qu'un plugin spécifique au site ou un plugin de snippets.
Si vous avez besoin d'aide pour ajouter du code personnalisé, veuillez consulter notre guide sur la façon d'ajouter des extraits PHP personnalisés pour WPForms.
Ajout du snippet de correction d'accessibilité
Pour ajouter les améliorations en matière 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 sur l'interface utilisateur.
Après avoir enregistré l'extrait, ouvrez une page contenant votre formulaire multipages 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 le wpforms-page-indicator progress classes afin que la barre de progression ait un nom accessible. La deuxième fonction trouve h3 les en-têtes à l'intérieur des champs de séparation, les recrée sous forme de h2 éléments ayant les mêmes attributs et le même contenu, et remplace les originaux afin d'améliorer la hiérarchie des titres.
Personnalisation de l'extrait
Vous pouvez ajuster l'extrait afin qu'il corresponde mieux à votre site.
Modifier le texte de l'étiquette aria
Dans le premier bloc de script, mettez à jour cette ligne :
$(this).attr('aria-label', 'Progression de la page du formulaire');
Remplacez le texte entre guillemets par une étiquette qui convient à votre formulaire, par exemple :
$(this).attr('aria-label', 'Progression de la demande de diplôme');
Il s'agit du texte que les lecteurs d'écran annonceront pour la barre de progression.
Cibler uniquement un formulaire spécifique
Par défaut, les sélecteurs :
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
s'applique à toutes les barres de progression et séparateurs WPForms de 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 permet de limiter les modifications à ce formulaire uniquement.
Voilà, vous savez désormais comment ajouter une barre de progression et une structure d'en-têtes plus accessibles à vos formulaires multipages à l'aide d'un extrait de code JavaScript personnalisé.
Ensuite, vous pouvez consulter notre guide sur la création de formulaires multipages dans WPForms pour découvrir toutes les options de configuration des sauts de page et des indicateurs de progression.