Le Référentiel général d’amélioration de l’accessibilité s’applique à tout site publié par un organisme public, y compris lorsque ce site est construit avec Elementor Pro. Le formulaire de saisine d’une collectivité territoriale, permettant à un administré de signaler un problème sur la voirie, en est un bon exemple : un widget en apparence simple, mais qui concentre à lui seul treize critères RGAA distincts.
Cette checklist a été construite pour ce widget précis, construit avec Elementor Pro Forms, en s’appuyant sur les critères du RGAA version 4 applicables aux formulaires. Elle ne couvre pas l’audit RGAA du site dans son ensemble, ni les obligations légales de publication d’une déclaration d’accessibilité, hors du périmètre ici.
Étiquettes de champs associées programmatiquement
Le widget Forms d’Elementor Pro affiche par défaut un intitulé au-dessus de chaque champ, mais cet intitulé n’est pas toujours associé techniquement au champ via l’attribut for et l’identifiant du champ, selon la version du thème et les personnalisations CSS appliquées. Un contrôle avec un lecteur d’écran (NVDA ou VoiceOver) reste le seul moyen fiable de vérifier que chaque champ est bien annoncé avec son étiquette.
La checklist appliquée point par point
- Chaque champ possède une étiquette visible, jamais un simple
placeholdercomme seule indication - L’étiquette et le champ sont associés programmatiquement (vérifié dans le code source généré)
- Les champs obligatoires sont signalés à la fois visuellement (astérisque) et textuellement (« champ obligatoire » dans le texte de l’étiquette ou une mention générale en début de formulaire)
- L’ordre de tabulation suit l’ordre visuel du formulaire
- Le focus clavier est visible sur chaque champ (contour suffisamment contrasté, jamais supprimé par un
outline: nonesans remplacement) - Les messages d’erreur de validation sont associés au champ concerné via
aria-describedby - Les messages d’erreur sont annoncés dynamiquement, pas seulement affichés visuellement
- Le contraste du texte des champs et des étiquettes respecte un ratio minimal de 4,5:1
- Le bouton d’envoi a un intitulé explicite (« Envoyer ma déclaration », pas un simple « Envoyer »)
- Le formulaire reste utilisable en zoom à 200 % sans perte de contenu ni de fonctionnalité
- Le CAPTCHA éventuel propose une alternative accessible (audio ou logique)
- Le message de confirmation après envoi est annoncé aux technologies d’assistance
- Le formulaire fonctionne entièrement au clavier, sans piège de focus
Où Elementor Pro Forms pêche par défaut
Sur ce projet, deux points de la liste ont demandé une intervention manuelle. Le message d’erreur de validation, correctement affiché visuellement en rouge sous le champ, n’était pas associé via aria-describedby dans le rendu par défaut du widget : un ajout de CSS personnalisé ne suffisait pas, il a fallu un court script JavaScript déposé dans le widget HTML voisin pour injecter l’attribut manquant après le rendu du formulaire.
Le second point concernait le focus visible, supprimé par une personnalisation CSS héritée du thème (*:focus { outline: none; }), une pratique encore répandue en 2021 pour des raisons purement esthétiques. Un contour de remplacement, suffisamment contrasté, a été réintroduit spécifiquement sur les champs du formulaire.
Extrait du correctif CSS appliqué
.elementor-field:focus {
outline: 2px solid #1a3c6e;
outline-offset: 2px;
}
Conseil maison : ne jamais valider un formulaire RGAA uniquement à l’œil. Un test complet au clavier, sans souris, et un passage avec un lecteur d’écran restent les deux vérifications qui révèlent le plus d’écarts sur un widget Elementor Pro Forms.
Ce que cette checklist ne couvre pas
Cette liste reste centrée sur le widget de formulaire lui-même. Elle ne traite ni de la structure de titres de la page qui l’entoure, ni de l’audit RGAA complet du site (qui suit une méthodologie propre avec échantillon de pages), ni des obligations légales de publication du schéma pluriannuel et de la déclaration d’accessibilité, qui relèvent d’un travail distinct.
En résumé
Un formulaire Elementor Pro Forms accessible n’est jamais accessible par défaut : chaque critère RGAA doit être vérifié explicitement, et certains, comme l’association des messages d’erreur, demandent un correctif manuel que l’interface de l’éditeur ne propose pas nativement.
