Leçon 1 / 20

Établir un état des lieux avec Lighthouse et le navigateur

12 min HTML5 — accessibilité, composants natifs et métadonnées Gratuit

Objectif : Repérer les problèmes d’accessibilité à vérifier manuellement dans un rapport d’audit.

Une page peut obtenir un bon résultat à un audit automatisé tout en restant difficile à utiliser pour certaines personnes. À l’inverse, un avertissement ne signifie pas toujours qu’une correction est nécessaire. Vous allez utiliser Lighthouse pour repérer des pistes, puis vérifier dans le navigateur ce que le rapport ne peut pas décider à votre place.

Lancer un audit reproductible

Ouvrez index.html dans un navigateur, idéalement dans les mêmes conditions que celles prévues pour la publication. Dans les outils de développement, ouvrez Lighthouse, sélectionnez la catégorie d’accessibilité, puis lancez l’analyse de la page. Si le projet n’est pas hébergé, vérifiez que le navigateur peut charger correctement style.css et assets/affiche-evenement.jpg : un fichier manquant peut modifier le rendu et rendre l’observation moins représentative.

Pour comparer deux audits, gardez des conditions proches : même navigateur, même page, même environnement et mêmes catégories sélectionnées. Un score peut varier si la page ou les ressources ne se chargent pas de la même manière. Notez la date et les conditions du test avec les résultats, plutôt que de traiter un chiffre isolé comme une mesure définitive.

Lire le rapport sans lui déléguer le jugement

Examinez chaque constat séparément. Le rapport indique généralement une règle, les éléments concernés et parfois une suggestion de correction. Ouvrez les éléments signalés dans l’inspecteur du navigateur et vérifiez qu’ils correspondent bien à la page testée. Un constat peut viser un défaut réel, un cas particulier à examiner ou une situation que l’outil ne sait pas interpréter complètement.

Lighthouse ne simule pas toutes les façons dont une personne peut consulter la page. Il peut repérer certaines erreurs techniques, mais ne juge pas correctement, à lui seul, si les textes sont compréhensibles, si l’affiche est décrite de manière utile, ou si les informations importantes sont faciles à trouver. Il ne remplace pas non plus l’essai avec des technologies d’assistance ni les retours de personnes qui les utilisent.

Compléter l’audit par des vérifications manuelles

Parcourez la page dans le navigateur comme le ferait une personne qui cherche les événements. Vérifiez que l’annonce « Soirée des cultures », sa date, son descriptif et les informations pratiques sont visibles et compréhensibles. Examinez aussi l’affiche : son texte alternatif doit rendre compte de l’information utile portée par l’image, et non ajouter une description sans rapport avec son rôle.

Testez ensuite les commandes visibles avec le clavier, sans utiliser la souris. Vérifiez que vous pouvez atteindre la navigation, le bouton d’inscription et les informations repliables, puis que les actions restent compréhensibles. Essayez le bouton de newsletter : l’ouverture et la fermeture doivent être possibles, et le formulaire doit présenter une étiquette associée à son champ. Ces essais servent ici à repérer des anomalies ; les règles détaillées de navigation et de gestion du dialogue seront abordées dans les leçons suivantes.

Pour chaque anomalie, consignez la zone concernée, le geste qui permet de la reproduire, le résultat observé et le résultat attendu. Par exemple : « Le bouton de newsletter est visible, mais la commande ne l’ouvre pas au clavier. » Cette note est plus exploitable qu’un commentaire comme « accessibilité à améliorer », car elle permet de confirmer le problème après correction.

Trier les constats et préparer la suite

Séparez les erreurs confirmées, les questions à vérifier et les recommandations sans effet constaté. Traitez d’abord les problèmes qui empêchent d’accéder à une information ou d’utiliser une action, puis les défauts moins bloquants. Après chaque modification, relancez l’audit et répétez le contrôle manuel concerné : une correction peut résoudre un avertissement tout en introduisant un autre problème.

  • Lighthouse repère des problèmes potentiels, mais ne certifie pas à lui seul l’accessibilité d’une page.
  • Vérifiez les éléments signalés dans le navigateur avant de décider d’une correction.
  • Complétez l’audit par des essais manuels avec le contenu et les commandes réels de la page.
  • Consignez des constats reproductibles et priorisez les obstacles qui empêchent l’accès ou l’action.

Dans la prochaine leçon, vous organiserez les régions et les titres de la page pour rendre son contenu plus facile à parcourir.

Envie d'aller plus loin ?

Les cours Enovatic sont gratuits et le resteront. Si vous cherchez un accompagnement encadré, nos formations professionnelles sont animées par les mêmes formateurs.