### [Amélioration de l'accessibilité de la barre de progression WPForms](https://wpforms.com/developers/improving-the-accessibility-of-the-wpforms-progress-bar/) **Publié :** 11 décembre 2025 **Auteur :** Umair Majeed **Extrait :** Apprenez à améliorer l'accessibilité des formulaires multipages WPForms. **Contenu :** Utilisez-vous des formulaires multipages et souhaitez-vous que la barre de progression et les titres de section réussissent davantage de vérifications 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 sauté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 un `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 Cet exemple est destiné à aider dans des cas spécifiques et ne rend pas WPForms entièrement conforme aux WCAG. La conception de votre site et l'accessibilité globale restent votre responsabilité. --- ## Avant de commencer Ce tutoriel est conçu pour les formulaires multipages qui : - Utilisent le style de barre de progression comme indicateur de page - 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 PHP personnalisés pour WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-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 recherche 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'étiquette aria 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 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. Voilà, vous avez appris à rendre vos formulaires multipages plus accessibles en termes de barre de progression et de structure de titres à l'aide d'un extrait JavaScript personnalisé. Ensuite, vous voudrez peut-être consulter notre guide sur la [création de formulaires multipages dans WPForms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms) pour voir toutes les options de configuration des sauts de page et des indicateurs de progression. **Catégories :** Champs, Style, Extension ---