EAA 2025 · E-commerce · France··10 min de lecture

EAA 2025 pour l'e-commerce français : ce que vous devez faire avant votre prochain audit

L'European Accessibility Act (EAA) est entré en vigueur le 28 juin 2025. Il n'arrive pas — il est déjà là. Les entreprises B2C françaises sont désormais soumises à des obligations d'accessibilité contraignantes, et les contrôles ont commencé.

Si vous gérez un site e-commerce, une plateforme fintech ou tout produit numérique destiné aux consommateurs en France, cet article vous explique exactement qui est concerné, ce que la loi exige techniquement, pourquoi la correction a posteriori est coûteuse, et ce que vos développeurs doivent faire aujourd'hui.

1. Qui est concerné par l'EAA en France ?

L'EAA (Directive UE 2019/882) a été transposée en droit français et s'applique à toutes les entreprises du secteur privé fournissant des produits ou services numériques aux consommateurs — avec une exception : les micro-entreprises définies comme ayant moins de 10 salariés ET un chiffre d'affaires annuel inférieur à 2 millions d'euros. Les deux conditions doivent être réunies pour bénéficier de l'exemption. Dépasser l'un des deux seuils suffit à être assujetti.

Secteurs directement concernés en France :

    • E-commerce — fiches produit, tunnel de commande, suivi de livraison, retours, espace client
    • Fintech / banque — applications bancaires mobiles, interfaces de paiement, gestion de compte
    • Edtech — plateformes de formation en ligne, lecteurs de cours, outils d'évaluation
    • Santé numérique — portails patients, applications de télémédecine, gestion des ordonnances
    • Transport — systèmes de réservation et billetterie, planificateurs d'itinéraires

    Dates clés :

      • 28 juin 2025 — EAA pleinement en vigueur pour tous les nouveaux produits et services
      • 28 juin 2030 — Échéance pour les services existants couverts par des contrats de longue durée (mais la planification doit commencer maintenant)

      L'autorité de transposition française est l'ARCOM (régulateur des communications numériques), appuyée par la DINUM pour les questions relatives au RGAA. Les sanctions pour non-conformité atteignent 7 500 € par infraction et 15 000 € en cas de récidive — par service.

      2. Que requiert l'EAA sur le plan technique ?

      L'EAA référence la norme technique européenne harmonisée EN 301 549 v3.2.1. En pratique, pour les produits web et mobile, cela signifie :

      WCAG 2.2 Niveau AA — La baseline

      Les Règles pour l'accessibilité des contenus Web (WCAG) 2.2 au niveau AA constituent la référence technique principale. Elles couvrent quatre principes :

      • Perceptible — Le contenu doit être présentable à tous les utilisateurs (texte alternatif, sous-titres, contrastes suffisants, redimensionnement du texte)
      • Utilisable — Toutes les fonctionnalités doivent être accessibles via clavier, tactile et technologies d'assistance (gestion du focus, pas de pièges clavier, délais suffisants)
      • Compréhensible — Le contenu et le comportement de l'interface doivent être prévisibles (navigation cohérente, messages d'erreur, déclaration de langue)
      • Robuste — Le contenu doit être compatible avec les technologies d'assistance actuelles et futures (ARIA valide, HTML sémantique)

      RGAA 4.1.2 — La transposition nationale française

      En France, la référence nationale d'accessibilité est le RGAA 4.1.2 (Référentiel Général d'Amélioration de l'Accessibilité), maintenu par la DINUM. Il s'aligne sur WCAG 2.2 AA avec des orientations spécifiques à la France réparties en 13 thématiques et 106 critères :

      1. Images (alternatives textuelles, décoratives vs. informatives)
      2. Cadres (titres des iframes)
      3. Couleurs (ratios de contraste)
      4. Multimédia (sous-titres, audiodescriptions)
      5. Tableaux (structure des tableaux de données)
      6. Liens (intitulés descriptifs)
      7. Scripts (patterns ARIA pour composants interactifs)
      8. Éléments obligatoires (titre de page, attribut lang)
      9. Structuration de l'information (titres, listes)
      10. Présentation (CSS, visibilité du focus)
      11. Formulaires (étiquettes, gestion des erreurs)
      12. Navigation (liens d'évitement, menus cohérents)
      13. Consultation (pas de lecture automatique, lisibilité)

      Applications mobiles : RAAM 1.0

      Pour les applications iOS et Android natives, la France utilise le RAAM 1.0 (Référentiel d'Évaluation de l'Accessibilité des Applications Mobiles), publié par la DINUM. Il applique les mêmes principes que le RGAA mais pour les contrôles natifs, les gestes et les API d'accessibilité de la plateforme.

      Composants e-commerce qui échouent fréquemment aux audits

      Sur la base des résultats récurrents d'audits dans l'e-commerce français :

      ComposantDéfaut courantCritère WCAG
      Images produitTexte alternatif absent ou générique1.1.1
      Bouton "Ajouter au panier"Pas de nom accessible si icône seule4.1.2
      Affichage du prixIndication de remise uniquement par couleur1.4.1
      Champs du formulaire de commandeÉtiquettes non associées1.3.1
      Indicateur d'étapesNon annoncé aux lecteurs d'écran4.1.3
      Fenêtres modalesFocus non piégé ou non restauré2.1.2
      Messages d'erreurNon liés aux champs de formulaire3.3.1
      Filtres produitsMenus déroulants non accessibles au clavier2.1.1

      3. Le problème du rattrapage : pourquoi construire accessible dès le départ coûte 10x moins

      L'un des enseignements les plus constants des audits d'accessibilité e-commerce est que les problèmes d'accessibilité sont nettement moins chers à prévenir qu'à corriger. La raison est architecturale : l'accessibilité n'est pas une couche de fonctionnalités que l'on ajoute par-dessus — elle est intégrée dans la structure sémantique des composants, les patterns ARIA qu'ils implémentent, et le modèle d'interaction clavier qu'ils suivent.

      Le coût réel du rattrapage

      Coûts d'audit d'accessibilité externe en France :

      • Petit site e-commerce (< 20 pages, flux simple) : 3 000 € – 8 000 €
      • Plateforme de taille moyenne (panier, tunnel, compte, filtres) : 8 000 € – 15 000 €
      • Grande marketplace ou SPA complexe : 15 000 € – 25 000 € et plus

      Et ce n'est que l'audit. La remédiation est séparée — et plus coûteuse.

      Pourquoi la remédiation est si coûteuse :

      1. Refonte de composants — Les composants inaccessibles (menus déroulants, sélecteurs de date, modales, onglets) doivent souvent être reconstruits de zéro, pas simplement patchés. Un menu déroulant personnalisé inaccessible nécessite une réécriture complète avec les rôles ARIA appropriés, la gestion du clavier et du focus.

      2. Risque de régression — Modifier les composants existants casse les tests en aval, les hypothèses CSS et les flux produit. Chaque correction nécessite un cycle QA.

      3. Lacune de documentation — Les composants rétrofités sont rarement accompagnés de documentation d'audit. Après correction, votre équipe doit encore rédiger le tableau de conformité RGAA 4.1.2 pour chaque composant.

      4. Nouvel audit — Après remédiation, vous avez besoin d'un second audit pour confirmer les corrections. Deux audits à 8 000–15 000 € chacun représente un poste budgétaire significatif.

      Le risque juridique d'attendre

      Sous l'EAA, la non-conformité après le 28 juin 2025 expose votre entreprise à :

      • Sanctions financières — jusqu'à 7 500 € par infraction, 15 000 € en cas de récidive
      • Injonctions — les régulateurs peuvent vous obliger à suspendre ou modifier le service
      • Dommage réputationnel — les associations de défense des droits en France publient des listes de services non conformes
      • Exclusion commerciale — les grands clients du secteur public exigent de plus en plus la conformité accessibilité de leurs fournisseurs

      4. Checklist développeur : 10 points à vérifier dès maintenant

      Les 10 vérifications suivantes couvrent les critères les plus fréquemment échoués dans les audits d'accessibilité e-commerce français. Ce sont des vérifications concrètes, au niveau composant, que vos développeurs peuvent effectuer aujourd'hui.

      01

      Chaque champ de formulaire a une étiquette associée programmatiquement

      Utilisez <label for="fieldId"> ou aria-labelledby. Le texte placeholder seul ne suffit pas. Vérifiez : inspectez le champ dans les DevTools, cherchez aria-labelledby ou htmlFor pointant vers l'étiquette.

      WCAG 1.3.1 / RGAA 11.1
      02

      Les messages d'erreur sont liés à leur champ via aria-describedby

      Le texte d'erreur doit être associé programmatiquement : <span id="email-error">...</span> avec aria-describedby="email-error" sur l'input. Les lecteurs d'écran doivent annoncer l'erreur lors de la prise de focus.

      WCAG 3.3.1 / RGAA 11.11
      03

      La couleur n'est jamais le seul moyen de transmettre une information

      Une bordure rouge seule n'est pas un indicateur d'erreur — combinez-la avec du texte ou une icône. Les prix barrés affichés uniquement en rouge échouent ce critère. Ajoutez aria-label="Prix remisé" ou du texte visible.

      WCAG 1.4.1 / RGAA 3.1
      04

      Ratio de contraste du texte ≥ 4,5:1 (normal), ≥ 3:1 (grand texte)

      Utilisez le Colour Contrast Analyser ou les DevTools du navigateur. Le texte gris clair sur blanc est une erreur courante. Le grand texte (≥ 18pt ou 14pt gras) bénéficie du ratio 3:1.

      WCAG 1.4.3 / RGAA 3.2
      05

      Tous les éléments interactifs sont accessibles au clavier

      Parcourez l'intégralité de votre tunnel de commande uniquement au clavier. Chaque bouton, lien, menu déroulant et filtre doit être atteignable et activable. Les composants personnalisés doivent implémenter des gestionnaires d'événements clavier.

      WCAG 2.1.1 / RGAA 7.1
      06

      Le focus est toujours visible — jamais outline:none sans remplacement

      Recherchez dans votre CSS outline: none ou outline: 0. Si présent, vérifiez qu'un remplacement de focus visible existe (box-shadow, changement d'arrière-plan, bordure). WCAG 2.4.11 (nouveau en 2.2) exige que le focus ne soit pas entièrement masqué.

      WCAG 2.4.7 / 2.4.11 / RGAA 10.7
      07

      Les fenêtres modales piègent le focus et le restaurent à la fermeture

      Quand une modale s'ouvre, Tab ne doit circuler qu'à l'intérieur de la modale. À la fermeture, le focus doit revenir à l'élément déclencheur. Utilisez aria-modal="true" et gérez le focus programmatiquement.

      WCAG 2.1.2 / RGAA 7.1
      08

      Toutes les images produit ont un texte alternatif descriptif

      alt="produit" ou alt="image" échoue ce critère. Rédigez un texte descriptif : alt="Manteau caban en laine marine, double boutonnage, taille M". Les images décoratives utilisent alt="".

      WCAG 1.1.1 / RGAA 1.1
      09

      Les changements d'état dynamiques sont annoncés via ARIA live regions

      Ajouter un article au panier, appliquer un filtre ou afficher un toast de succès doit être annoncé. Utilisez role="status" pour les mises à jour non urgentes, role="alert" pour les erreurs. aria-live="polite" pour les mises à jour du compteur panier.

      WCAG 4.1.3 / RGAA 7.5
      10

      La page a un <title> unique et descriptif et l'attribut lang correct

      Chaque page a besoin d'un <title> unique (pas seulement "Boutique" — "Paiement — Votre Marque"). L'élément <html> a besoin de lang="fr" (ou en, etc.). Vérifiez que chaque route de votre SPA met à jour le titre du document.

      WCAG 2.4.2 / 3.1.1 / RGAA 8.3

      5. Comment Konform vous aide à livrer un e-commerce conforme

      Konform fournit des composants React conçus pour être conformes à WCAG 2.2 AA et RGAA 4.1.2 dès le premier jour. Chaque composant est livré avec :

      Documentation d'audit RGAA 4.1.2 par composant — Un tableau de conformité structuré listant chaque critère RGAA applicable, son statut (conforme, non applicable) et le détail d'implémentation qui le satisfait. Quand votre auditeur demande "comment cette modale gère-t-elle le focus ?", la réponse est déjà rédigée.

      HTML sémantique et patterns ARIA corrects — Les composants utilisent les bons éléments HTML et rôles ARIA. Pas de div-soupe. Pas de hacks aria-label sur des éléments non interactifs. Pas de pièges clavier.

      Modèles d'interaction clavier — Chaque composant interactif (menus déroulants, modales, onglets, sélecteurs de date, combobox) implémente les patterns ARIA Authoring Practices Guide pour la navigation clavier.

      Conformité des contrastes de couleur par défaut — Tous les tokens de couleur intégrés respectent le ratio 4,5:1 pour le texte normal et 3:1 pour le grand texte et les composants UI.

      Gestion du focus — Le piégeage du focus dans les modales, la restauration du focus à la fermeture et les indicateurs de focus visibles sont intégrés — pas laissés à la charge du développeur consommateur.

      Ce que cela signifie pour votre prochain audit

      Quand votre équipe utilise les composants Konform, la documentation de conformité par critère est déjà faite. Votre processus d'audit passe de "prouver que chaque composant est accessible" à "vérifier l'intégration et la structure au niveau page" — ce qui est nettement plus rapide et moins coûteux.

      Un audit qui coûterait 10 000–15 000 € pour un site construit sur des composants ad hoc peut être réduit significativement lorsque la couche composant dispose déjà d'une conformité documentée. Votre auditeur valide la documentation, vérifie l'intégration, et signe.

      Commencez à livrer des composants conformes aujourd'hui

      Konform vous donne des composants React avec une documentation d'audit WCAG 2.2 AA et RGAA 4.1.2 intégrée. Arrêtez le rattrapage. Commencez conforme.

      Articles associés

      Ressources de conformité pour les équipes e-commerce françaises