Finaliser et tester la page

Une page qui semble correcte sur votre écran peut présenter des débordements sur un téléphone, des blocs mal alignés sur une tablette ou des liens difficiles à utiliser au clavier. Avant de livrer la page de présentation de l’atelier de jardinage, vous allez vérifier son rendu à plusieurs largeurs et tester ses interactions.

Vous avez déjà construit la structure et les zones de contenu du projet au fil des leçons précédentes. Dans cette dernière étape, ne cherchez pas à ajouter de nouvelles décorations : observez le résultat, reproduisez chaque défaut et apportez une correction ciblée.

Tester le rendu à plusieurs largeurs

Ouvrez la page dans un navigateur récent, puis réduisez progressivement la largeur de la fenêtre. Vous pouvez aussi utiliser le mode de prévisualisation responsive des outils de développement du navigateur et saisir des dimensions précises. Vérifiez au minimum une largeur de téléphone, une largeur intermédiaire et une largeur d’ordinateur, par exemple 375, 768 et 1280 pixels.

À chaque largeur, parcourez la page du haut vers le bas. Vérifiez que le titre de l’atelier, les horaires, les conseils pratiques et le contact restent visibles, que les blocs s’empilent ou s’alignent comme prévu et qu’aucune barre de défilement horizontale n’apparaît sans raison. Contrôlez aussi que les textes ne sont pas coupés et que les espacements laissent chaque section facile à distinguer.

Quand vous détectez un défaut, notez la largeur, la zone concernée et le résultat observé avant de modifier le CSS. Par exemple : « à 375 pixels, le bloc des horaires est plus large que l’écran ». Cette observation vous permet de rechercher une règle précise, puis de confirmer que la correction fonctionne aussi aux autres dimensions, sans dégrader la mise en page déjà correcte.

Vérifier les liens et la navigation au clavier

Cliquez sur chaque lien de la page de présentation, notamment le lien de contact, et vérifiez qu’il mène à la bonne destination. Un lien vers une adresse électronique peut utiliser une adresse de type mailto: ; un lien vers une section de la page doit pointer vers l’identifiant correspondant. Vérifiez également que le texte des liens indique clairement leur destination.

Rechargez la page, puis laissez la souris de côté et utilisez la touche Tab pour parcourir les liens. L’élément actif doit être identifiable grâce à un indicateur de focus visible. Appuyez sur Entrée pour vérifier qu’un lien peut être activé au clavier, puis utilisez Maj+Tab pour revenir à l’élément précédent. Les états interactifs ayant déjà été étudiés, concentrez-vous ici sur leur présence et leur fonctionnement dans la page complète.

Appliquer une liste de contrôle finale

Effectuez une dernière vérification méthodique avant de considérer la page terminée. Si un point échoue, corrigez-le puis répétez le test concerné à plusieurs largeurs. Une page prête à être livrée n’est pas seulement correcte dans un cas : son contenu reste accessible et cohérent dans les conditions d’utilisation prévues.

• À 375, 768 et 1280 pixels environ, le contenu reste lisible et aucun élément essentiel ne déborde.
• L’en-tête, les horaires, les conseils et le contact s’affichent dans un ordre logique et avec des espacements cohérents.
• Chaque lien mène à la destination attendue et son libellé est compréhensible.
• La navigation avec Tab et Maj+Tab suit un ordre logique ; le focus reste visible et les liens s’activent au clavier.
• Après chaque correction, vous avez revérifié la page aux différentes largeurs pour éviter une régression.

À retenir

• Testez la page à plusieurs largeurs, dont une largeur de téléphone, une largeur intermédiaire et une largeur d’ordinateur.
• Décrivez précisément un défaut avant de modifier la règle CSS qui en est responsable.
• Vérifiez chaque lien et parcourez la page au clavier en contrôlant la visibilité du focus.
• Répétez les tests après correction et consignez les points de la liste de contrôle.