Accessibilité des Sites E-commerce : Guide Complet pour la Conformité RGAA

Pourquoi l'accessibilité est cruciale pour le e-commerce

L'accessibilité des sites e-commerce n'est plus une option : c'est une obligation légale et un levier de croissance. Depuis l'entrée en vigueur de l'European Accessibility Act le 28 juin 2025, les sites de commerce électronique des entreprises de plus de 10 salariés ou réalisant plus de 2 millions d'euros de chiffre d'affaires sont soumis aux obligations d'accessibilité numérique.

En France, 12 millions de personnes vivent avec un handicap. Une personne sur cinq rencontre des difficultés pour utiliser les services numériques. Pour un site e-commerce, cela représente un manque à gagner considérable : des études montrent que les sites inaccessibles perdent jusqu'à 15 à 20 % de leur chiffre d'affaires potentiel en excluant des utilisateurs qui auraient pu acheter.

Au-delà de l'obligation légale et du marché potentiel, l'accessibilité améliore l'expérience d'achat pour tous les utilisateurs. Un formulaire de paiement bien structuré, des erreurs de saisie clairement identifiées, une navigation fluide au clavier : ces améliorations bénéficient à l'ensemble de votre clientèle, y compris les personnes âgées, celles qui naviguent sur mobile dans des conditions difficiles, ou celles qui ont temporairement un bras dans le plâtre.

Les enjeux spécifiques du e-commerce

Un site e-commerce présente des défis d'accessibilité particuliers par rapport à un site vitrine. Les parcours utilisateurs sont plus complexes, les interactions plus nombreuses, et les conséquences d'un problème d'accessibilité plus lourdes : un utilisateur qui ne peut pas finaliser un achat, c'est une vente perdue.

• Parcours d'achat complexe — Le tunnel de commande implique de nombreuses étapes (panier, adresse, livraison, paiement, confirmation), chacune devant être entièrement accessible.
• Composants interactifs riches — Filtres, tris, carrousels de produits, sélecteurs de variantes, zoom sur les images, systèmes de notation.
• Formulaires critiques — Adresse de livraison, informations de paiement, création de compte : des formulaires où la moindre erreur d'accessibilité peut bloquer une transaction.
• Contenu dynamique — Ajout au panier, mise à jour des prix, notifications de stock, messages promotionnels qui changent en temps réel.
• Intégrations tierces — Moyens de paiement (Stripe, PayPal), chat en ligne, systèmes de recommandation, widgets de livraison qui doivent également être accessibles.

Pages produits accessibles

La page produit est le cœur de votre site e-commerce. Voici les points d'attention essentiels :

Images et médias

Conformément à la thématique 1 du RGAA sur les images, chaque image de produit doit avoir un texte alternatif pertinent :

<!-- BON : alt descriptif pour l'image principale -->
<img
  src="/produit-123.jpg"
  alt="Baskets running femme Nike Air Zoom, coloris bleu marine, vue de profil"
/>

<!-- BON : pour une galerie, chaque vue est décrite -->
<img src="/produit-123-face.jpg" alt="Vue de face" />
<img src="/produit-123-semelle.jpg" alt="Détail de la semelle" />

<!-- BON : image décorative (motif de fond, séparateur) -->
<img src="/decoratif.svg" alt="" role="presentation" />

Pour les fonctions de zoom sur les images, assurez-vous que l'image agrandie est également accessible. Le zoom doit pouvoir être activé et désactivé au clavier, et l'image zoomée doit conserver son texte alternatif.

Informations produit

• Prix — Utilisez une structure sémantique claire. Si le prix est barré, indiquez-le textuellement pour les lecteurs d'écran : aria-label="Prix réduit : 29,99 €, ancien prix : 49,99 €".
• Disponibilité — Ne transmettez pas l'information uniquement par la couleur (vert pour « en stock », rouge pour « épuisé »). Ajoutez toujours un texte explicite.
• Avis clients — Les étoiles de notation doivent avoir une alternative textuelle : aria-label="Note : 4 étoiles sur 5".
• Sélecteurs de variantes — Les sélecteurs de taille, couleur ou quantité doivent être des formulaires accessibles avec des labels explicites.

Bouton d'ajout au panier

<!-- BON : bouton explicite avec confirmation -->
<button
  type="button"
  aria-label="Ajouter Nike Air Zoom au panier"
  @click="addToCart"
>
  Ajouter au panier
</button>

<!-- Confirmation accessible après ajout -->
<div role="status" aria-live="polite">
  
</div>

Le role="status" avec aria-live="polite" garantit que les lecteurs d'écran annoncent la confirmation d'ajout au panier sans interrompre l'utilisateur.

Filtres et recherche accessibles

Les systèmes de filtrage et de recherche sont essentiels pour trouver des produits, mais ils posent souvent des problèmes d'accessibilité majeurs.

Filtres de catégorie

<!-- BON : groupe de filtres avec fieldset -->
<fieldset>
  <legend>Filtrer par taille</legend>
  <label>
    <input type="checkbox" name="taille" value="S" />
    S
  </label>
  <label>
    <input type="checkbox" name="taille" value="M" />
    M
  </label>
  <label>
    <input type="checkbox" name="taille" value="L" />
    L
  </label>
</fieldset>

<!-- Zone de résultats mise à jour dynamiquement -->
<div aria-live="polite" role="region" aria-label="Résultats de recherche">
  <p> produits trouvés</p>
  <!-- Liste de produits -->
</div>

Barre de recherche

• Le champ de recherche doit avoir un label explicite (visible ou via aria-label).
• Les suggestions d'autocomplétion doivent être navigables au clavier et annoncées aux lecteurs d'écran avec aria-expanded, aria-activedescendant et role="listbox".
• L'utilisateur doit pouvoir fermer les suggestions avec la touche Échap.

Tri des résultats

Le composant de tri (« Trier par prix croissant, par popularité, etc. ») doit être un élément de formulaire accessible :

<label for="tri-produits">Trier par</label>
<select id="tri-produits" @change="sortProducts">
  <option value="pertinence">Pertinence</option>
  <option value="prix-asc">Prix croissant</option>
  <option value="prix-desc">Prix décroissant</option>
  <option value="note">Meilleures notes</option>
</select>

Tunnel de commande accessible

Le tunnel de commande (checkout) est le parcours le plus critique d'un site e-commerce. C'est là que se concrétise la vente, et c'est souvent là que les problèmes d'accessibilité causent le plus de frustration et d'abandon.

Panier

• Tableau accessible — Structurez le panier avec un tableau HTML sémantique (en-têtes <th>, scope approprié) ou avec des listes si le format est plus simple.
• Modification de quantité — Les boutons + et - doivent avoir des labels explicites : aria-label="Augmenter la quantité de Nike Air Zoom".
• Suppression — Le bouton de suppression doit identifier le produit concerné : aria-label="Supprimer Nike Air Zoom du panier".
• Récapitulatif — Le total et les frais de livraison doivent être clairement identifiés et mis à jour en temps réel avec aria-live.

Étapes du tunnel

Indiquez clairement à l'utilisateur où il se trouve dans le processus d'achat :

<nav aria-label="Étapes de la commande">
  <ol>
    <li aria-current="step">
      <span>1. Panier</span>
    </li>
    <li>
      <span>2. Livraison</span>
    </li>
    <li>
      <span>3. Paiement</span>
    </li>
    <li>
      <span>4. Confirmation</span>
    </li>
  </ol>
</nav>

Formulaires de livraison et facturation

Les formulaires d'adresse sont parmi les plus complexes du e-commerce. Appliquez rigoureusement les règles d'accessibilité des formulaires :

• Labels explicites — Chaque champ doit avoir un label visible et associé par for/id.
• Autocomplétion — Utilisez les attributs autocomplete appropriés (given-name, family-name, street-address, postal-code, country).
• Champs obligatoires — Identifiez-les avec aria-required="true" et un indicateur visuel (pas uniquement un astérisque rouge).
• Messages d'erreur — Liez chaque erreur au champ concerné avec aria-describedby et assurez-vous que l'erreur est annoncée immédiatement.
• Format attendu — Indiquez le format attendu pour le téléphone, le code postal, etc.

Page de paiement

La page de paiement nécessite une attention particulière car elle manipule des données sensibles :

• Formulaire de carte bancaire — Labels clairs pour le numéro de carte, la date d'expiration et le CVV. Utilisez autocomplete="cc-number", autocomplete="cc-exp", autocomplete="cc-csc".
• Iframes de paiement — Si vous utilisez des iframes (Stripe Elements, PayPal), vérifiez qu'elles ont un attribut title descriptif et que la navigation au clavier fonctionne entre l'iframe et votre page.
• 3D Secure — Les fenêtres de validation bancaire doivent être accessibles. Vous avez peu de contrôle sur ces interfaces tierces, mais vérifiez que le focus est correctement géré lors de l'ouverture et de la fermeture de la fenêtre.
• Confirmation de commande — La page de confirmation doit clairement annoncer que la commande a été validée, avec un récapitulatif accessible.

Gestion des erreurs dans le tunnel

La gestion des erreurs est un point critique pour l'accessibilité e-commerce. Un utilisateur qui ne comprend pas pourquoi sa commande échoue abandonne son panier.

<!-- BON : message d'erreur global en haut du formulaire -->
<div role="alert" aria-live="assertive">
  <h2>3 erreurs ont été détectées dans le formulaire</h2>
  <ul>
    <li><a href="#champ-email">L'adresse email est invalide</a></li>
    <li><a href="#champ-cp">Le code postal est obligatoire</a></li>
    <li><a href="#champ-tel">Le numéro de téléphone doit contenir 10 chiffres</a></li>
  </ul>
</div>

<!-- BON : erreur associée au champ -->
<label for="champ-email">Adresse email *</label>
<input
  id="champ-email"
  type="email"
  aria-required="true"
  aria-invalid="true"
  aria-describedby="erreur-email"
/>
<p id="erreur-email" class="erreur">
  L'adresse email saisie est invalide. Exemple : nom@domaine.fr
</p>

Composants e-commerce spécifiques

Carrousel de produits

• Proposez des boutons de navigation (précédent/suivant) accessibles au clavier.
• Stoppez le défilement automatique lorsque l'utilisateur interagit avec le carrousel.
• Ajoutez un bouton pause/lecture si le carrousel défile automatiquement.
• Indiquez la position actuelle : aria-label="Produit 2 sur 8".

Système de notation

<!-- BON : notation accessible -->
<div role="img" aria-label="Note : 4 étoiles sur 5">
  <span aria-hidden="true">★★★★☆</span>
</div>

<!-- BON : formulaire de notation accessible -->
<fieldset>
  <legend>Donnez votre note</legend>
  <label><input type="radio" name="note" value="1" /> 1 étoile</label>
  <label><input type="radio" name="note" value="2" /> 2 étoiles</label>
  <label><input type="radio" name="note" value="3" /> 3 étoiles</label>
  <label><input type="radio" name="note" value="4" /> 4 étoiles</label>
  <label><input type="radio" name="note" value="5" /> 5 étoiles</label>
</fieldset>

Promotions et urgence

• Compte à rebours — Si vous utilisez un timer pour les promotions, proposez une alternative textuelle et permettez à l'utilisateur de l'arrêter ou de le masquer.
• Messages de stock limité — « Plus que 2 en stock » doit être accessible mais ne pas être annoncé de manière intrusive par les lecteurs d'écran. Utilisez aria-live="polite".
• Badges promotionnels — Les badges « -30% », « Nouveau », « Bestseller » doivent avoir un texte accessible, pas uniquement une image.

Checklist e-commerce RGAA

European Accessibility Act et e-commerce

Depuis le 28 juin 2025, l'European Accessibility Act (directive 2019/882) impose des exigences d'accessibilité aux services de commerce électronique dans toute l'Union européenne. Les sanctions pour non-conformité peuvent atteindre 50 000 euros par an et par site.

Les principales exigences pour les sites e-commerce incluent :

• Accessibilité complète du parcours d'achat, de la recherche de produit à la confirmation de commande.
• Accessibilité des services associés : service client, gestion de compte, suivi de commande, retours.
• Publication d'une déclaration d'accessibilité conforme.
• Mise en place d'un canal de signalement des problèmes d'accessibilité.

Conseil : Commencez par tester votre tunnel de commande avec RGAA Test pour identifier les problèmes les plus critiques. Les pages de panier, de formulaire et de paiement sont les plus susceptibles de bloquer un achat pour les utilisateurs en situation de handicap.