Aller au contenu principal
Seviranta

Accessibilité Webflow

Rends ton site Webflow vraiment accessible. EAA, RGAA et WCAG, sans overlay

Webflow te donne un contrôle au pixel près, mais aucune accessibilité intégrée : le Designer laisse de côté aria-* sur les composants complexes par défaut. Nous trouvons les obstacles et livrons la correction dans tes propres Custom Attributes, aucun widget qui ralentit ton site.

Voici comment Seviranta s'attaque à ton site Webflow à la source

Là où les obstacles se cachent

Les thèmes, extensions et formulaires introduisent des barrières silencieuses. Nous les trouvons toutes.

La correction dans la source, pas par-dessus

Des réparations concrètes dans ton configuration Webflow, pas une couche d'overlay qui ne fait que masquer les erreurs.

Pas de widget, pas de ralentissement

Nous crawlons de l'extérieur depuis des serveurs UE, 0 % d'impact sur ta vitesse de chargement et tes Core Web Vitals.

Prêt pour l'EAA

On teste ton site face à WCAG, au niveau auquel les régulateurs contrôlent.

Aucun compte nécessaire. Nous scannons une page de ton site en pleine profondeur et ne conservons rien.

Scan headless avec axe-core, le même moteur que celui de Google Lighthouse, depuis nos serveurs situés dans l'UE. 0% d'impact sur ta vitesse de chargement.

Ou découvre d'abord comment ça marche →

La vérité : Webflow n'est pas accessible par défaut

Le Designer de Webflow produit du HTML propre, et les composants natifs de Webflow (Tabs, Dropdown, Navbar, Slider) sont, selon Webflow lui-même, accessibles en ARIA et au clavier. Ça se gâte dans ce que tu construis toi-même : les onglets, modales et boutons faits de div avec des interactions n'ont ni rôle ni état, le style de focus est à définir partout par toi, l'Audit panel ne contrôle que quatre points et la Lightbox ne prend pas en charge le texte alternatif. C'est exactement là que tombent les constats.

Ce qui est vraiment en jeu

  • Un checkout non accessible est une infraction directe à l'EAA.
  • Un widget d'accessibilité ne compte pas comme une solution structurelle.
  • Les autorités de contrôle testent le HTML généré, y compris tes apps.
  • « On utilise Webflow » n'est pas une défense juridique : la responsabilité incombe à la boutique en ligne en service, pas à la plateforme.

Ce que l'attente peut coûter

jusqu'à € 1.000.000

Maximum UE · Espagne/Luxembourg

$ 4.000

États-Unis · Californie (Unruh), par visite

Tu n'es pas sanctionné du jour au lendemain, d'abord vient une mise en demeure avec un délai. Mais celui qui peut alors présenter un dossier daté s'en sort au moindre coût.

Vois ce qui s'applique à ton marché

Le risque caché des extensions Webflow tierces

Les widgets d'avis, les filtres, les bundlers et les apps de recherche injectent du HTML dynamique dans ton frontend, et chaque mise à jour d'app peut ajouter un nouvel obstacle. Dans un audit, ce code compte pleinement, même si ce n'est pas toi qui l'as écrit. C'est pourquoi Seviranta surveille en continu le résultat final tel qu'un régulateur le voit : ton thème Webflow plus toutes les apps et le contenu dynamique.

Ce qui cloche souvent sur Webflow

  • Onglets personnalisés sans role ni aria-selectedQuand tu construis tes propres onglets dans le Designer, ils restent de simples div. Sans role="tab", aria-selected et aria-controls sur les boutons d'onglet, un lecteur d'écran ne peut pas dire que ce sont des onglets ni lequel est actif. Tu les ajoutes à la main via les Custom Attributes.
  • Menus déroulants et modales sans gestion du piège clavierLes interactions de Webflow ouvrent souvent un menu déroulant ou une modale sans déplacer ni retenir le focus. Les utilisateurs au clavier tabulent derrière l'overlay et perdent de vue le contenu.
  • Boutons en div sans role ni tabindexUne div avec une interaction de clic ressemble à un bouton, mais n'en est pas un. Sans role="button" et tabindex="0" via les Custom Attributes, elle est inaccessible aux utilisateurs au clavier et au lecteur d'écran.
  • Images de Lightbox sans texte alternatifLa Lightbox de Webflow ne prend pas en charge le texte alternatif des images qu'elle contient, et l'Audit panel ne le signale pas. Chaque photo produit ou image de portfolio dans une lightbox est donc invisible pour les lecteurs d'écran. Choisis une autre configuration de galerie ou décris l'image dans le texte qui l'entoure.

À quoi ressemble une vraie correction

Prends un composant d'onglets personnalisé que tu as construit avec des div dans le Designer. Un lecteur d'écran n'entend alors que « groupe » au lieu d'une rangée d'onglets. La correction vit entièrement dans les Custom Attributes, pas de reconstruction : mets role="tab", aria-selected et aria-controls sur les boutons d'onglet.

Custom Attributes
Avant
<div class="tab-link">Overzicht</div>
Après
<div class="tab-link"
  role="tab"
  aria-selected="true"
  aria-controls="panel-overzicht">Overzicht</div>

Ce que tu règles toi-même dans Webflow

Webflow intègre plus de choses que la plupart des outils no-code, mais son outillage ne couvre qu'une partie des WCAG. Voici les cinq endroits où tu fais la différence dans le Designer, et ce que tu dois résoudre en dehors.

  1. 1Audit panel : quatre contrôles, pas plusL'Audit panel (barre d'outils de gauche, Option/Alt + U) contrôle exactement quatre points : textes alternatifs manquants, textes de lien non descriptifs, niveaux de titre sautés et ID d'élément en double. Le contraste des couleurs, tout ce qui se trouve dans des Components, les médias de la Lightbox et les images liées au CMS restent hors champ. Vert dans l'Audit panel ne veut donc pas dire vert WCAG.
  2. 2Texte alternatif : descriptif ou décoratifDéfinis l'alt par défaut de chaque ressource dans l'Assets panel (roue crantée → Descriptive ou Decorative) et remplace-le par instance via Image settings → Alt text. Decorative produit un alt vide, pour que les lecteurs d'écran ignorent l'image. Le texte alternatif dans une Lightbox n'est pas pris en charge ; choisis-y une autre configuration de galerie.
  3. 3Rendre le focus visibleLes composants natifs de Webflow sont, selon Webflow, accessibles en ARIA et au clavier, mais le style de focus, c'est à toi de le définir. Style panel → States → « Focused (keyboard) » et donne-lui un contour net ; pour les points du slider, ce n'est possible que via du CSS personnalisé sur .w-slider-dot:focus.
  4. 4Custom attributes pour tout ce que tu construis toi-mêmeSi tu construis des onglets, des modales ou des boutons à partir de div et d'interactions, un lecteur d'écran n'a aucune idée de ce que c'est. Element settings → Custom attributes → « + » et ajoute role, aria-label, aria-expanded ou tabindex. Les attributs peuvent aussi être liés à des champs CMS et à des propriétés de composant, pour ne les définir qu'une seule fois.
  5. 5Lien d'évitement et animationsUn lien « aller au contenu » n'est pas intégré à Webflow ; tu le construis toi-même comme premier élément du header, masqué jusqu'au focus, avec un petit script sous Project settings → Custom code. Animations : passe les interactions sur « no animation » ou « skip to end » pour prefers-reduced-motion, et donne aux vidéos d'arrière-plan un bouton lecture/pause.

Webflow le dit lui-même : les éléments testés sont conformes à des niveaux « allant jusqu'à » WCAG 2.1 AA, et l'outil rend facile la publication de contenu inaccessible. Notre scan teste la page publiée, exactement ce que voit une autorité de contrôle, quoi que l'Audit panel affiche en vert.

Ce que tu reçois

Par erreur : quoi, pourquoi et comment

Pour chaque constat, tu vois ce qui ne va pas, qui c'est affecté, quelle règle WCAG est concernée et une solution concrète, pensée pour Webflow, avec un exemple de code quand c'est possible.

Détection spécifique à la plateforme

Tu attrapes les erreurs qui surgissent précisément sur Webflow, pas seulement ce qu’un contrôle WCAG générique repère.

Un dossier qui tient la route

Un aperçu daté de tes scans et de tes constats que tu peux présenter lors d'un audit ou d'une inspection.

Avec un outil de reporting, tu paies la licence et tes développeurs pour corriger les erreurs. Avec Seviranta, la correction est incluse, pas de double facture.

Protège ta conversion et ta situation juridique

Une app qui colle une icône d'accessibilité par-dessus ton site Webflow est un risque pour ton activité. Les faits :

Les widgets d'accessibilité pour Webflow

  • Chargent des scripts externes supplémentaires qui nuisent à ta vitesse de chargement (LCP) et donc à ta conversion.
  • Masquent l'erreur au lieu de la résoudre, le code sous-jacent reste défectueux.
  • Ne te protègent pas contre les plaintes. La FTC a infligé en 2025 une amende d'1 million de dollars au fournisseur d'overlay accessiBe pour des allégations de conformité trompeuses.

L'approche Seviranta

  • 0 % d'impact sur ta vitesse de chargement, on scanne de l'extérieur depuis nos serveurs en UE.
  • On répare le vrai code source de tes templates Webflow.
  • On constitue automatiquement ton dossier EAA conservable, prêt à présenter à un régulateur.

Questions et réponses

Webflow est déjà accessible, alors pourquoi mon site échoue-t-il ?
Les composants natifs de Webflow sont accessibles en ARIA et au clavier selon Webflow, mais tout ce que tu construis toi-même avec des div et des interactions, tes choix de couleurs, tes textes alternatifs et l'ordre de tes titres, c'est toi qui en décides. C'est là que se trouvent la plupart des constats, et l'Audit panel ne les voit en grande partie pas.
Le RGAA s'applique-t-il à mon site Webflow ?
Le RGAA (version 4.1.2, géré par la DINUM) est la méthode française : 106 critères qui couvrent les critères de succès A et AA des WCAG 2.1 via l'EN 301 549. L'obligation de l'article 47 de la loi 2005-102 vise le secteur public et les entreprises réalisant plus de 250 M€ de chiffre d'affaires, avec l'Arcom comme autorité de contrôle. Depuis le 28 juin 2025, le e-commerce relève en plus de la transposition de la directive européenne sur l'accessibilité (EAA) dans le Code de la consommation (article L. 412-13), avec une exemption pour les micro-entreprises (moins de 10 personnes et au plus 2 M€ de chiffre d'affaires ou de total de bilan), sous le contrôle de la DGCCRF. Le RGAA évalue la page publiée, quel que soit l'outil de construction : bien fait une fois dans Webflow, c'est bon pour la France.
Seviranta peut-elle appliquer le correctif dans Webflow à ma place ?
Pour chaque constat, nous livrons l'emplacement exact (sélecteur) et le correctif : quel custom attribute, quel texte alternatif, quel style de focus. C'est toi ou ton intégrateur Webflow qui l'applique dans le Designer. Nous n'avons besoin d'aucun accès à ton projet et nous ne plaçons aucun script sur ton site.
Un widget d'accessibilité pour Webflow suffit-il pour l'EAA ?
Non. Un widget pose une couche par-dessus ton site, mais ne répare pas le code sous-jacent et ne compte pas comme une conformité structurelle.
Mon checkout Webflow relève-t-il de l'EAA ?
Oui. Le checkout et la navigation font explicitement partie de l'obligation au titre du WCAG 2.1 AA.
Seviranta scanne-t-il aussi mes apps Webflow ?
Oui. On teste le HTML final généré, thème plus apps, comme le fait une autorité de contrôle.
Est-ce que ça va ralentir mon site Webflow ?
Non. On scanne de l'extérieur depuis nos serveurs en UE ; aucun script ne se pose sur ton site. 0 % d'impact sur ta vitesse de chargement et tes Core Web Vitals.

Nous le faisons aussi nous-mêmes

Nous nous imposons exactement la même exigence : notre propre site affiche 0 erreur dans axe-core, le même moteur que celui de Google Lighthouse, celui avec lequel nous scannons aussi ta boutique Webflow. Ce qu'une machine détecte avec certitude, nous le corrigeons automatiquement, le reste, c'est un humain qui l'évalue. Voici avec quelle rigueur nous te livrons tout ça : vois un vrai exemple de rapport.

Ce que l'EAA et le RGAA attendent de ta boutique Webflow

Depuis juin 2025, ta boutique en ligne doit respecter le WCAG 2.1 AA, une boutique Webflow ne fait pas exception. Le scan gratuit te montre en 60 secondes où tu en es, avec la ligne exacte qui ne passe pas.

Tu vends dans plusieurs pays ?

WCAG est la norme mondiale. Presque chaque marché s'appuie dessus :

UE : European Accessibility ActÉ.-U. : ADAR.-U. : Equality Act 2010

Mets ta boutique Webflow en conformité WCAG une seule fois et tu couvres la barre technique sur tous ces marchés. Ce qui change selon le marché, c'est l'autorité de contrôle et les amendes.

Vois ce qui s'applique selon ton marché cible

Tu gères plusieurs sites Webflow pour des clients ?

Évite que les boutiques que tu livres ne deviennent un risque juridique sous l'EAA pour tes donneurs d'ordre. Utilise Seviranta comme ton tampon qualité automatisé à chaque livraison et chaque déploiement, un seul scan, et chaque site est démontrablement en règle.

Découvre notre programme partenaire

Scanne ta boutique Webflow gratuitement

Colle l'URL de ton site Webflow dans le scan gratuit et vois en moins d'une minute quelles lignes ne passent pas, avec l'emplacement exact dans tes composants.