Naviguer sur un site e-commerce inconnu avec un lecteur d'écran : ce qu'un retour d'usage révèle sur vos parcours

Un parcours d'achat sans souris ni écran : le contexte

Dans un billet publié sur le blog d'UsableNet, Michael Taylor, utilisateur aveugle, raconte comment il a effectué un achat réel — une multiprise parafoudre pour un projet de bricolage — sur le site d'un distributeur de matériel électrique qu'il n'avait jamais visité. Toutes ses interactions passent par un lecteur d'écran (un logiciel qui vocalise le contenu de la page et permet de naviguer au clavier), en l'occurrence VoiceOver, le lecteur d'écran intégré aux appareils Apple. Il précise d'emblée que sa méthode lui est propre : l'usage d'un lecteur d'écran varie beaucoup d'une personne à l'autre.

Ce type de retour d'usage est précieux pour un responsable digital : il montre concrètement comment un utilisateur non-voyant « lit » un site, et donc où les choix de structure et de code facilitent ou bloquent un parcours d'achat.

Étape 1 : s'orienter grâce aux titres de la page

Première décision avant même de toucher le clavier : rechercher le produit directement ou parcourir les catégories. Ayant choisi la navigation par catégorie, Michael Taylor configure son lecteur d'écran pour ne parcourir que les titres de la page (les balises de titre h1, h2, h3...). Avec VoiceOver, ce réglage se fait via le « rotor », un menu qui permet de filtrer la navigation par type d'élément : titres, liens, boutons, champs de formulaire.

Sur un site correctement structuré, les fonctionnalités et rubriques importantes se repèrent facilement à chaque niveau de titre. Dans son exemple, la section « Shop By Category » apparaissait en titre de niveau 1, en deuxième position seulement. Il souligne toutefois que sur des sites plus complexes, il faut parfois de nombreux allers-retours avant de localiser la bonne section. Une fois la section trouvée, il repasse en navigation manuelle — élément par élément, flèche par flèche — pour parcourir la liste des catégories et activer celle qui l'intéresse.

Étape 2 : la liste produits, point de friction majeur

Sur la page de catégorie, il repère la liste produits (annoncée en titre de niveau 2), puis analyse comment chaque fiche est restituée. Verdict : la structure est « lourde ». Image, nom du produit, note client, prix, disponibilité et bouton « Ajouter au panier » sont annoncés séparément, un élément à la fois. Écouter chaque détail de chaque produit aurait été extrêmement chronophage.

Sa parade : constater que le nom de chaque produit est un lien vers sa fiche, puis régler le rotor pour naviguer de lien en lien. Il n'entend ainsi que les noms de produits et avance rapidement dans la liste, jusqu'à trouver l'article recherché — sans même avoir besoin des filtres de recherche, cette fois.

L'enseignement pour les équipes produit et design est direct : la façon dont une carte produit est structurée dans le code détermine si un utilisateur de lecteur d'écran peut balayer efficacement un catalogue ou s'il doit subir un flot d'annonces vocales répétitives.

Étape 3 : fiche produit et tunnel de commande

Sur les fiches produit, sa stratégie dépend du contexte. Pour un achat de routine, il filtre par boutons et saute directement sur « Ajouter au panier ». Ici, il souhaitait vérifier les caractéristiques techniques : il a donc parcouru la page manuellement depuis le haut — titre, prix, disponibilité, délais de livraison, options d'achat — jusqu'à la description détaillée, chaque fiche produit étant organisée différemment d'un site à l'autre.

Après vérification des spécifications, il utilise le filtre « boutons » pour retrouver « Ajouter au panier ». Une fenêtre modale lui proposant d'aller au panier lui a évité de devoir chercher l'icône panier dans l'en-tête — sinon, il aurait dû remonter en haut de page et filtrer par bouton ou lien.

Pour le tunnel de commande, il partage une astuce révélatrice : filtrer la navigation par champs de saisie. Cela permet de sauter directement d'un champ de formulaire à l'autre sans réentendre à chaque fois le récapitulatif de la commande.

Ce qui rend un site facile ou difficile au lecteur d'écran

Michael Taylor résume les facteurs qui, selon son expérience, font la différence :

• Une accessibilité rigoureuse et une structure propre : les sites les plus faciles ont une organisation claire et cohérente de page en page.
• Le lien d'évitement (skip link) : ce lien placé en tout début de page, visible uniquement des lecteurs d'écran, permet de sauter directement au contenu principal. Comme le focus revient en haut de page à chaque chargement, il fait gagner ce trajet à chaque fois.
• La cohérence des conventions e-commerce : il s'appuie sur la reconnaissance de schémas. Les sites marchands suivant des structures assez standardisées, il réutilise ses habitudes acquises ailleurs pour aborder un site inconnu.
• À l'inverse, les sites datés, surchargés d'images, encombrés ou truffés d'éléments interactifs sont les plus difficiles : si l'accessibilité n'y est pas solide, il n'a « pratiquement aucune chance » d'en venir à bout.

En dernier recours, pour un type de site inconnu ou particulièrement confus, il écoute parfois la page entière de haut en bas — une méthode qu'il évite autant que possible, car longue et difficile à absorber.

Ce que ce témoignage implique pour un site marchand

Ce retour d'usage rappelle que l'accessibilité n'est pas qu'une case de conformité : chaque défaut structurel (hiérarchie de titres bancale, cartes produits verbeuses, absence de lien d'évitement, formulaires mal balisés) allonge concrètement le parcours d'un client réel, jusqu'à provoquer l'abandon. À l'inverse, une structure sémantique propre, des conventions respectées et une cohérence de page en page permettent à un utilisateur de lecteur d'écran de dérouler un achat complet, de la page d'accueil au paiement. Autrement dit, les fondamentaux de l'accessibilité recoupent largement ceux d'une bonne UX et d'un tunnel de conversion efficace.