Accessibilité d'une boutique en ligne : 6 correctifs clés

Une boutique accessible est une boutique où les personnes qui utilisent un lecteur d'écran, le clavier ou la commande vocale peuvent naviguer et acheter. Elle est aussi, le plus souvent, plus claire pour tout le monde. L'essentiel tient en quelques petits correctifs HTML : les six ci-dessous couvrent les problèmes les plus fréquents sur les pages produit et le tunnel de commande.

1. Ajoutez un texte alternatif aux images informatives

Chaque image produit qui apporte une information doit avoir un attribut alt qui la décrit, par exemple « Veste imperméable bleu marine, vue de face ». Les images purement décoratives doivent avoir un alt="" vide pour que les lecteurs d'écran les ignorent. Attention : un attribut alt absent n'est pas la même chose qu'un attribut vide. Le premier est une erreur, le second est volontaire.

2. Associez un libellé à chaque champ de formulaire

Chaque champ (input, select, textarea) a besoin d'un <label> visible qui lui est relié, ou d'un aria-label quand un libellé visible n'est pas envisageable. Le texte d'exemple (placeholder) ne suffit pas : il disparaît dès la saisie et n'est pas toujours lu par les lecteurs d'écran.

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email">

3. Donnez un texte accessible à chaque lien

Un lien qui ne contient qu'une icône (panier, réseaux sociaux) est annoncé simplement « lien » s'il n'a pas de texte. Ajoutez un texte visible, ou un aria-label qui décrit la destination : aria-label="Voir votre panier".

4. Bannissez « cliquez ici » et « en savoir plus »

Les utilisateurs de lecteurs d'écran parcourent souvent la liste des liens hors contexte. Dix liens « En savoir plus » ne servent à rien. Rédigez des intitulés qui se comprennent seuls, par exemple « Lire notre politique de livraison ».

5. Déclarez la langue de la page

Renseignez l'attribut lang sur l'élément <html>, par exemple <html lang="fr">. Les lecteurs d'écran s'en servent pour choisir la bonne prononciation. Sur une boutique multilingue, chaque version doit porter sa propre valeur.

6. Balisez le contenu principal

Placez le contenu principal de chaque page dans un élément <main>. Les utilisateurs du clavier et des lecteurs d'écran peuvent ainsi passer l'en-tête et la navigation pour aller directement aux produits ou à l'article.

Ce que ces correctifs ne couvrent pas

Ce sont les bases vérifiables depuis le HTML d'une page. Le contraste des couleurs, la visibilité du focus, la navigation uniquement au clavier et l'accessibilité des fenêtres modales demandent des tests manuels, idéalement avec un vrai lecteur d'écran. Les obligations légales d'accessibilité varient selon le pays et le secteur : renseignez-vous sur celles qui s'appliquent à vous.

Un texte alternatif et une structure de page claire aident aussi les moteurs de recherche et les assistants IA à comprendre vos pages, comme expliqué dans notre guide sur les titres et méta-descriptions des pages produit.

Comment Averifly vous aide

Les règles d'accessibilité d'Averifly vérifient les images sans texte alternatif, les champs de formulaire sans libellé, les liens sans texte ou au texte générique, l'absence d'attribut lang et l'absence de zone principale. Retrouvez-les dans nos règles, puis lancez un scan gratuit pour repérer les pages à corriger.