Accueil > Actualités > Accessibilité > Correction d’un problème d’accessibilité sur les messages d’erreurs de Gravity Forms

Correction d’un problème d’accessibilité sur les messages d’erreurs de Gravity Forms

Cet article présente une micro-extension Gravity Forms permettant de résoudre une non conformité d’accessibilité RGAA

Publié par

Jean-Baptiste Audras

Date

22 juillet 2025

Gravity Forms est – de loin – l’extension WordPress de gestion de formulaire présentant la meilleure accessibilité, et qui permet de réaliser les formulaires les plus conformes possible au RGAA sur WordPress [1].

L’équipe de développement de ce plugin premium a fait conduire un audit d’accessibilité par les experts hollandais de l’agence Level Level il y a quelques années [2], et c’est depuis devenu l’outil le plus accessible sur le marché.

Même lorsque les choses sont faites le plus correctement possible, il y a hélas toujours matière à redire. Une non conformité RGAA a été relevée récemment sur les formulaires de l’un des sites WordPress de l’ADEME maintenus par l’agence Whodunit.

Chez Whodunit Consulting, nous nous sommes penchés sur le sujet et il se trouve que la non conformité est avérée.

Le problème est assez simple : le message « Il y a eu un problème avec votre soumission » qui s’affiche après rechargement du formulaire en cas d’erreur de saisie est encapsulé dans un titre de niveau 2. Ce choix du <h2> est trop arbitraire de la part de Gravity Forms.

Comme il est tout à fait possible que le formulaire soit inséré dans le corps de la page après un titre d’un niveau inférieur comme <h3> ou <h4>, nous fonçons droit vers une non conformité au critère RGAA 9.1 : « Dans chaque page web, l’information est-elle structurée par l’utilisation appropriée de titres ? » [3].

Dans le cas où le formulaire est inséré après un titre de niveau 3 par exemple, le critère 9.1 risque logiquement d’être invalidé par le test 9.1.1 qui vérifie l’implémentation suivante : « Dans chaque page web, la hiérarchie entre les titres […] est-elle pertinente ? » [4].

La correction de Gravity Forms proposée par Whodunit.Consulting

Pour régler ce problème, il suffit d’utiliser le mécanisme de hooks proposé par Gravity Forms afin de remplacer l’élément HTML <h2> par un simple paragraphe <p>.

Pour cela vous pouvez ajouter le bout de code PHP suivant dans votre thème :

/**
 * Changes default error markup after form validation.
 * This especially replaces the H2 tag with P.
 */
function who_change_error_message( $message, $form ) {
	return '<p class="gform_submission_error hide_summary">' .
	       '<span class="gform-icon gform-icon--close"></span>' .
	       esc_html__( 'There was a problem with your submission.', 'gravityforms' ) .
	       '</p>';
}
add_filter( 'gform_validation_message', 'who_change_error_message', 10, 2 );

Vous pouvez sinon télécharger ce code sous la forme d’une micro extension et l’installer telle qu’elle sur votre site :

Télécharger l’extension de surcharge de Gravity Forms (ZIP – 1 ko)

Un correctif à venir directement dans Gravity Forms ?
En tout cas nous avons remonté le souci sur leur outil de support.

Performances & éco-conception

L’ajout de ce bout de code ou de l’extension fournie ne porte aucun préjudice aux performances du site : le code n’est joué que sur la page affichant les messages d’erreurs, et pas sur toutes les pages du site, ni même sur chaque page contenant un formulaire.

Cela est dû à la granularité des hooks mis à disposition par Gravity Forms.
Merci à leur équipe pour ce bel outil !