Critères WCAG 2.2, règles et vérifications manuelles

Repérez les médias préenregistrés uniquement audio (podcast, extrait sonore) et uniquement vidéo (clip produit muet, animation sans son). Réussi : une transcription textuelle ou une alternative équivalente, textuelle ou audio, est proposée par un lien placé juste à côté de chacun. Non applicable si la boutique n’a pas de tels médias.

Lancez chaque vidéo préenregistrée qui contient de la parole (démonstrations de produits, films de marque, vidéos YouTube/Vimeo intégrées). Réussi : des sous-titres sont disponibles via un bouton CC, un élément <track kind="captions"> ou des sous-titres incrustés, et ils sont exacts. Les sous-titres générés automatiquement et non relus ne suffisent pas.

Pour chaque vidéo préenregistrée dont les images portent des informations absentes de la bande son (texte à l’écran, manipulation du produit, étapes montrées mais pas énoncées). Réussi : une version audiodécrite ou une alternative textuelle complète (une transcription qui décrit les images) est fournie.

Uniquement pour les vidéos en direct avec son (ventes en direct, lancements diffusés en direct). Réussi : des sous-titres en temps réel sont fournis pendant la diffusion. Non applicable pour les boutiques sans vidéo en direct.

Pour les vidéos préenregistrées dont les images porteuses d’information ne sont pas couvertes par la bande son. Réussi : une piste d’audiodescription ou une version audiodécrite de la vidéo existe. Une alternative textuelle seule satisfait le critère 1.2.3, mais pas celui-ci.

Lisez la page de haut en bas avec le lecteur d’écran (touches fléchées / mode navigation) et comparez avec l’ordre visuel. Réussi : le titre du produit, le prix, les options de variante et l’ajout au panier arrivent dans un ordre logique ; les grilles réordonnées en CSS, les barres latérales et les méga-menus ne perturbent pas l’ordre de lecture. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Cherchez dans les instructions et les indications les références qui reposent uniquement sur la forme, la couleur, la taille, la position ou le son : « cliquez sur le bouton vert », « le champ de droite », « voir l’encadré ci-dessous », « attendez le bip ». Réussi : chacune de ces instructions nomme aussi l’élément ou donne un repère textuel.

Sur un téléphone ou une tablette (ou avec l’émulation d’appareil des outils de développement), ouvrez la page d’accueil, une fiche produit, le panier et la première étape du tunnel de commande, et basculez entre portrait et paysage sur chacune. Réussi : le contenu et les éléments interactifs restent disponibles et utilisables dans les deux orientations, et rien ne demande au visiteur de tourner son appareil. Seul un contenu qui a besoin d’une orientation précise pour fonctionner peut la verrouiller, ce qui est rare dans une boutique.

Vérifiez chaque endroit où la couleur porte un sens : pastille de la variante sélectionnée (il faut une bordure, une coche ou du texte, pas seulement un changement de couleur), erreurs de formulaire (icône ou texte, pas seulement une bordure rouge), liens dans le corps du texte (soulignement, ou contraste de 3:1 plus un indice au survol et au focus), indicateurs de stock (un point vert ou rouge a besoin d’un texte). Réussi : chaque information est aussi transmise sans la couleur.

Zoomez à 400 % et examinez les grandes bannières, les badges promotionnels, les visuels « Soldes » et les vignettes de catégories. Tout texte qui devient flou est une image de texte. Réussi : le texte est un vrai texte (logos et marques exceptés) ou l’image est essentielle (par exemple une étiquette imprimée montrée sur une photo de produit). Si la boutique génère des factures ou des reçus PDF, ouvrez-en un : il doit être au format texte (le texte peut être sélectionné), et non une image numérisée.

Zoomez à 400 % (Ctrl et + jusqu’à 400 %, ou une fenêtre d’environ 320 px de large dans les outils de développement). Réussi : aucun défilement horizontal n’est nécessaire pour lire le contenu (les tableaux de données font exception) ; le menu, les prix et l’ajout au panier restent présents et utilisables ; rien ne se chevauche ni ne disparaît ; les étiquettes de formulaire restent rattachées à leurs champs. La vérification automatique vs-reflow ne détecte que le défilement horizontal.

Déclenchez chaque fenêtre contextuelle qui s’affiche au survol ou au focus : infobulles, méga-menus, guides des tailles, aperçus du mini-panier, aperçus rapides de produits. Réussi : elle peut être fermée avec Esc sans déplacer le pointeur, le pointeur peut être déplacé sur la fenêtre sans qu’elle se ferme, et elle reste ouverte jusqu’à ce qu’elle soit fermée ou que le survol ou le focus la quitte.

Débranchez ou ignorez la souris ; utilisez uniquement Tab, Shift+Tab, Enter, Espace, les flèches et Esc. Parcourez la page d’accueil avec Tab de haut en bas. Ouvrez et fermez chaque menu, menu burger et liste déroulante (Enter ou Espace ouvre, Esc ferme). Ouvrez une fiche produit, choisissez une variante (taille ou couleur) et ajoutez-la au panier. Ouvrez le panier, modifiez une quantité et supprimez un article. Réussi : tout est atteignable et utilisable, et vous savez toujours où vous vous trouvez.

Ouvrez chaque fenêtre modale et chaque pop-up (newsletter, bandeau cookies, guide des tailles, aperçu rapide, connexion). Réussi : le focus entre dans la fenêtre, Esc la ferme et le focus revient là où vous étiez. Échec d’office si vous pouvez atteindre avec Tab la page située derrière la fenêtre modale. Pour le bandeau cookies lui-même : le refus et l’acceptation sont tous deux atteignables et utilisables au seul clavier, et rien ne vous y enferme.

Avec le focus sur le corps de la page (pas dans un champ), appuyez sur des lettres et des signes de ponctuation isolés, comme /, s, k, ?. Réussi : aucun raccourci à caractère unique n’est actif ; ou il peut être désactivé ou réattribué ; ou il ne fonctionne que lorsque l’élément concerné a le focus.

Observez pendant 10 secondes chaque vidéo en lecture automatique, bannière animée, GIF, compte à rebours et effet de survol. Réussi : rien ne clignote plus de trois fois par seconde et aucune grande surface ne produit d’effet stroboscopique. Vérifiez aussi que tout carrousel à défilement automatique peut être mis en pause.

Pendant le parcours au clavier, observez où va le focus. Réussi : l’ordre de tabulation suit la mise en page visuelle ; après la fermeture d’un menu ou d’une fenêtre modale, le focus revient sur l’élément déclencheur ; après une mise à jour du panier, une recherche instantanée ou un changement de carrousel, le focus reste là où vous l’avez placé et ne saute pas en haut de la page.

Vérifiez qu’il existe au moins deux moyens d’atteindre chaque page : la recherche du site, en plus du menu de navigation, d’un plan du site, d’un fil d’Ariane ou de liens vers des produits associés. Lancez une recherche et ouvrez un résultat. Réussi : deux parcours indépendants fonctionnent. Les pages qui sont des étapes d’un processus (tunnel de commande) font exception.

Lisez la liste des titres (touche H du lecteur d’écran ou plan du document dans le navigateur) et les étiquettes des formulaires. Réussi : les titres décrivent leur section (le h1 de la fiche produit est le nom du produit, les titres des pages de catégorie nomment la catégorie, pas de « Section 1 » ni de texte provisoire) et les étiquettes décrivent la fonction du champ (« Adresse e-mail », et non « Champ » ou « Saisir »). Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Refaites le parcours au clavier en cherchant l’indicateur de focus. Réussi : chaque élément qui a le focus affiche un indicateur visible (contour, anneau, soulignement ou net changement de couleur), si bien que vous pouvez toujours montrer l’écran et dire « le focus est là » sans hésiter, et l’indicateur se distingue encore de son arrière-plan quand vous plissez les yeux. La vérification automatique vs-focus-visible ne peut pas juger à quel point le changement est visible.

Repérez les gestes à plusieurs points de contact ou basés sur un tracé : pincer pour zoomer sur les images de produits, balayer les carrousels, balayer pour supprimer dans le panier, faire glisser pour parcourir une galerie. Réussi : chacun dispose d’une alternative à pointeur unique (boutons de zoom, boutons suivant et précédent, bouton de suppression).

Enfoncez le bouton de la souris sur des éléments du type « Ajouter au panier », « Supprimer » et « Passer la commande », éloignez le pointeur de l’élément, puis relâchez. Réussi : rien ne se passe (les actions se déclenchent au relâchement) ou l’action peut être annulée.

Avec le lecteur d’écran, allez sur les boutons et les liens qui affichent un texte visible (« Ajouter au panier », « Commander », « Appliquer le code »). Réussi : le nom annoncé contient le texte visible ; un aria-label comme « Acheter maintenant » sur un bouton affichant « Ajouter au panier » est un échec. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Cherchez les fonctions déclenchées par le mouvement de l’appareil : secouer pour annuler, incliner pour faire pivoter un produit, aperçus en réalité augmentée pilotés par le mouvement. Réussi : un élément à l’écran permet la même action et le déclenchement par le mouvement peut être désactivé. Non applicable pour la plupart des boutiques.

Repérez les passages rédigés dans une autre langue que celle de la page : slogans ou noms de produits en anglais sur une boutique allemande ou danoise, termes anglais dans les pages juridiques, sélecteur de langue qui affiche chaque langue sous son propre nom. Réussi : ces passages portent un attribut lang (à inspecter dans les outils de développement) et, s’il existe un sélecteur de langue, le changement de langue est annoncé et fonctionne. Les noms propres et les mots d’emprunt isolés font exception.

Parcourez toute la page avec Tab, y compris les champs de recherche, les listes déroulantes et le bandeau cookies. Réussi : le simple fait de placer le focus sur un élément n’ouvre jamais de menu, n’envoie pas de formulaire, ne déplace pas le focus ailleurs et ne mène pas à une autre page.

Au clavier, modifiez les listes déroulantes, les boutons radio et les cases à cocher : variante (parcourez les options avec les flèches), pays, mode de livraison, quantité, ordre de tri. Réussi : changer une valeur n’envoie pas le formulaire et ne change pas de page sans avertissement ; si la page se met à jour, l’utilisateur en est prévenu à l’avance ou un bouton déclenche le changement. Les listes de variantes qui changent de page dès qu’on appuie sur une flèche sont un échec fréquent dans les boutiques.

Comparez la page d’accueil, une page de catégorie, une fiche produit, le panier et le tunnel de commande. Réussi : l’en-tête, la navigation principale, la recherche, le fil d’Ariane et le pied de page apparaissent dans le même ordre relatif sur chaque page (le tunnel de commande peut alléger la navigation, mais ne doit pas réordonner ce qui reste). Incluez la page 404 et une fiche produit en rupture de stock : toutes deux restent navigables et aux couleurs de la marque. La vérification automatique vs-consistent-help ne couvre que la position du lien d’aide.

Vérifiez que la même fonction porte le même libellé partout : « Ajouter au panier » ou « Mettre dans le panier », le nom de l’icône du panier, le bouton de recherche, « Liste d’envies » ou « Favoris », le lien vers le compte. Réussi : les fonctions identiques ont des noms et des icônes identiques dans tous les modèles de page.

Avec le lecteur d’écran, dans le tunnel de commande (ainsi qu’à la connexion et à l’inscription), envoyez un formulaire vide, puis un formulaire avec une adresse e-mail et un code postal non valides. Réussi : les erreurs sont annoncées dès qu’elles apparaissent, indiquent quel champ est en cause et précisent ce qui ne va pas. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Avec le lecteur d’écran, parcourez avec Tab chaque champ du tunnel de commande, d’adresse, de connexion et d’inscription à la newsletter. Réussi : chaque champ annonce son étiquette ; les champs obligatoires s’annoncent comme tels (pas seulement par la couleur ou par un astérisque non expliqué) ; les indications de format (date, code postal, téléphone) sont données avant la saisie. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Saisissez une adresse e-mail mal formée, un code postal au mauvais format et une date d’expiration de carte dépassée. Réussi : chaque message d’erreur indique comment corriger (« Saisissez un code postal comme 10115 », « L’adresse e-mail doit contenir @ »), et pas seulement « Saisie non valide », sauf si une suggestion risque de compromettre la sécurité.

Parcourez le tunnel de commande jusqu’à la dernière étape sans payer. Réussi : avant la validation de la commande, une étape récapitulative affiche les articles, les quantités, les totaux, les adresses et le moyen de paiement, tout peut être modifié, et l’action finale porte un libellé explicite (par exemple « Acheter maintenant »). Vérifiez aussi que la suppression du compte ou d’une adresse demande une confirmation.

Lecteur d’écran activé sur le parcours d’achat, en partant de la recherche du site. Réussi : le champ de recherche annonce sa fonction et les résultats sont annoncés, si bien que vous pouvez atteindre un produit ; les pastilles de variante annoncent leur nom et leur état de sélection, les sélecteurs de quantité et les accordéons annoncent leur rôle et leur état, le panier annonce son contenu, les quantités et le total dans l’ordre, et les champs de carte intégrés dans des iframes (Stripe et similaires) indiquent lequel correspond au numéro de carte, à la date d’expiration et au code de sécurité (CVC). Vous devez pouvoir acheter la bonne taille et la bonne couleur sans regarder l’écran. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.

Avec le lecteur d’écran, déclenchez des changements d’état sans déplacer le focus : « ajouté au panier », nombre d’articles du panier, nombre de résultats de recherche et de filtres, changement de prix ou de stock lors du choix d’une variante, code promo appliqué, formulaire enregistré, et enfin la confirmation de commande. Réussi : chacun est annoncé (région live) sans déplacement du focus ; le client doit savoir que son achat a abouti. La vérification automatique vs-live-updates ne couvre que la fiche produit. Lecteur d’écran : Windows : NVDA (gratuit, nvaccess.org) + Chrome. Mac : VoiceOver (Cmd+F5) + Safari.