WCAG 2.2 pour e-commerce : 6 points à vérifier au checkout

WCAG 2.2 est la version actuelle des règles pour l'accessibilité des contenus web, et elle devient la référence des boutiques en ligne en Europe : la version 4.1.1 de la norme harmonisée EN 301 549, publiée par l'ETSI en septembre 2026, renvoie à WCAG 2.2 niveau AA au lieu de 2.1. Bonne nouvelle : les nouvelles exigences sont concrètes, et la plupart touchent les pages qui font votre chiffre d'affaires, c'est-à-dire les fiches produits, le panier et le tunnel de commande.

Si vous partez de zéro, commencez par les bases de l'accessibilité. Les six points ci-dessous sont ce que WCAG 2.2 ajoute aux niveaux A et AA.

1. Des zones tactiles d'au moins 24 × 24 pixels (2.5.8)

Boutons de quantité, pastilles de couleur, croix « supprimer » du panier, flèches de pagination : ces éléments sont souvent minuscules. WCAG 2.2 demande des cibles d'au moins 24 × 24 pixels CSS, ou assez d'espace libre autour d'une cible plus petite pour qu'un cercle de 24 pixels centré dessus ne touche pas une autre cible. Les liens au milieu d'une phrase sont exemptés.

.qty-button, .swatch, .cart-remove {
  min-width: 24px;
  min-height: 24px;
}

2. Un focus qui n'est pas caché par un bandeau (2.4.11)

Un en-tête fixe, un bandeau cookies ou une barre « livraison offerte » peut recouvrir le champ ou le bouton qu'un utilisateur au clavier vient d'atteindre. Quand un élément reçoit le focus, il ne doit pas être entièrement masqué par un contenu que vous avez ajouté. Un scroll-padding-top égal à la hauteur de l'en-tête suffit souvent :

html { scroll-padding-top: 80px; }

3. Une alternative au glisser-déposer (2.5.7)

Curseurs de prix, comparateurs avant/après et listes à réordonner par glissement doivent aussi fonctionner d'un simple clic ou d'un tap. Pour un filtre de prix, deux champs numériques (min et max) à côté du curseur règlent le problème.

4. L'aide toujours au même endroit (3.2.6)

Si vous proposez de l'aide (lien contact, numéro de téléphone, bouton de chat, FAQ), placez-la au même endroit relatif d'une page à l'autre, pour qu'un client qui en a besoin pendant la commande la retrouve là où il l'a vue sur la fiche produit.

5. Ne pas demander deux fois la même chose (3.3.7)

Une information déjà saisie dans le même parcours doit être préremplie ou proposée en choix. Le cas classique est l'adresse de facturation : proposez une case « identique à l'adresse de livraison » plutôt qu'un second formulaire vide. Des exceptions existent pour la sécurité, comme la confirmation d'un mot de passe.

6. Une connexion sans test de mémoire (3.3.8)

La connexion et la création de compte ne doivent pas reposer sur un test cognitif, comme retenir un mot de passe avec le collage bloqué ou résoudre une énigme, sauf s'il existe une alternative. Concrètement : autorisez le collage et les gestionnaires de mots de passe (autocomplete="current-password"), et proposez un lien par e-mail ou des clés d'accès quand c'est possible. Les CAPTCHA de reconnaissance d'objets restent admis à ce niveau, mais pas ceux qui demandent de recopier un texte.

Ce qui change aussi

WCAG 2.2 supprime le critère 4.1.1 Analyse syntaxique, jugé obsolète, et ajoute trois critères de niveau AAA, facultatifs pour la plupart des boutiques. Tout ce que demande WCAG 2.1 reste valable : ces six points viennent en plus. Pour le cadre légal et les exemptions, consultez notre guide sur l'European Accessibility Act pour les boutiques en ligne.

Comment Averifly vous aide

Les règles d'accessibilité d'Averifly vérifient ce qui se lit dans le HTML de vos pages : images sans texte alternatif, champs de formulaire sans libellé, liens vides ou trop vagues, attribut lang manquant et absence de zone principale. Les points WCAG 2.2 ci-dessus demandent un test manuel au clavier et sur mobile. Commencez par un scan gratuit pour régler les problèmes HTML, et retrouvez la liste complète dans nos règles.