Elementor : les pièges du page builder

Cette page fait partie de La mise en conformité RGAA.

Le problème n’est pas l’outil, c’est ce qu’il encourage

Un constructeur de pages donne le contrôle de l’apparence à des personnes qui n’ont pas à connaître le HTML. C’est son intérêt, et c’est aussi la source de ses non-conformités : on choisit un style de titre pour son rendu, pas pour son niveau, et la structure du document se décide par accident.

Les pièges les plus fréquents

Le niveau de titre par défaut. Les widgets de titre proposent un niveau réglable, rarement ajusté. On obtient des pages avec quatre h2 et aucun h1, ou l’inverse.
Les empilements de conteneurs. Sections, colonnes et widgets produisent des couches de div qui n’ajoutent aucune sémantique et allongent la restitution.
L’ordre visuel réordonné en CSS. Inverser deux colonnes sur mobile change l’ordre à l’écran mais pas dans le code : l’ordre de tabulation contredit alors ce que l’on voit.
Les carrousels. Défilement automatique non contrôlable, flèches sans nom accessible, contenu qui change sans annonce.
Les fenêtres modales — popups d’inscription, promotions — qui capturent le focus sans permettre d’en sortir au clavier, et ne le rendent pas à l’élément déclencheur à la fermeture.
Les icônes seules. Icône de réseau social, de téléphone, de recherche : sans nom accessible, elles sont annoncées par rien.
Les animations à l’apparition, qui ignorent le réglage système de réduction des animations.
Le texte en image, fréquent dans les bandeaux, sans équivalent textuel.

Ce qui se corrige sans tout refaire

Fixer les niveaux de titres dans les gabarits et former les contributeurs à ne plus y toucher.
Rétablir un focus visible dans le CSS global, en écrasant les réinitialisations du thème.
Corriger la palette au niveau des réglages globaux : les contrastes se règlent une fois pour tout le site.
Renommer les icônes en leur donnant un nom accessible.
Désactiver le défilement automatique des carrousels, ou les remplacer par une liste.
Respecter prefers-reduced-motion dans le CSS additionnel.

Où se situe la limite

Les fenêtres modales et les composants interactifs livrés par l’extension sont les plus coûteux à mettre en conformité, parce qu’il faut corriger du code que l’on ne maîtrise pas — et que la prochaine mise à jour peut réécrire.

Quand ces composants portent une fonction essentielle — un tunnel, une prise de rendez-vous —, il est souvent moins cher de les remplacer par un développement maîtrisé que de les corriger à chaque version.

Pour une refonte à venir

Si une refonte est envisagée et que la conformité est une obligation, l’arbitrage mérite d’être posé franchement : un constructeur de pages ajoute une couche permanente de vigilance. Voir la refonte accessible.