Les arguments pour l'accessibilité se posent d'ordinaire sur le terrain juridique ou éthique. Dans le commerce en ligne, il en existe un troisième qui porte davantage en réunion de cadrage : un tunnel qu'un client ne peut pas terminer, c'est du chiffre d'affaires que vous avez déjà payé pour acquérir et que vous lâchez à la dernière étape.
Voici les défauts qui bloquent purement et simplement un achat, à peu près dans l'ordre de leur fréquence.
1. Des champs de formulaire sans étiquette
Le motif « texte indicatif en guise d'étiquette » est encore partout, et il échoue deux fois : l'étiquette disparaît dès que le client tape, et elle n'a jamais été exposée comme étiquette à un lecteur d'écran.
Sur un formulaire de commande à douze champs, un client qui perd le fil au champ neuf ne recommence pas. Il part.
- à faireUtilisez un `<label for="…">` visible sur chaque champ. Les étiquettes flottantes conviennent tant que l'élément label est réel.
- à faireAjoutez les jetons `autocomplete` — `email`, `given-name`, `address-line1`, `postal-code`, `cc-number`. Le remplissage automatique est la plus grande réduction d'effort que vous puissiez offrir.
- à faireNe mettez jamais `autocomplete="off"` sur un tunnel de commande. Ce n'est pas une mesure de sécurité.
2. Des erreurs signalées seulement en rouge
Une bordure rouge ne communique rien à un lecteur d'écran, et peu de chose à l'homme sur douze qui a une déficience de la vision des couleurs. Si le seul signal indiquant que le numéro de carte est faux est un changement de couleur, le client reste bloqué sur une page qui a l'air correcte et n'ira pas plus loin.
- à faireMettez l'erreur en texte à côté du champ, et reliez-la avec `aria-describedby`.
- à faireMettez `aria-invalid="true"` sur le champ.
- à faireDites ce qui serait valide : « Le numéro de carte comporte 16 chiffres », pas « Invalide ».
- à faireDéplacez le focus vers la première erreur, ou vers un récapitulatif en haut du formulaire qui renvoie vers chacune.
3. Listes déroulantes et sélecteurs de date maison
Les natifs `<select>` et `<input type="date">` sont accessibles gratuitement et, sur mobile, meilleurs que presque tout ce que vous construirez. Les remplacer par une soupe de `div` est la façon la plus courante de rendre un tunnel de commande inutilisable au clavier.
Si un composant maison est réellement nécessaire — un sélecteur de pays avec recherche, par exemple — implémentez correctement le motif ARIA combobox, comportement des flèches compris, et testez-le au clavier avant de le livrer.
4. Le contraste là où il compte le plus
C'est dans les petits caractères que le contraste échoue : délais de livraison, lignes de TVA, case à cocher des conditions, total. Ce sont précisément les éléments qu'un client doit lire avant de s'engager.
L'état désactivé du bouton de paiement est un coupable à part. Grisé au point d'être illisible, il ne permet plus de savoir s'il est désactivé ou si la page est cassée.
5. Des expirations sans avertissement
Les limites de session sur un panier pénalisent quiconque est plus lent — au lecteur d'écran, en passant à une loupe d'écran, ou simplement en allant chercher une carte dans la pièce d'à côté. Avertissez avant l'expiration et proposez une prolongation en un clic.
Que faire cette semaine
Nul besoin d'un audit complet pour avancer. Analysez les quatre pages qui portent la transaction, corrigez ce qui remonte, puis parcourez-les au clavier.
- à faireAnalysez : page produit, panier, tunnel de commande, confirmation de commande.
- à faireCorrigez étiquettes, textes d'erreur et contraste — c'est l'essentiel de la liste ci-dessus.
- à faireTerminez un achat au clavier seul. Si vous n'y arrivez pas, une partie de vos clients non plus.
- à faireMettez ces quatre pages sous analyse quotidienne pour qu'une mise à jour de thème ne défasse pas tout en silence.
Questions
- L'accessibilité influence-t-elle réellement la conversion ?
- Le mécanisme est direct : un client qui ne peut pas remplir un formulaire ne termine pas l'achat. Environ une personne sur six est en situation de handicap, et les corrections ci-dessus — vraies étiquettes, remplissage automatique, messages d'erreur lisibles — réduisent mesurablement la friction pour tout le monde, pas seulement pour les utilisateurs de technologies d'assistance.
- Notre boutique est sur une plateforme hébergée. Que pouvons-nous changer ?
- Plus que vous ne le croyez. Étiquettes, textes d'erreur, contraste et jetons `autocomplete` vivent dans le thème, que vous contrôlez. Ce que vous ne pouvez souvent pas changer, c'est un tunnel de paiement tiers — auquel cas la conformité du fournisseur devient une question d'achat, qu'il vaut la peine de poser par écrit.
Continuer la lecture