Les 10 erreurs d'accessibilité les plus fréquentes dans les boutiques en ligne (et comment les corriger)

Q: Une analyse gratuite détecte-t-elle toutes ces erreurs ?

Une analyse automatisée établit de façon fiable environ 57 % des problèmes par la machine ; le reste demande une évaluation humaine. Or, ces 57 % englobent justement les erreurs ci-dessus — contraste, textes alternatifs, étiquettes, boutons, titres — donc une analyse met d'emblée en évidence la part du lion, avec la correction associée. Curieux de savoir lesquelles de ces dix erreurs figurent sur votre site ? Collez votre URL et analysez gratuitement une page en pleine profondeur — sans compte, en moins de 60 secondes.

4 juin 2026

Réponse courte. La plupart des boutiques en ligne n'échouent pas sur des centaines de points différents, mais sur la même poignée d'erreurs : un contraste de couleurs trop faible, des textes alternatifs manquants, des boutons et des liens sans nom, des champs sans étiquette, une structure de titres désordonnée et une navigation au clavier défaillante. Bonne nouvelle : c'est précisément ce qui les rend faciles à corriger — souvent à l'échelle du thème, de sorte qu'une seule correction couvre d'emblée des centaines de pages.

L'étude WebAIM Million montre que ~96 % des pages d'accueil présentent des erreurs WCAG mesurables, et celles-ci se concentrent sur les dix points ci-dessous. Vous voulez savoir lesquelles affectent VOTRE site ? En bas de page, analysez gratuitement une page.

1. Un contraste de couleurs trop faible

De loin l'erreur la plus fréquente. Du texte gris clair sur fond blanc, ou une couleur de bouton un peu trop pâle, est illisible pour les personnes malvoyantes et en plein soleil sur un téléphone. La norme exige un rapport de contraste d'au moins 4,5:1 pour le texte courant (3:1 pour le grand texte).

Solution : assombrissez ou éclaircissez la couleur du texte ou de l'arrière-plan jusqu'à obtenir le bon rapport. Dans Shopify, vous ajustez cela une seule fois dans les réglages de votre thème → couleurs, et cela s'applique aussitôt à toute votre boutique. Pour en savoir plus, voyez le contraste de couleurs : l'exigence WCAG et comment la mesurer.

2. Des images sans texte alternatif

Une photo de produit sans texte alternatif est invisible pour un lecteur d'écran — un client aveugle ne sait alors pas de quel produit il s'agit. Cela touche directement vos ventes.

Solution : donnez à chaque image informative un texte alternatif court qui décrit ce qu'elle représente. Dans Shopify : produit → médias → « modifier le texte alternatif ». Les images purement décoratives reçoivent un alt vide (alt=""). Voyez rédiger des textes alternatifs qui fonctionnent.

3. Des boutons sans nom

Un bouton qui n'affiche qu'une icône (panier, recherche, menu) est annoncé par un lecteur d'écran comme « bouton » — sans que l'utilisateur sache ce qu'il fait.

Solution : donnez au bouton un texte, ou un aria-label qui décrit l'action, par exemple aria-label="Ajouter au panier".

4. Des liens sans texte explicite

Comme pour les boutons : un lien composé uniquement d'une icône, ou des liens « en savoir plus » sans contexte, n'indiquent pas à l'utilisateur d'un lecteur d'écran où il se rend.

Solution : donnez au lien un texte visible et descriptif, ou un aria-label (« Voir le panier » au lieu d'une simple icône de panier).

5. Des champs de saisie sans étiquette

Les champs de recherche, de connexion et de paiement sans étiquette associée sont difficiles voire impossibles à utiliser avec une technologie d'assistance. Au moment du paiement justement, cela vous coûte des clients.

Solution : associez une <label> visible à chaque champ de saisie (via for/id), ou utilisez un aria-label s'il n'y a pas de place pour un texte visible.

6. Une structure de titres désordonnée

Les utilisateurs de lecteurs d'écran naviguent par les titres, comme vous le feriez avec une table des matières. Si vous passez d'un H1 à un H4, ou si vous utilisez les titres uniquement pour la mise en forme, cette structure se brise.

Solution : utilisez les titres dans un ordre logique (H1 → H2 → H3) et gérez la mise en forme avec le CSS, pas avec le niveau de titre.

7. Un attribut de langue manquant

Sans attribut de langue, un lecteur d'écran ne sait pas si votre page est en français ou en anglais, et prononce tout avec la mauvaise prononciation.

Solution : placez lang="fr" (ou la langue correcte) sur l'élément <html>. Dans Shopify, cela se trouve dans theme.liquid — généralement déjà présent, mais parfois vide.

8. Impossible à utiliser au clavier

Beaucoup de personnes n'utilisent pas de souris. Si un menu, un curseur ou une fenêtre contextuelle ne fonctionne qu'à la souris, ou si vous ne pouvez pas voir où se trouve le focus, vous excluez ces visiteurs.

Solution : assurez-vous que tout est accessible avec la touche Tab, qu'il existe un contour de focus visible, et que les fenêtres contextuelles ne « piègent » pas le focus.

9. Une utilisation incorrecte d'ARIA

Les attributs ARIA peuvent aider les technologies d'assistance — mais utilisés à tort ou de façon invalide, ils font au contraire des dégâts. Cela s'introduit souvent via des applications installées ou des composants de thème.

Solution : n'utilisez ARIA que là où c'est nécessaire et avec des valeurs valides. Si cela provient d'une application ou d'un thème, vérifiez ce composant.

10. Pas de titre de page clair

Une page sans <title> unique n'affiche aucun nom reconnaissable dans l'onglet du navigateur ni pour les lecteurs d'écran — naviguer entre les onglets relève alors de la devinette.

Solution : donnez à chaque page un titre unique et descriptif. Shopify le remplit généralement automatiquement ; vérifiez vos modèles personnalisés.

Quelle est l'erreur d'accessibilité la plus fréquente ?

Un contraste de couleurs trop faible est de loin l'erreur la plus fréquente — elle arrive en tête, et de loin, dans pratiquement toutes les études à grande échelle, parce qu'elle se glisse à votre insu dans les couleurs du thème, les libellés de boutons et les étiquettes de prix. C'est en même temps l'une des erreurs les plus faciles à corriger : il suffit de régler une fois correctement les couleurs de votre thème et cela s'applique à toute la boutique.

Peut-on corriger ces erreurs d'un seul coup ?

Souvent, oui. Comme une boutique en ligne fonctionne avec des modèles, la même erreur apparaît généralement sur des centaines de pages à la fois — et elle se répare donc aussi à l'échelle du thème. Un seul ajustement de votre thème (couleurs, titres, étiquettes) couvre alors d'un coup toute votre boutique.

Une analyse gratuite détecte-t-elle toutes ces erreurs ?

Une analyse automatisée établit de façon fiable environ 57 % des problèmes par la machine ; le reste demande une évaluation humaine. Or, ces 57 % englobent justement les erreurs ci-dessus — contraste, textes alternatifs, étiquettes, boutons, titres — donc une analyse met d'emblée en évidence la part du lion, avec la correction associée.

Curieux de savoir lesquelles de ces dix erreurs figurent sur votre site ? Collez votre URL et analysez gratuitement une page en pleine profondeur — sans compte, en moins de 60 secondes.