Un parcours d'achat au lecteur d'écran : ce qu'un scanner ne voit pas
Par Mohammed Ouinas, publié le .
Dans cette vidéo de trois minutes, je parcours une page de boutique en ligne avec NVDA, mon lecteur d'écran. D'abord avec six défauts d'accessibilité, puis la même page corrigée. La page est une page de démonstration conçue par AANC.
Les commandes du lecteur sont utilisables au clavier : Tab pour y aller, Espace pour lancer ou arrêter, flèches pour avancer ou reculer, M pour couper le son, C pour les sous-titres. Vous pouvez aussi télécharger la vidéo ou les sous-titres (SRT).
Ce que la vidéo montre
- Un bouton sans nom : NVDA dit seulement « bouton ». Un scanner automatique le détecte.
- Un ordre de lecture faux : le panier s'affiche avant les promotions, mais NVDA lit les promotions d'abord. Un scanner ne le voit pas.
- Un ajout au panier sans annonce : après Entrée, rien n'est dit. Un scanner ne le voit pas.
- Un champ sans étiquette : NVDA dit « édition », sans dire ce qu'on attend. Un scanner le détecte.
Sur les six défauts de la page, un scanner automatique n'en a trouvé que deux. Le test avec un vrai lecteur d'écran les a tous trouvés. C'est pourquoi un audit d'accessibilité doit aussi se faire avec un lecteur d'écran, par une personne qui s'en sert tous les jours.
Transcription
- Bonjour, je suis Mohammed Ouinas, non-voyant, ingénieur informatique
- et fondateur d'AANC, Access Network Consulting.
- Je vais vous montrer le parcours d'une personne déficiente visuelle au lecteur d'écran,
- sur une boutique avec des défauts de conception en accessibilité.
- Ensuite, je ferai le même parcours avec la page corrigée.
- NVDA : Boutique de démonstration, titre de niveau 1.
- Je vais appuyer sur la touche Tabulation pour naviguer.
- NVDA : Bouton.
- Je tombe sur un bouton sans description, sûrement avec une loupe, mais pour moi ce n'est pas parlant.
- NVDA : Bouton.
- NVDA : Titre de niveau 2, Promotions.
- NVDA : Livraison offerte dès 50 euros.
- NVDA : Titre de niveau 2, Panier.
- Alors, à l'écran, le panier est avant la promotion.
- Et là, NVDA, mon lecteur d'écran, lit promotion avant panier.
- C'est un défaut de la page, et aussi c'est incompréhensible pour nous.
- Je vais essayer d'ajouter un article au panier.
- NVDA : Titre de niveau 2, Panier.
- NVDA : Livraison offerte. Ajouter un article, bouton.
- J'appuie sur Entrée, et j'ai aucune interaction.
- Je ne sais pas si l'article a été ajouté.
- Maintenant, le champ d'édition.
- J'appuie sur la touche qui va me ramener au champ pour saisir du texte.
- NVDA : Section, édition.
- Mon lecteur d'écran lit : section, édition.
- Mais je ne sais pas à quoi ça correspond. Il n'y a pas d'étiquette.
- NVDA : Rechercher, bouton.
- La page est corrigée.
- Le bouton a son étiquette : je sais que c'est un bouton pour rechercher un article.
- NVDA : Ajouter un article, bouton.
- J'essaye d'ajouter un article.
- NVDA : Article ajouté, 2 au panier.
- L'erreur est corrigée.
- NVDA : Aide, bouton.
- NVDA : Section, adresse e-mail, édition.
- Et sur le champ d'édition, j'ai bien : section, adresse e-mail. Donc je sais que je dois rentrer l'adresse e-mail.
- C'est beaucoup plus pratique.
- Sur six défauts d'accessibilité, un scanner automatique n'en repère que deux.
- Au lecteur d'écran, en tant que personne déficiente visuelle, je les ai tous repérés.
- C'est pour ça qu'il est important de procéder à un audit d'accessibilité,
- et encore plus avec une personne habituée à utiliser ses outils au quotidien
- et qui se confronte quotidiennement à ces difficultés.
- Je suis Mohammed Ouinas,
- auditeur en accessibilité numérique, non-voyant et ingénieur informatique.
- Retrouvez-nous sur contact@aanc-accessibilite.fr
AANC réalise des audits d'accessibilité avec lecteur d'écran, et des formations. Écrivez-nous ou découvrez notre veille accessibilité mensuelle.
Mohammed Ouinas est consultant en accessibilité numérique et fondateur d'AANC. Non-voyant, il teste les sites au lecteur d'écran.