Effectuer la recette finale au clavier et dans Lighthouse

Une page peut sembler terminée tout en laissant un contrôle difficile à atteindre, un dialogue qui ne se ferme pas comme prévu ou une métadonnée qui ne correspond plus à l’événement affiché. La recette finale vous permet de vérifier ces points dans la page réellement publiée, avant de la considérer prête à être mise en ligne.

Vous allez parcourir la page sans souris, tester ses interactions, comparer les informations visibles aux métadonnées et lancer un dernier audit Lighthouse. Reprenez les vérifications manuelles et les principes de mesure établis dans les leçons précédentes : cette recette les rassemble, sans remplacer le jugement humain par un score.

1. Parcourir toute la page au clavier

Rechargez index.html, puis gardez les mains hors de la souris. Avec Tab, vérifiez que le premier élément interactif est le lien « Aller au contenu principal », qu’il est visible lorsqu’il reçoit le focus et qu’Entrée vous amène au contenu principal. Continuez dans l’ordre : liens de navigation, bouton de newsletter, éléments de la page et liens du pied de page. Le focus doit rester visible et suivre un parcours compréhensible.

Activez le bouton de newsletter. Vérifiez que le dialogue s’ouvre, que le focus se trouve dans la fenêtre, que son titre est annoncé et que les contrôles restent accessibles. Testez la fermeture avec le bouton prévu et avec Échap ; dans les deux cas, contrôlez que le focus revient au déclencheur. Si une commande déclarative n’est pas prise en charge par un navigateur ciblé, consignez le résultat et vérifiez la solution de repli effectivement prévue par le projet.

Parcourez ensuite les informations pratiques avec Tab et activez leur résumé avec Entrée ou Espace. Vérifiez que le contenu apparaît et reste lisible, puis refermez-le et assurez-vous que la navigation continue sans détour. Les comportements natifs de dialog et de details ont été étudiés précédemment ; ici, vous contrôlez leur intégration dans la page complète.

2. Vérifier le contenu et les informations publiées

Lisez la page comme un visiteur : titre principal, annonce « Soirée des cultures », date, description, lieu et informations pratiques. Vérifiez que l’affiche possède un texte alternatif pertinent et que les dimensions HTML correspondent au fichier. Si le visuel ou les horaires ont changé, les informations associées dans la page et dans les données structurées doivent être réexaminées ensemble.

Dans le code source, contrôlez que le titre du document, sa description et la canonical décrivent la page publiée. Comparez ensuite les valeurs Open Graph à ces informations et vérifiez que l’image de partage est une URL absolue accessible. Enfin, relisez le bloc JSON-LD : dates, lieu, nom de l’événement, organisateur, image et description doivent concorder avec le contenu visible. N’ajoutez pas une propriété URL à l’événement tant que l’adresse réelle de sa page n’est pas définie ; ne remplacez pas l’URL canonique de la page sans publier la nouvelle adresse de référence.

3. Contrôler les ressources et Lighthouse

Dans les outils du navigateur, vérifiez que assets/affiche-evenement.jpg se charge sans erreur. L’image principale doit conserver ses dimensions déclarées et sa priorité de chargement ; elle ne doit pas recevoir loading="lazy". Confirmez aussi que son préchargement pointe vers le fichier réellement utilisé et évitez d’ajouter un second préchargement inutile. Si la page ne contient pas d’autre image, aucun chargement différé supplémentaire n’est à ajouter.

Lancez Lighthouse sur la page finale, avec des conditions de test aussi proches que possible de celles de votre mesure précédente. Examinez les diagnostics d’accessibilité, de performance et de bonnes pratiques, puis comparez les constats plutôt que de viser un score isolé. Une amélioration de performance ne valide ni le parcours clavier ni la justesse des données d’événement ; gardez ces contrôles séparés dans votre compte rendu.

• Parcourez la page au clavier de bout en bout et vérifiez le focus visible, le lien d’évitement et l’ordre des contrôles.
• Testez l’ouverture et la fermeture du dialogue, le retour du focus et le fonctionnement des informations repliables.
• Comparez le contenu visible aux métadonnées Open Graph, à la canonical et aux données JSON-LD.
• Confirmez que l’image prioritaire est correctement dimensionnée, préchargée si nécessaire et jamais différée.
• Utilisez Lighthouse pour repérer et prioriser les corrections ; complétez toujours ses résultats par les vérifications manuelles.

Avant publication, corrigez d’abord les obstacles qui empêchent l’accès au contenu ou l’usage des interactions, puis les incohérences de données et les problèmes de chargement. Consignez les points non résolus avec leur impact et le navigateur concerné afin de pouvoir les vérifier après déploiement.