Accessibilité du compte client / espace personnel : commandes, adresses, abonnements
En bref — « mon compte » doit se parcourir au clavier et au lecteur d'écran
L'espace client — « mon compte », « mon espace » — est l'écran le plus utilisé après l'achat : on y suit ses commandes, on y modifie une adresse, on y gère un abonnement ou ses préférences. C'est aussi l'un des écrans les moins testés, souvent caché derrière la connexion. L'European Accessibility Act (norme EN 301 549 / WCAG 2.1 AA), applicable au commerce électronique depuis le 28 juin 2025, impose notamment :
- Un tableau de bord structuré — des sections clairement titrées (« Mes commandes », « Mes adresses ») et des repères pour s'y retrouver (1.3.1 / 2.4.6, niveaux A et AA) ;
- Un historique de commandes en vrai tableau — données reliées à leurs en-têtes, statut jamais exprimé par la seule couleur (1.3.1 / 1.4.1, niveau A) ;
- Un suivi et des changements annoncés — « Adresse enregistrée », « Abonnement annulé » communiqués au lecteur d'écran via une région live (4.1.3, niveau AA) ;
- Des actions sensibles vérifiables — supprimer un compte, annuler un abonnement : une confirmation réversible avant l'action (3.3.4, niveau AA).
Comme pour la fiche produit, le panier et la page liste, tout relève ici du socle de niveau A et AA : aucun critère AAA « de confort » en jeu. Ces règles sont exigées — et un espace client inutilisable bloque le service après-vente, que la loi vise au même titre que l'achat.
L'achat n'est pas la fin du parcours : ensuite, le client revient suivre sa livraison, télécharger une facture, changer une adresse, mettre en pause un abonnement. Tout cela se passe dans l'espace personnel, un tableau de bord souvent riche — onglets, tableaux, formulaires d'édition, boutons d'action. C'est précisément parce qu'il est dense et peu visité qu'il accumule les défauts d'accessibilité. Or l'EAA ne couvre pas seulement la vente : elle vise le service dans son ensemble, suivi de commande compris. Voici les six familles de règles WCAG à appliquer dans l'espace client, ce que l'EAA exige précisément, et comment le vérifier. Cette page traite du tableau de bord après connexion ; pour le formulaire de connexion et la création de compte eux-mêmes, voyez le guide dédié aux formulaires de compte.
Pourquoi l'espace client est un angle mort
Deux raisons rendent l'espace personnel particulièrement risqué. D'abord, il est caché derrière la connexion : un audit rapide ou un scanner automatique qui n'a pas de compte ne le voit jamais. Il échappe ainsi à la plupart des contrôles, et ses défauts passent inaperçus jusqu'à ce qu'un client réel se plaigne. Ensuite, c'est l'écran le plus composite d'une boutique : il cumule un menu de navigation interne, un ou plusieurs tableaux (commandes, factures), des formulaires d'édition (adresse, mot de passe), et des actions à conséquence (annuler, supprimer). Chacun de ces composants a ses règles ; mal assemblés, ils forment un labyrinthe au clavier.
Surtout, l'enjeu n'est pas que de confort. Le suivi de commande, la gestion d'un abonnement, la consultation d'une facture relèvent du service après-vente que l'EAA considère comme partie intégrante du commerce électronique. Un client qui peut acheter mais pas suivre sa livraison ni résilier son abonnement n'a pas un service accessible. L'EAA s'appuie sur l'EN 301 549, fondée sur les WCAG 2.1 niveau AA ; les critères mobilisés dans un espace client sont des fondations : 1.3.1 (information et relations), 1.4.1 (utilisation de la couleur), 2.1.1 (clavier), 2.4.3 (ordre de focus), 2.4.4 (fonction des liens), 2.4.6 (en-têtes et étiquettes), 3.3.4 (prévention des erreurs), 4.1.2 (nom, rôle, valeur) et 4.1.3 (messages d'état).
Les 6 règles pour un espace client accessible
Des sections clairement nommées, pas une grille de tuiles muettes
Dès l'arrivée dans « mon compte », la personne doit comprendre ce qui est disponible et où. Chaque section porte un titre explicite dans la hiérarchie (<h2> « Mes commandes », « Mes adresses », « Mes abonnements »), et la navigation interne du compte est un repère (<nav aria-label="Mon compte">). Ainsi un lecteur d'écran peut lister les titres et sauter directement à la bonne section. Les tuiles ou cartes du tableau de bord doivent être de vrais liens nommés, pas des blocs cliquables sans intitulé (critères 1.3.1, 2.4.6).
<h2> clair ; le menu du compte est un <nav aria-label="Mon compte"> avec des liens nommés.→ Voir aussi la structure des titres et repères.
Des données reliées à leurs en-têtes, un lien de détail explicite
La liste des commandes (date, numéro, montant, statut, action) est un tableau de données : il doit être balisé comme tel, avec des en-têtes de colonnes (<th scope="col">) et une légende (<caption>). Le lecteur d'écran annonce alors « Montant, 59 € » au lieu d'un chiffre isolé. Le lien vers le détail d'une commande doit être explicite : « Voir la commande n°1042 » plutôt que « Détails » répété sur chaque ligne. Une mise en page en <div> qui ressemble à un tableau sans en avoir la sémantique prive le lecteur d'écran de tout repère (critères 1.3.1, 2.4.4).
<table> avec <th scope="col">Statut</th> et un lien « Voir la commande n°1042 » par ligne.<div> alignées par CSS, avec un lien « Détails » identique sur chaque commande.→ Voir aussi les tableaux de données accessibles et les libellés de liens.
« Expédiée », « Livrée », « Annulée » écrits en toutes lettres
Le statut d'une commande est souvent affiché par une pastille colorée : vert pour livrée, orange pour en cours, rouge pour annulée. Si l'information ne tient qu'à la couleur, elle disparaît pour une partie des visiteurs. Chaque statut doit être écrit en texte (« Expédiée le 12 juin », « Livrée », « Annulée »), la pastille n'étant qu'un renfort visuel. Si le suivi se met à jour en direct sur la page (passage de « Préparation » à « Expédiée » sans rechargement), le changement doit être annoncé via une région live (role="status"). Le contraste du texte de statut doit rester suffisant, pastille comprise (critères 1.4.1, 1.3.1 ; 4.1.3 pour les mises à jour).
Statut : Expédiée le 12 juin » en texte ; une mise à jour en direct passe par role="status".→ Voir aussi l'usage de la couleur.
Naviguer entre « Commandes », « Adresses », « Abonnements » sans souris
Beaucoup d'espaces clients organisent les sections en onglets ou en accordéons. Ces motifs doivent être atteignables et activables au clavier, et exposer leur état : un onglet sélectionné porte aria-selected="true", un accordéon ouvert aria-expanded="true". Quand on change de section, le focus doit suivre logiquement (rester sur l'onglet, ou aller au panneau affiché), pas se perdre en haut de page. Le plus sûr reste d'utiliser le motif attendu (le composant « onglets » de l'ARIA) ou, plus simple encore, de vraies pages liées. Une rangée d'onglets faite de <div> au gestionnaire de clic est invisible au clavier (critères 4.1.2, 2.1.1, 2.4.3).
role="tab"/aria-selected navigables aux flèches, ou de simples liens vers /compte/commandes, /compte/adresses.<div onclick> non focusables, dont l'onglet actif n'est signalé que par une couleur.→ Voir aussi les composants interactifs (onglets, accordéons).
Adresse, mot de passe, préférences : un formulaire clair et un retour audible
Éditer une adresse, changer un mot de passe, mettre à jour ses préférences : ce sont des formulaires, soumis aux mêmes règles que le reste du site. Chaque champ a une étiquette visible reliée (<label for>), les erreurs sont identifiées en texte et reliées au champ, une suggestion de correction est donnée quand c'est possible. Surtout, le résultat de l'enregistrement doit être communiqué : un message « Adresse enregistrée » visible et annoncé via une région live, pas un simple surlignage vert qui s'efface. Sans cela, une personne au lecteur d'écran ne sait pas si sa modification a été prise en compte (critères 3.3.1, 3.3.2, 3.3.3, 4.1.3).
<label for="adresse">, erreurs reliées au champ, et « Adresse enregistrée » dans une région role="status".→ Voir aussi les messages d'erreur et régions live et les formulaires de compte.
Annuler un abonnement, supprimer un compte : une confirmation réversible
L'espace client contient des actions à conséquence : résilier un abonnement, supprimer une adresse, fermer le compte, retirer un moyen de paiement. Pour ces actions, le critère 3.3.4 (Prévention des erreurs, niveau AA) demande qu'elles soient réversibles, vérifiées ou confirmées : une étape de confirmation claire avant l'exécution, ou une possibilité d'annuler. Le bouton qui la déclenche doit être explicitement nommé (« Résilier mon abonnement », pas une icône poubelle muette), et le résultat annoncé (« Abonnement résilié »). Si la confirmation s'ouvre dans une fenêtre modale, celle-ci doit recevoir et piéger le focus, et se fermer avec Échap (critères 3.3.4, 4.1.2, 2.4.4).
→ Voir aussi les fenêtres modales et les boutons icône.
Récapitulatif : dans l'espace client aussi, tout est du socle
| Point à vérifier | Niveau | Statut EAA |
|---|---|---|
| Tableau de bord structuré : titres de sections, repères — 1.3.1 / 2.4.6 | A · AA | Exigé |
| Historique de commandes en vrai tableau, lien de détail explicite — 1.3.1 / 2.4.4 | A | Exigé |
| Statut de commande en texte, pas par la seule couleur — 1.4.1 / 1.3.1 | A | Exigé |
| Onglets / accordéons de sections au clavier, état exposé — 4.1.2 / 2.1.1 | A | Exigé |
| Édition d'adresse / mot de passe : champs étiquetés, sauvegarde annoncée — 3.3.1 / 4.1.3 | A · AA | Exigé |
| Actions sensibles (résilier, supprimer) confirmées et réversibles — 3.3.4 | AA | Exigé |
<div> en tableau de données sémantique, ni écrire le statut d'une commande qui n'existe qu'en couleur, ni rendre vos onglets navigables au clavier, ni annoncer qu'une adresse a été enregistrée — ce sont des choix de structure et de balisage. Rappel : la FTC américaine a sanctionné un éditeur d'overlay d'un million de dollars pour des allégations de conformité trompeuses. Voir pourquoi les overlays ne suffisent pas.Comment vérifier votre espace client
Quelques contrôles concrets à mener une fois connecté à un compte de test :
- Parcourez le tableau de bord au clavier seul : peut-on atteindre chaque section et chaque action avec un focus visible, sans souris ?
- Écoutez l'historique de commandes au lecteur d'écran : annonce-t-il les en-têtes (« Statut, Expédiée ») ? les liens de détail portent-ils le numéro de commande ?
- Coupez la couleur (niveaux de gris) : les statuts de commande restent-ils compréhensibles ?
- Modifiez une adresse : la sauvegarde est-elle annoncée (« Adresse enregistrée »), ou seulement signalée par une couleur ?
- Déclenchez une action sensible (résilier, supprimer) : y a-t-il une confirmation claire, le bouton est-il nommé, le résultat est-il annoncé ?
Une partie de ces points se prête à la détection automatique : un scanner repère un champ sans étiquette, un bouton icône sans nom, un tableau sans en-têtes, un contraste insuffisant sur une pastille de statut. En revanche, savoir si la sauvegarde d'une adresse est annoncée, si le suivi de commande se met à jour de façon audible, ou si une résiliation est correctement confirmée demande un essai réel au clavier et au lecteur d'écran — d'autant que l'espace client est derrière la connexion. Notre rapport signale les manquements détectables sur la page analysée et liste les vérifications manuelles à mener.
→ Méthode complète : comment tester l'accessibilité de son site. Voir aussi par où commencer.
Vérifiez l'accessibilité de votre boutique gratuitement
DeclareAccess analyse une page de votre site avec le moteur axe-core selon les WCAG 2.1 AA, repère les manquements (champs sans étiquette, boutons sans nom, tableaux sans en-têtes, contraste…) et génère la déclaration d'accessibilité prête à publier — modèle français (RGAA), allemand (BFSG), italien ou espagnol. Gratuit, sans carte bancaire.
Rapport WCAG par e-mail sous 24 h ouvrées.
C'est noté. Votre client e-mail va s'ouvrir avec la demande pré-remplie — il vous suffit de l'envoyer.
Questions fréquentes
L'EAA s'applique-t-elle à l'espace client, ou seulement à l'achat ?
L'EAA vise le service de commerce électronique dans son ensemble, ce qui inclut le service après-vente : suivi de commande, gestion d'un abonnement, consultation et téléchargement de factures, modification des informations. Un site où l'on peut acheter mais pas suivre sa livraison ni résilier son abonnement n'offre pas un service accessible. La référence reste l'EN 301 549 / WCAG 2.1 niveau AA, appliquée depuis le 28 juin 2025.
Mon historique de commandes doit-il vraiment être un tableau HTML ?
Quand il s'agit de données tabulaires (date, numéro, montant, statut), oui : un vrai <table> avec des en-têtes (<th scope="col">) permet au lecteur d'écran d'annoncer chaque cellule avec son en-tête (« Montant, 59 € »). Une mise en page en <div> qui imite visuellement un tableau prive de ce repère. C'est le critère 1.3.1 (Information et relations, niveau A). Voir le guide des tableaux de données accessibles.
Comment afficher le statut d'une commande de façon accessible ?
Jamais par la seule couleur. Une pastille verte ou rouge peut renforcer l'information, mais le statut doit être écrit en toutes lettres (« Expédiée », « Livrée », « Annulée »). Si le statut se met à jour en direct sur la page, le changement doit être annoncé via une région live (role="status"). Ce sont les critères 1.4.1 (Utilisation de la couleur, niveau A) et 4.1.3 (Messages d'état, niveau AA).
Faut-il une confirmation avant de supprimer un compte ou résilier un abonnement ?
Oui. Le critère 3.3.4 (Prévention des erreurs, niveau AA) demande que les actions à conséquence soient réversibles, vérifiées ou confirmées : une étape de confirmation claire avant l'exécution, ou une possibilité d'annuler. Le bouton qui la déclenche doit être explicitement nommé (« Résilier mon abonnement »), et le résultat annoncé. Si la confirmation s'ouvre en fenêtre modale, celle-ci doit gérer le focus et se fermer avec Échap.
Un scanner automatique peut-il tester mon espace client ?
En partie seulement, et à condition de pouvoir s'y connecter. Un scanner repère bien un champ sans étiquette, un bouton icône sans nom, un tableau sans en-têtes ou un contraste insuffisant. Mais il ne sait pas si la sauvegarde d'une adresse est annoncée, si le suivi se met à jour de façon audible, ou si une résiliation est correctement confirmée : ces points demandent un essai manuel au clavier et au lecteur d'écran. C'est justement parce que l'espace client est caché derrière la connexion qu'il échappe souvent aux audits.