No-code

Audit d'accessibilité RGAA pour sites Webflow

Pourquoi Webflow pose des problèmes d'accessibilité

Webflow est la plateforme no-code de référence pour les designers web, mais son approche visuelle de la construction de pages crée des problèmes d'accessibilité structurels. Webflow génère du HTML basé sur des div imbriquées — une 'div soup' où chaque élément visuel est un div avec des classes CSS custom. Les balises sémantiques (nav, main, article, aside, section) sont rarement utilisées car le designer pense en termes de layout visuel et non de structure documentaire. Les interactions Webflow (animations au scroll, hover effects, modales, sliders) sont construites avec le système d'interactions propriétaire qui ne génère pas les attributs ARIA nécessaires. Les formulaires Webflow ont un support basique de l'accessibilité (labels présents) mais la gestion des erreurs est limitée. Les composants CMS (collections dynamiques) génèrent du HTML répétitif sans landmarks ARIA. Le focus management est absent : les modales s'ouvrent sans recevoir le focus, les menus hamburger ne trappent pas le focus, les onglets ne supportent pas la navigation flèches.

Problèmes fréquents sur Webflow

Structure HTML en 'div soup' sans sémantique

RGAA 9.2

Webflow génère son HTML à partir de la structure visuelle du designer. Chaque élément est un div avec des classes CSS. Les balises sémantiques (header, nav, main, section, article, aside, footer) ne sont pas utilisées par défaut. Les lecteurs d'écran ne peuvent pas identifier les régions de la page (navigation, contenu principal, pied de page). La navigation par landmarks est impossible, obligeant l'utilisateur à parcourir chaque élément linéairement.

Interactions et animations sans ARIA

RGAA 7.1

Le système d'interactions de Webflow permet de créer des animations complexes (modales, accordéons, menus, tabs) de manière visuelle. Mais ces interactions ne génèrent pas les attributs ARIA requis : les onglets n'ont pas role=tablist/tab/tabpanel, les accordéons n'ont pas aria-expanded, les modales n'ont pas role=dialog. Le résultat visuel est convaincant, mais les composants sont inutilisables pour les technologies d'assistance.

Focus non géré sur les composants interactifs

RGAA 7.3

Les composants interactifs Webflow (modales, menus hamburger, lightboxes, sliders) ne gèrent pas le focus clavier. Les modales s'ouvrent sans recevoir le focus, permettant de tabuler derrière le panneau. Les menus hamburger ne trappent pas le focus dans le menu ouvert. À la fermeture, le focus n'est pas restauré sur l'élément déclencheur. Les sliders ne sont pas navigables au clavier (flèches, Tab).

Contenu CMS dynamique sans structure accessible

RGAA 9.1

Les collections CMS de Webflow (blog, portfolio, produits) génèrent des listes de contenu dynamique. Chaque item de collection est un div contenant des div. Les listes ne sont pas des balises ul/ol. Les titres d'articles ne sont pas des h2/h3. Les liens entourent des blocs entiers sans texte descriptif clair. L'ensemble est une suite de div cliquables sans structure sémantique.

Testez votre site Webflow

Découvrez les non-conformités RGAA de votre site Webflow en 5 minutes. Gratuit, sans engagement.

Lancer l'audit gratuit

Ce que Scrutia détecte sur Webflow

Scrutia analyse le HTML généré par Webflow dans un navigateur réel. Notre moteur détecte les structures en div soup sans balises sémantiques, les interactions sans attributs ARIA, les composants sans gestion de focus et les collections CMS sans structure accessible. Nous testons chaque composant interactif au clavier (modales, accordéons, onglets, sliders) et vérifions que les landmarks ARIA sont présents. Les corrections sont fournies en HTML/CSS/JS avec les instructions pour les appliquer dans l'éditeur Webflow ou via du code custom embed.

Questions fréquentes — Webflow

Peut-on corriger les problèmes d'accessibilité directement dans Webflow ?
Partiellement. Webflow permet d'ajouter des attributs custom (role, aria-label, aria-expanded) via l'interface. Les balises sémantiques (nav, main, section) peuvent être assignées dans les paramètres de chaque élément. Pour les corrections plus complexes (focus trap, aria-live, navigation clavier), il faut utiliser la fonctionnalité Custom Code de Webflow pour ajouter du JavaScript.
Le plan Webflow gratuit permet-il d'appliquer les corrections ?
Le plan gratuit de Webflow ne permet pas d'ajouter du code custom (JavaScript). Vous pouvez corriger les attributs ARIA et les balises sémantiques dans l'interface, mais les corrections nécessitant du JavaScript (focus management, aria-live) requièrent un plan payant avec Custom Code ou l'export du site.
Webflow dit que ses sites sont accessibles, c'est faux ?
Webflow a fait des progrès (support des attributs custom, rôle sémantique assignable), mais l'accessibilité d'un site Webflow dépend entièrement de la façon dont le designer le construit. L'outil ne force pas les bonnes pratiques : il est possible de créer un site Webflow accessible, mais cela demande une expertise spécifique que la plupart des designers n'ont pas.

Auditer d'autres technologies

No-code

Wix

CMS

WordPress

E-commerce

Shopify

Auditez votre site Webflow maintenant

106 critères RGAA testés en 5 minutes. Score gratuit, rapport complet multi-pages avec corrections de code à partir de 149€.

Tester mon site Webflow