Better in English?
Better in English? Switch the website language for a better experience.
Chez Mazette.co, on continue d'auditer des sites Webflow superbes visuellement et complètement hors des clous côté accessibilité. Pas par mauvaise volonté : parce que Webflow, aussi puissant soit-il, ne force rien. Il vous laisse construire une div cliquable à la place d'un bouton, empiler des headings dans le désordre, ou balancer une image sans texte alternatif sans jamais vous prévenir. La plateforme donne les outils pour bien faire, rarement le garde-fou pour vous empêcher de mal faire.
Et en 2026, le sujet a pris une dimension supplémentaire. Le European Accessibility Act est pleinement applicable depuis juin 2025, ce qui signifie que pour de nombreux clients e-commerce ou services en ligne opérant en Europe, l'accessibilité n'est plus une option éthique mais une obligation légale avec de vraies sanctions à la clé. Sans compter que les moteurs génératifs qui alimentent les réponses IA lisent eux aussi votre structure sémantique pour comprendre et citer votre contenu -- un site mal structuré perd sur les deux tableaux à la fois.
Un site accessible commence par une hiérarchie de titres logique et un HTML qui utilise les bonnes balises pour les bons usages. C'est le fondement, et c'est aussi l'erreur la plus fréquente qu'on retrouve en audit.
Sur Webflow, il est tentant de choisir un niveau de titre (H1, H2, H3...) uniquement pour son rendu visuel plutôt que pour sa place logique dans la page. Résultat : des H3 qui suivent directement un H1, des pages avec trois H1 différents, ou des designers qui stylent un paragraphe en H2 juste parce que la taille de police leur plaît. Un lecteur d'écran s'appuie sur cette hiérarchie pour permettre à un utilisateur malvoyant de naviguer de titre en titre. Si elle est incohérente, la navigation devient un labyrinthe.
La règle est simple à énoncer, plus longue à appliquer avec rigueur : un seul H1 par page, puis des niveaux qui descendent sans sauter d'échelon. Le Designer Webflow permet de dissocier le style visuel de la balise sémantique -- utilisez cette fonction systématiquement plutôt que de laisser le CSS dicter la structure.
Combien de "boutons" sur des sites Webflow sont en réalité des div avec un lien enveloppant ou un onClick ? Beaucoup. Le problème : une div n'est pas nativement focusable au clavier et n'annonce rien à un lecteur d'écran. Un utilisateur qui navigue au clavier passe dessus sans même savoir qu'un élément interactif existe.
Webflow propose des éléments natifs (Link Block, Button) qui génèrent le bon HTML sémantique. Le réflexe à prendre : toujours partir de ces composants plutôt que de recréer un comportement cliquable à partir d'un div générique, même si visuellement le résultat est identique.
Le contraste des couleurs est sans doute le critère WCAG le plus facile à vérifier et pourtant le plus souvent ignoré en phase de design. Un texte gris clair sur fond blanc, tendance très 2020-2022 dans le web design minimaliste, ne passe quasiment jamais le seuil AA de 4,5:1 pour du texte standard.
Sur un projet récent pour un client dans le secteur de la formation professionnelle, on a repris une charte graphique existante où le gris utilisé pour les sous-titres affichait un ratio de 2,8:1 -- largement sous le seuil. Le changement a semblé minime visuellement (un gris à peine plus foncé) mais a fait passer l'ensemble du site sous la barre légale, sans jamais dénaturer l'identité de marque. C'est souvent ça, l'accessibilité bien faite : des ajustements presque invisibles à l'œil non averti, décisifs pour l'usage réel.
Prenez votre clavier, débranchez la souris mentalement, et naviguez sur votre site Webflow avec la touche Tab. C'est l'exercice le plus révélateur qu'on fasse en audit chez Mazette.co, et il surprend systématiquement les équipes projet la première fois.
Les problèmes qu'on retrouve presque à chaque fois : un focus invisible parce que le style outline a été supprimé en CSS pour des raisons esthétiques (souvent un reste de reset CSS mal maîtrisé), un ordre de tabulation qui saute des éléments interactifs entiers, ou des menus déroulants complètement inaccessibles sans souris.
La pratique outline: none reste répandue par pur souci esthétique. C'est l'une des pires régressions a11y qu'on puisse introduire, car elle prive tous les utilisateurs clavier d'un repère visuel essentiel. La bonne approche : personnaliser le focus (couleur de marque, bordure, ombre) plutôt que de le supprimer purement et simplement. Webflow permet cette personnalisation via les interactions et le CSS custom directement dans le Designer.
Au-delà des fondamentaux visuels, trois zones concentrent la majorité des manquements qu'on observe sur les projets Webflow qui arrivent chez Mazette.co pour un audit ou une refonte.
Webflow propose un champ Alt Text natif sur chaque image, mais la moitié du travail consiste à savoir quand le laisser vide. Une image purement décorative (un fond, un motif graphique) doit avoir un alt vide pour être ignorée par les lecteurs d'écran -- sinon on pollue la navigation d'informations inutiles. À l'inverse, une image porteuse de sens (un graphique, une infographie, un logo cliquable) a besoin d'une description précise, jamais générique du type "image" ou "photo".
Un champ de formulaire Webflow sans label lié programmatiquement (via l'attribut for/id, pas juste visuellement à côté) est inutilisable pour un lecteur d'écran. C'est un classique des formulaires de contact rapides, montés sans prêter attention à cette association.
Les Collection Lists Webflow, très utilisées pour du contenu dynamique, méritent une vigilance particulière : vérifier que les éléments générés dynamiquement conservent une structure sémantique cohérente, et que les interactions custom (accordéons, sliders, tabs) restent utilisables au clavier et annoncées correctement via les attributs ARIA quand c'est nécessaire.
| Critère a11y | Erreur fréquente sur Webflow | Correction recommandée |
|---|---|---|
| Hiérarchie des titres | Niveaux choisis pour le style visuel | Dissocier balise sémantique et style CSS |
| Contraste des couleurs | Texte gris clair sous le ratio 4,5:1 | Vérifier chaque combinaison, y compris hover/focus |
| Navigation clavier | Focus supprimé ou invisible | Personnaliser l'outline plutôt que le retirer |
| Images | Alt générique ou manquant | Alt vide pour le décoratif, descriptif pour l'informatif |
| Formulaires | Labels non associés programmatiquement | Lier via attribut for/id systématiquement |
{{webflow}}
On le dit souvent en réunion de cadrage : l'accessibilité coûte trois fois plus cher à corriger après coup qu'à intégrer dès la conception Figma. Sur un projet récent pour un acteur de la santé, on a intégré l'audit a11y dès la phase de wireframe -- contraste validé sur les maquettes, structure de titres pensée avant même le premier écran designé, composants de formulaire testés au clavier avant intégration Webflow. Résultat : zéro reprise majeure au moment de la mise en ligne, alors que sur un projet comparable mené en mode "on corrigera après", on avait dû refaire l'intégralité de la charte de couleurs secondaires deux semaines avant le lancement.
Notre conviction, forgée projet après projet : l'accessibilité n'est pas un chapitre à cocher en fin de production, c'est un critère de design au même titre que la cohérence de marque ou la performance de chargement. Elle s'intègre dans la méthode dès le brief, se retrouve dans les choix de product design et se valide techniquement au moment de l'intégration Webflow. C'est aussi ce qui distingue une agence expert Webflow d'un prestataire qui livre un beau visuel sans se soucier de qui peut réellement l'utiliser.
{{seo-aeo}}
Un site bien structuré sémantiquement profite doublement : il devient plus facile à parcourir pour les utilisateurs en situation de handicap, et il devient aussi plus lisible pour les robots d'indexation et pour les moteurs génératifs qui construisent leurs réponses IA. Une hiérarchie de titres propre, des textes alternatifs descriptifs, un balisage sémantique cohérent -- ce sont exactement les signaux que Google et les IA génératives utilisent pour comprendre le contenu d'une page.
On recommande systématiquement de coupler l'audit a11y avec un audit SEO technique complet, notamment sur les sites qui migrent vers Webflow depuis un CMS existant, où les mauvaises pratiques d'accessibilité s'accumulent souvent avec les années. Pour aller plus loin sur la structuration technique d'un site Webflow, notre article sur les meilleures pratiques SEO Webflow complète naturellement cette réflexion, tout comme notre analyse sur l'ouverture de Webflow AEO Analytics à Claude et Gemini.
Code
Plus de 180 entreprises sont déjà sorties de l'obscurité à nos côtés.
Testez d'abord la navigation complète au clavier avec la touche Tab, sans souris, pour repérer les éléments inaccessibles. Complétez avec un vérificateur de contraste sur les couleurs de texte, et une extension d'audit accessibilité pour détecter les balises manquantes ou mal structurées. Un audit manuel reste indispensable, aucun outil automatique ne couvre 100% des critères WCAG.
Non, Webflow fournit les outils techniques pour construire un site accessible, mais rien n'est appliqué automatiquement. La conformité dépend entièrement des choix faits par le designer et l'intégrateur : hiérarchie des titres, contraste, textes alternatifs et navigation clavier restent sous la responsabilité de l'équipe projet.
Depuis l'application pleine de l'European Accessibility Act en juin 2025, les entreprises concernées (notamment e-commerce et services numériques) s'exposent à des sanctions financières et à des mises en demeure en cas de non-conformité. Les seuils et modalités varient selon les pays membres, mais le risque juridique est désormais réel et non plus théorique.
Titres percutants, meta descriptions soignées, sitemap, Schema.org, structure Hn, audits : ce sont les fondations SEO qui rendent votre contenu lisible par Google ET par les IA génératives. Nous couvrons les deux en même temps.
Avec plus de 180 clients, notre agence vous accompagne sur tous les sujets comme le webdesign sur mesure, les automations fines, la conversion et votre visibilité SEO et GEO.
Nous concevons des designs web sur mesure, orientés performance, parcours utilisateurs et conversion. Comme plus de 180 clients, faites nous confiance et élevez votre marque.
