L'accessibilité d'une boutique WooCommerce en 10 points

WooCommerce est lui-même conçu en pensant à l'accessibilité, mais une boutique, c'est plus que WooCommerce : un thème, un constructeur de pages, des extensions et des centaines de produits. Voici les dix problèmes que nous trouvons le plus souvent, de la photo produit au paiement, avec le critère RGAA que chacun enfreint et la façon de le corriger.

1. Des photos produits sans alternative textuelle

Un client aveugle entend « image », et rien d'autre. Rédigez une alternative pour chaque photo qui porte une information : à quoi ressemble le produit, sous cet angle (RGAA 1.1). Définissez-la dans la médiathèque et vérifiez les images déjà placées dans les descriptions, qui gardent leur ancienne alternative. Voir notre guide des alternatives pour les images produits.

2. Pas de zone principale, pas de lien d'évitement qui fonctionne

Les utilisateurs de lecteurs d'écran et du clavier rejoignent le contenu grâce aux zones de la page (<main>, <nav>) et à un lien « Aller au contenu » (RGAA 12.6, 12.7). Sur notre propre boutique de test, construite avec un thème répandu et un constructeur de pages, 35 pages sur 55 avaient l'un de ces défauts ou les deux : pas de zone <main>, ou un lien d'évitement qui visait une ancre absente.

3. Un focus clavier invisible

Un thème qui supprime le contour de focus (outline: none) laisse les utilisateurs du clavier deviner où ils se trouvent (RGAA 10.7). Gardez un style de focus visible sur chaque lien, bouton et champ.

4. Des prix et des boutons au contraste trop faible

Prix en gris clair, étiquettes « promo » pâles, texte blanc sur boutons pastel : c'est fréquent. Le texte doit avoir un contraste d'au moins 4,5:1 avec son fond, 3:1 pour un grand texte (RGAA 3.2).

5. Des icônes sans intitulé

Le cœur de la liste d'envies, l'icône du panier, la loupe de recherche, les liens vers les réseaux sociaux : un lien ou un bouton fait d'une seule icône est annoncé « lien » ou « bouton » (RGAA 6.2, 11.9). Donnez à chacun un texte, même masqué visuellement, ou un aria-label.

6. Des champs de commande sans étiquette ni remplissage automatique

Un champ dont la seule étiquette est un texte indicatif (placeholder) la perd dès que le client tape (RGAA 11.1). Les champs nom, adresse, e-mail et téléphone doivent aussi déclarer leur nature avec autocomplete, pour que navigateurs et outils d'assistance puissent les remplir (RGAA 11.13).

7. Des champs obligatoires signalés par une seule étoile

« Obligatoire » doit être annoncé, pas seulement affiché par un astérisque rouge : utilisez l'attribut required et dites ce que signifie l'astérisque (RGAA 11.10).

8. Des messages de la boutique que personne n'entend

« Ajouté à votre panier », « Code promo appliqué », « Saisissez un code postal valide » : ces messages s'affichent, mais un lecteur d'écran ne les lit que s'ils sont marqués comme messages de statut (role="status", ou role="alert" pour une erreur) (RGAA 7.5).

9. La mauvaise langue de page

Une boutique multilingue qui déclare lang="fr-FR" sur ses fiches en anglais fait lire l'anglais avec un accent français aux lecteurs d'écran (RGAA 8.3, 8.4). C'est exactement ce que nous avons trouvé sur notre boutique de test : chaque page doit déclarer la langue de son propre contenu.

10. Un seul moyen de trouver une page

Si le menu est le seul chemin vers une page, les clients qui ne peuvent pas l'utiliser sont bloqués. Proposez un second moyen : un formulaire de recherche ou un plan du site accessible depuis chaque page (RGAA 12.1). Sur notre boutique de test, il manquait sur les 55 pages.

Par où commencer

Les points 2, 3 et 9 viennent du thème : corrigez-les une fois et toutes les pages en profitent. Les points 1 et 5 dépendent de votre contenu et de vos produits. Les points 6 à 8 concernent le tunnel de commande, où un client perdu est une vente perdue. Relyo vérifie les dix points sur chaque page et applique à l'affichage les corrections qui ne demandent aucune supposition — lien « Aller au contenu », focus visible, langue de la page, remplissage automatique, messages de la boutique annoncés.