No-code

Audit d'accessibilite RGAA pour sites Webflow

Pourquoi Webflowpose des problemes d'accessibilite

Webflow est la plateforme no-code de reference pour les designers web, mais son approche visuelle de la construction de pages cree des problemes d'accessibilite structurels. Webflow genere du HTML base sur des div imbriquees — une 'div soup' ou chaque element visuel est un div avec des classes CSS custom. Les balises semantiques (nav, main, article, aside, section) sont rarement utilisees 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 systeme d'interactions proprietaire qui ne genere pas les attributs ARIA necessaires. Les formulaires Webflow ont un support basique de l'accessibilite (labels presents) mais la gestion des erreurs est limitee. Les composants CMS (collections dynamiques) generent du HTML repetitif 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 fleches.

Problemes frequents sur Webflow

Structure HTML en 'div soup' sans semantique

RGAA 9.2

Webflow genere son HTML a partir de la structure visuelle du designer. Chaque element est un div avec des classes CSS. Les balises semantiques (header, nav, main, section, article, aside, footer) ne sont pas utilisees par defaut. Les lecteurs d'ecran ne peuvent pas identifier les regions de la page (navigation, contenu principal, pied de page). La navigation par landmarks est impossible, obligeant l'utilisateur a parcourir chaque element lineairement.

Interactions et animations sans ARIA

RGAA 7.1

Le systeme d'interactions de Webflow permet de creer des animations complexes (modales, accordeons, menus, tabs) de maniere visuelle. Mais ces interactions ne generent pas les attributs ARIA requis : les onglets n'ont pas role=tablist/tab/tabpanel, les accordeons n'ont pas aria-expanded, les modales n'ont pas role=dialog. Le resultat visuel est convaincant, mais les composants sont inutilisables pour les technologies d'assistance.

Focus non gere sur les composants interactifs

RGAA 7.3

Les composants interactifs Webflow (modales, menus hamburger, lightboxes, sliders) ne gerent pas le focus clavier. Les modales s'ouvrent sans recevoir le focus, permettant de tabuler derriere le panneau. Les menus hamburger ne trappent pas le focus dans le menu ouvert. A la fermeture, le focus n'est pas restaure sur l'element declencheur. Les sliders ne sont pas navigables au clavier (fleches, Tab).

Contenu CMS dynamique sans structure accessible

RGAA 9.1

Les collections CMS de Webflow (blog, portfolio, produits) generent 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 semantique.

Testez votre site Webflow

Decouvrez les non-conformites RGAA de votre site Webflow en 5 minutes. Gratuit, sans engagement.

Lancer l'audit gratuit

Ce que Scrutia detecte sur Webflow

Scrutia analyse le HTML genere par Webflow dans un navigateur reel. Notre moteur detecte les structures en div soup sans balises semantiques, 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, accordeons, onglets, sliders) et verifions que les landmarks ARIA sont presents. Les corrections sont fournies en HTML/CSS/JS avec les instructions pour les appliquer dans l'editeur Webflow ou via du code custom embed.

Questions frequentes — Webflow

Peut-on corriger les problemes d'accessibilite directement dans Webflow ?

Partiellement. Webflow permet d'ajouter des attributs custom (role, aria-label, aria-expanded) via l'interface. Les balises semantiques (nav, main, section) peuvent etre assignees dans les parametres de chaque element. Pour les corrections plus complexes (focus trap, aria-live, navigation clavier), il faut utiliser la fonctionnalite 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 semantiques dans l'interface, mais les corrections necessitant du JavaScript (focus management, aria-live) requierent 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 progres (support des attributs custom, role semantique assignable), mais l'accessibilite d'un site Webflow depend entierement de la facon dont le designer le construit. L'outil ne force pas les bonnes pratiques : il est possible de creer un site Webflow accessible, mais cela demande une expertise specifique que la plupart des designers n'ont pas.

Auditez votre site Webflow maintenant

106 criteres RGAA testes en 5 minutes. Score gratuit, rapport complet avec corrections de code a 49 euros.

Tester mon site Webflow