Ce module se concentre sur l'utilisation des technologies d'assistance pour les tests d'accessibilité. Une personne handicapée peut utiliser la TA pour aider à augmenter, maintenir ou améliorer les capacités d'exécution d'une tâche.
Dans l'espace numérique, les TA peuvent être:
- Non technologique: bâtonnets de tête/bouche, loupes à main, appareils dotés de gros boutons
- Haute technologie: appareils à commande vocale, appareils avec suivi oculaire, claviers/souris adaptatifs
- Matériel: boutons bascule, claviers ergonomiques, plage braille à actualisation automatique
- Logiciels: programmes de synthèse vocale, sous-titres instantanés, lecteurs d'écran
Nous vous encourageons à utiliser plusieurs types de TA dans votre flux de test global.
Principes de base des tests des lecteurs d'écran
Dans ce module, nous nous concentrerons sur l'un des TA numériques les plus populaires : les lecteurs d'écran. Un lecteur d'écran est un logiciel qui lit le code sous-jacent d'un site Web ou d'une application. Il convertit ensuite ces informations en sortie vocale ou en braille pour l'utilisateur.
Les lecteurs d'écran sont essentiels pour les personnes aveugles et sourdes aveugles, mais ils pourraient également être utiles aux personnes souffrant de déficience visuelle, de troubles de la lecture ou de troubles cognitifs.
Compatibilité du navigateur
Plusieurs options de lecteur d'écran sont disponibles. À l'heure actuelle, les lecteurs d'écran les plus populaires sont JAWS, NVDA et VoiceOver pour les ordinateurs de bureau, et VoiceOver et TalkBack pour les appareils mobiles.
En fonction de votre système d'exploitation (OS), de votre navigateur favori et de l'appareil que vous utilisez, un lecteur d'écran peut se démarquer comme la meilleure option. La plupart des lecteurs d'écran sont conçus pour des composants matériels et des navigateurs Web spécifiques. Lorsque vous utilisez un lecteur d'écran avec un navigateur pour lequel il n'a pas été calibré, vous pouvez rencontrer davantage de "bugs" ou un comportement inattendu. Les lecteurs d'écran fonctionnent mieux lorsqu'ils sont utilisés avec les combinaisons suivantes.
Commandes du lecteur d'écran
Une fois que vous avez correctement configuré le logiciel de lecteur d'écran pour votre ordinateur de bureau ou votre appareil mobile, consultez la documentation correspondante (en lien dans le tableau précédent) et exécutez quelques commandes essentielles du lecteur d'écran pour vous familiariser avec la technologie. Si vous avez déjà utilisé un lecteur d'écran, pensez à en essayer un nouveau !
Lorsque vous utilisez un lecteur d'écran pour les tests d'accessibilité, votre objectif est de détecter les problèmes dans votre code qui interfèrent avec l'utilisation de votre site Web ou de votre application, et non d'émuler l'expérience d'un utilisateur de lecteur d'écran. Ainsi, vous pouvez faire beaucoup de choses avec des connaissances de base, quelques commandes de lecteur d'écran et un peu, ou beaucoup, de pratique.
Si vous avez besoin de mieux comprendre l’expérience utilisateur des personnes qui utilisent des lecteurs d’écran et d’autres TA, vous pouvez vous adresser à de nombreuses organisations et individus afin d’obtenir ces précieuses informations. N’oubliez pas que l’utilisation d’une TA pour tester le code par rapport à un ensemble de règles et d’interroger les utilisateurs sur leur expérience produit souvent des résultats différents. Ces deux aspects sont des aspects importants pour créer des produits totalement inclusifs.
Commandes principales pour les lecteurs d'écran d'ordinateur
Commandes principales pour les lecteurs d'écran mobiles
Démonstration des tests des lecteurs d'écran
Pour tester notre démonstration, nous avons utilisé Safari sur un ordinateur portable exécutant macOS et enregistré le son. Vous pouvez suivre ces étapes avec n'importe quel lecteur d'écran, mais la manière dont vous rencontrerez certaines erreurs peut être différente de celle décrite dans ce module.
Étape 1
Accédez à la nouvelle version de CodePen, toutes les mises à jour d'accessibilité automatisées et manuelles sont appliquées.
Affichez-le en mode débogage pour continuer
les prochains tests. C'est important, car cela supprime le <iframe> qui entoure
page Web de démonstration, ce qui peut interférer avec certains outils de test. En savoir plus sur
Mode débogage de CodePen
Étape 2
Activez le lecteur d'écran de votre choix et accédez à la page de démonstration. Vous pouvez parcourir la page entière de haut en bas avant de vous concentrer sur des problèmes spécifiques.
Nous avons enregistré notre lecteur d'écran pour chaque problème, avant et après l'application des correctifs à la démo. Nous vous encourageons à exécuter la démonstration avec votre propre lecteur d'écran.
Problème 1: structure du contenu
Les en-têtes et les points de repère sont l'un des principaux moyens de navigation des utilisateurs à l'aide de lecteurs d'écran. S'ils ne sont pas présents, l'utilisateur de lecteur d'écran doit lire toute la page pour comprendre le contexte. Cela peut prendre beaucoup de temps et être source de frustration. Si vous essayez de parcourir l'un ou l'autre des éléments de la démonstration, vous vous apercevrez rapidement qu'ils n'existent pas.
- Exemple de point de repère:
<div class="main">...</div> - Exemple de titre:
<p class="h1">Join the Club</p>
Si vous avez tout mis à jour correctement, il ne devrait y avoir aucun changement visuel, mais votre expérience de lecteur d'écran s'en trouvera considérablement améliorée.
<ph type="x-smartling-placeholder">
Résolvons à présent le problème.
Certains éléments inaccessibles ne peuvent pas être observés simplement en consultant le site. Vous vous souvenez peut-être de l'importance des niveaux de titre et du code HTML sémantique dans le module Structure du contenu. Un contenu peut ressembler à un titre, mais il est en fait encadré dans une <div> stylisée.
Pour résoudre ce problème, vous devez d'abord identifier chaque élément à baliser comme tel, puis mettre à jour le code HTML correspondant. Veillez également à mettre à jour le CSS associé.
Exemple de point de repère: <main>...</main>
Exemple de titre: <h1>Join the Club</h1>
Si vous avez tout mis à jour correctement, il ne devrait y avoir aucun changement visuel, mais votre expérience de lecteur d'écran s'en trouvera considérablement améliorée.
<ph type="x-smartling-placeholder">Problème 2: contexte du lien
Il est important d'informer les utilisateurs de lecteurs d'écran de l'objectif d'un lien et de leur indiquer si celui-ci les redirige vers un nouvel emplacement en dehors du site Web ou de l'application.
Dans notre démonstration, nous avons corrigé la plupart des liens lors de la mise à jour du texte alternatif de l'image active. Cependant, il existe quelques liens supplémentaires concernant les différentes maladies rares qui pourraient bénéficier d'un contexte supplémentaire, notamment parce qu'ils redirigent vers un nouvel emplacement.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
Maple syrup urine disease (MSUD)
</a>
Afin de résoudre ce problème pour les utilisateurs de lecteurs d'écran, nous mettons à jour le code afin d'ajouter des informations, sans affecter l'élément visuel. Pour aider encore plus de personnes, comme les personnes souffrant de troubles de la lecture ou cognitifs, nous pouvons ajouter du texte visuel à la place.
Nous pouvons prendre en compte de nombreux modèles différents pour ajouter des informations supplémentaires sur les liens. Sur la base de notre environnement simple qui n'accepte qu'une seule langue, une étiquette ARIA est une option simple dans cette situation. Vous remarquerez peut-être que le libellé ARIA remplace le texte d'origine du lien. Veillez donc à inclure cette information dans votre mise à jour.
<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
Maple syrup urine disease (MSUD)
</a>
Problème 3: image décorative
Dans notre module de test automatisé, Lighthouse n'a pas pu détecter le SVG intégré qui sert d'image de démarrage principale sur notre page de démonstration, mais le lecteur d'écran la trouve et l'annonce "image" sans informations supplémentaires. C'est le cas même si vous n'ajoutez pas explicitement l'attribut role="img" au SVG.
<div class="section-right">
<svg>...</svg>
</div>
Pour résoudre ce problème, nous devons d'abord déterminer si l'image est informative ou décorative. Sur la base de cette décision, nous devons ajouter le texte alternatif approprié pour l'image (image informative) ou masquer l'image pour les utilisateurs de lecteurs d'écran (image décorative).
Nous avons évalué les avantages et les inconvénients de la meilleure façon de catégoriser l'image. Nous avons décidé qu'il s'agissait d'une image décorative, ce qui signifie que nous voulons ajouter ou modifier le code pour masquer l'image. Une méthode rapide consiste à ajouter directement un élément role="presentation" à l'image SVG. Le lecteur d'écran reçoit ainsi un signal pour qu'il ignore cette image et ne l'ajoute pas au groupe d'images.
<div class="section-right">
<svg role="presentation">...</svg>
</div>
Problème 4: Décoration de balle
Vous avez peut-être remarqué que le lecteur d'écran lit l'image à puce CSS sous les sections sur les maladies rares. Bien qu'il ne s'agisse pas du type d'image traditionnel que nous abordé dans le module Images, il faut tout de même modifier l'image, car elle perturbe le flux du contenu et pourrait distraire ou désorienter un utilisateur de lecteur d'écran.
<p class="bullet">...</p>
Comme pour l'exemple d'image décorative vu précédemment, vous pouvez ajouter un élément role="presentation" au code HTML avec la classe à puces pour le masquer dans le lecteur d'écran. De même, un role="none" peut fonctionner. Veillez simplement à ne pas utiliser aria-hidden: true, sinon les utilisateurs de lecteurs d'écran ne verront pas toutes les informations du paragraphe.
<p class="bullet" role="none">...</p>
Problème 5: champ de formulaire
Dans le module Forms, nous avons appris que tous les formulaires doivent également avoir un libellé visuel et programmatique. Ce libellé ne doit pas visibles à tout moment.
Dans notre démonstration, il manque un libellé visuel et programmatique dans le champ d'adresse e-mail d'inscription à la newsletter. Il existe un élément d'espace réservé au texte, mais celui-ci ne remplace pas le libellé, car il n'est pas visuellement persistant et n'est pas entièrement compatible avec tous les lecteurs d'écran.
<form>
<div class="form-group">
<input type="email" placeholder="Enter your e-mail address" required>
<button type="submit">Subscribe</button>
</div>
</form>
Pour résoudre ce problème, remplacez l'espace réservé au texte par un élément de libellé similaire. Cet élément de libellé est connecté par programmation au champ de formulaire. Un mouvement a été ajouté à l'aide de JavaScript pour que le libellé reste visible même lorsque du contenu est ajouté au champ.
<form>
<div class="form-group">
<input type="email" required id="youremail" name="youremail" type="text">
<label for="youremail">Enter your e-mail address</label>
<button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
</div>
</form>
Conclusion
Félicitations ! Vous avez terminé tous les tests de cette démonstration. Vous pouvez découvrir toutes ces modifications dans la version de Codepen mise à jour utilisée pour cette démonstration.
Maintenant, vous pouvez utiliser ce que vous avez appris pour examiner l'accessibilité de votre propre sites Web et applications.
L'objectif de tous ces tests d'accessibilité est de traiter autant que possible qu'un utilisateur peut rencontrer. Toutefois, cela ne signifie pas que votre site Web ou application sera parfaitement accessible lorsque vous aurez terminé. Vous obtiendrez le plus de succès en concevoir votre site web ou votre application avec l’accessibilité tout au long du processus et en intégrant ces tests à vos autres tests pré-lancement.
Testez vos connaissances
Testez vos connaissances sur les tests d'accessibilité automatisés
Quel est le meilleur lecteur d'écran à utiliser pour tester l'accessibilité ?
Quel est l'objectif des tests avec une technologie d'assistance ?