Un audit d’accessibilité commandé par un client du secteur public sur son site vitrine Elementor a mis en évidence une dizaine de défauts, dont la plupart revenaient ensuite sur d’autres projets une fois qu’on savait où regarder. Cette checklist réunit les points de contrôle qui reviennent le plus souvent sur les sites construits avec Elementor, avec la correction concrète appliquée pour chacun.
Elle ne remplace pas un audit complet selon le RGAA ou les WCAG, mais elle couvre les défauts les plus fréquents et les plus rapides à corriger, ceux qui n’exigent pas une refonte complète du site pour être traités.
1. La hiérarchie de titres cassée par le visuel
Avec Elementor, rien n’empêche de choisir un widget Titre réglé en H2 simplement parce que sa taille visuelle convient, sans respecter l’ordre logique des niveaux de titre dans la page. Le résultat : une page qui saute de H1 à H4 sans H2 ni H3 intermédiaires, ce qui perturbe sérieusement la navigation par les technologies d’assistance qui s’appuient sur cette structure pour se déplacer dans le contenu.
La correction demande de séparer explicitement le niveau sémantique (le Tag HTML du widget Titre, dans l’onglet Contenu) de son apparence visuelle, ajustable indépendamment dans l’onglet Style. Un H3 peut parfaitement être stylé pour paraître plus imposant qu’un H2 si le besoin visuel l’exige, tant que l’ordre logique des niveaux reste respecté dans le code.
2. Les contrastes de texte sur fond image
Les sections avec image de fond et texte en superposition posent régulièrement un problème de contraste, surtout quand l’image change de couleur dominante selon sa zone (un ciel clair sous un titre blanc, par exemple). Un calque de superposition semi-transparent, réglable directement dans les options de fond d’Elementor, résout la majorité des cas, à condition de vérifier le ratio de contraste réel avec un outil dédié plutôt qu’à l’œil.
3. Les boutons et icônes sans libellé accessible
Un widget Icône utilisé seul comme lien vers un réseau social, sans texte visible, doit recevoir un libellé accessible via le champ dédié du widget, sans quoi un lecteur d’écran l’annonce simplement comme « lien » sans autre information. Ce défaut concerne aussi les boutons de fermeture de popup, souvent réduits à une simple croix graphique sans description.
4. Les popups qui piègent mal le focus
Le Popup Builder d’Elementor Pro gère correctement le focus clavier dans sa configuration par défaut sur les versions récentes, mais des popups créés il y a plusieurs années conservent parfois un comportement où la touche Tabulation continue de faire défiler le contenu situé derrière la popup plutôt que de rester cantonnée à son contenu. Vérifier ce point avec la seule touche Tabulation, sans souris, popup ouverte, permet de repérer rapidement le problème.
5. Les carrousels sans contrôle de pause
Un widget Carrousel d’images ou de témoignages avec défilement automatique et sans bouton de pause visible constitue un obstacle réel pour les visiteurs qui ont besoin de plus de temps pour lire chaque diapositive, notamment en cas de trouble de l’attention ou de difficulté de lecture. Le réglage Pause au survol disponible sur les widgets de carrousel Elementor aide, mais reste insuffisant seul sur mobile où il n’y a pas de survol : ajouter des flèches de navigation manuelles visibles et un bouton de pause explicite reste la solution la plus fiable.
6. Les formulaires sans association label/champ correcte
Le widget Formulaire d’Elementor Pro associe normalement chaque champ à son libellé de façon automatique, mais un champ personnalisé ajouté en HTML brut à l’intérieur du même formulaire peut casser cette association si l’attribut for du label ne correspond pas exactement à l’id du champ. Un contrôle rapide avec l’inspecteur du navigateur permet de vérifier cette correspondance sur les formulaires personnalisés.
7. Le texte alternatif des images décoratives
À l’inverse d’un défaut par excès, certains sites remplissent systématiquement le champ de texte alternatif même pour des images purement décoratives (un simple filet graphique, une forme abstraite), ce qui alourdit inutilement la lecture au lecteur d’écran. Pour ces images, laisser le champ vide est le comportement correct, à condition que l’image soit bien marquée comme décorative et non simplement oubliée.
Pour aller plus loin
Aucun de ces sept points ne demande de développement complexe : il s’agit presque toujours de réglages déjà présents dans l’interface Elementor, mal utilisés ou tout simplement ignorés faute d’en connaître l’existence. Passer cette checklist sur un site existant, page par page, prend rarement plus d’une journée pour un site de taille moyenne, et corrige déjà une bonne partie des défauts que releverait un audit RGAA complet, sans attendre une refonte pour s’y attaquer.
