Exercice : rechercher et corriger le contenu pour l’accessibilité des lecteurs d’écran

  • 10 minutes

Avant d’essayer de vous déplacer dans l’exemple de page web à l’aide d’un lecteur d’écran, trouvez et corrigez les problèmes d’accessibilité restants.

Corriger le texte de l’image associée

  1. Exécutez le site et FastPass. Le dernier problème restant est le texte alt manquant pour une image sur la page.

    Screenshot of Accessibility Insights for Web that shows an error about missing alt text for an image.

  2. Cette image est purement décorative, vous pouvez simplement ajouter une description alt vide.

    <img alt="" width="120" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.226 112L36.2.2c60 16 74 49 81 84z' fill='%23ea8'/%3e%3cpath d='M.197 112L31 14C84 29 96 57 103 88z' fill='%23fea' /%3e%3c/svg%3e">

  3. Exécutez l’application et vérifiez FastPass une dernière fois. Tous les contrôles automatisés doivent maintenant réussir.

Vérifier les taquets de tabulation

  1. Maintenant que nous avons éliminé toutes les erreurs des contrôles automatisés, vérifions les taquets de tabulation. Sélectionnez Taquets de tabulation dans le volet gauche de FastPass.

    Screenshot of Accessibility Insights for Web with the second option of tab stops selected.

  2. Activez la bascule Afficher les taquets de tabulation dans FastPass.

  3. Basculez vers l’application web et commencez à utiliser la touche Tab pour naviguer sur la page. Observez que la navigation part du haut de la page, jusqu’aux liens du pied de page, en passant par les liens de formulaire et de page.

    Screenshot of the pizza app that shows tab stops from top to bottom.

Test avec un lecteur d’écran

Il y a encore quelques problèmes que FastPass ne détecte pas. Vous pouvez les trouver dans l’outil d’évaluation, qui effectue une évaluation complète de l’accessibilité de la page. Cependant, cet aspect dépasse le cadre de ce didacticiel. Au lieu de cela, rencontrons-les en utilisant le lecteur d’écran pour vous déplacer dans la page.

Activer un lecteur d’écran Windows

La Narrateur est un lecteur d’écran intégré directement à Windows. Il permet aux utilisateurs d’effectuer des tâches courantes sans souris. Vous pouvez activer le Narrateur de deux façons :

  • Sélectionnez la touche Windows + Ctrl + Entrée pour démarrer le narrateur. Sélectionnez de nouveau ces touches pour arrêter le Narrateur. (Dans les versions antérieures de Windows, le raccourci était Touche Windows + Entrée.) Sur de nombreux claviers, la touche Windows se trouve sur la rangée inférieure des touches, à gauche ou à droite de la touche Alt.

  • Sélectionnez sur la touche de logo Windows+Ctrl+N pour ouvrir les paramètres du Narrateur, puis appuyez sur le bouton bascule sous Utiliser le Narrateur.

Screenshot for turning on the toggle for enabling Narrator in Windows.

Nous vous suggérons de parcourir le tutoriel du narrateur, que vous trouverez sur l’écran des paramètres du narrateur.

Parcourir la page à l’aide du narrateur

  1. s’il n’est pas déjà en cours d’exécution, ouvrez le narrateur en sélectionnant la touche de logo Windows + Ctrl + Entrée.
  2. Avec le narrateur en cours d’exécution, passez à la page web de la pizzeria. Vous pouvez sélectionner le navigateur ou utiliser Alt + Tab pour effectuer cette opération.
  3. Sélectionnez la touche 1 pour afficher le titre de premier niveau. Vous devez entendre « Bienvenue » lu à voix haute.
  4. Sélectionnez de nouveau la touche 1. Vous entendez « Rejoindre notre liste de diffusion ». La narration n’est pas correct, car il ne doit y avoir qu’un seul élément <h1> dans une page.
  5. Sélectionnez de nouveau la touche 1. Le narrateur signale qu’il n’y a plus d’éléments <h1>.
  6. Sélectionnez la touche 2. Le narrateur signale qu’il n’y a pas d’éléments <h2>.
  7. Sélectionnez la touche 3. Le narrateur signale qu’il n’y a pas d’éléments <h3>. Cela indique qu’il y a clairement un problème avec les autres en-têtes sur la page.
  8. Sélectionnez la touche Tab à plusieurs reprises pour vous déplacer dans le formulaire et jusqu’au bouton Envoyer. Cela fonctionne correctement, comme vous vous y attendez suite à votre validation précédente des taquets de tabulation.
  9. Sélectionnez une fois de plus sur la touche Tab. Vous entendez un lien lu à voix haute ainsi : « Lien : cliquez ici ». Cette narration n’est pas claire, car nous ne pouvons pas dire quel lien nous sommes invités à sélectionner.
  10. Arrêtez le narrateur en sélectionnant la touche de logo Windows + Ctrl + Entrée.

Résolution des problèmes détectés par le biais du test du lecteur d’écran

Il vous reste deux éléments à corriger sur cette page : les en-têtes et le mystérieux lien « Cliquez ici ».

Corriger les en-têtes

  1. Nous allons abaisser l’en-tête « Rejoindre notre liste de diffusion » de <h1> à <h2>. Il ne peut y avoir qu’un seul attribut <h1>. Le texte « Bienvenue » en haut de la page était le premier.

    <h2>Join our mailing list</h2>

  2. En examinant le code HTML de l’en-tête « Tout savoir sur nos délicieuses pizzas ! », nous constatons pourquoi le Narrateur ne pouvait pas le trouver : il ne s’agit pas réellement d’un en-tête.

    <p style="font-size: 30px"><b>All about our wonderful pizza!</b></p>

    Ce texte a un style utilisant un texte en gras et une police de grande taille, mais il n’utilise pas d’élément d’en-tête. Remplacez cette balise par <h2>.

    <h2>All about our wonderful pizza!</h2>

  3. Maintenant que vous savez ce qu’il faut chercher, vous pouvez voir que ce problème se répète dans les autres en-têtes plus loin dans la page. Modifiez le titre « Nous prenons votre confidentialité au sérieux ! » pour utiliser <h2>.

    <h2>We take your privacy seriously!</h2>

  4. Modifiez le titre « Options de livraison » pour utiliser <h2>.

    <h2>Delivery options</h2>

Changez « cliquez ici »

Recherchez la ligne qui contient le texte « cliquez ici » :

Want to know more? <a href="/Privacy">Click here.</a>

Remplacez-le par le libellé suivant.

View our <a href="/Privacy">privacy policy</a> for more information.

Effectuer une vérification finale avec le lecteur d’écran

  1. Ouvrez le narrateur en sélectionnant la touche de logo Windows + Ctrl + Entrée.
  2. Avec le narrateur en cours d’exécution, passez à la page web de la pizzeria.
  3. Sélectionnez la touche Tab à plusieurs reprises pour parcourir les liens de la page. Cette fois, au lieu d’entendre « Lien : Cliquez ici », vous entendez « Lien : politique de confidentialité ». Tu as résolu le problème !
  4. Sélectionnez la touche 1 pour afficher les titres de premier niveau. Vous devez entendre « Bienvenue » lu à voix haute.
  5. Sélectionnez de nouveau la touche 1. Le narrateur vous indique qu’il n’y a aucun en-tête de niveau 1 restant. Opération réussie.
  6. Sélectionnez la touche 2 de manière répétée pour parcourir les en-têtes de niveau 2. Le narrateur les lit à voix haute.
  7. Arrêtez le narrateur en sélectionnant la touche de logo Windows + Ctrl + Entrée.