HTML

HTML5 — accessibilité, composants natifs et métadonnées

Rendez une interface utilisable au clavier et au lecteur d'écran, puis outillez la page pour le partage social et la performance.

Commencer le cours

20 leçons · 6 h 2 · Niveau avance · 100 % gratuit

Ce que vous saurez faire

  • Corriger l'ordre de lecture et la navigation au clavier
  • Utiliser dialog, details et summary plutôt que des composants simulés
  • Écrire des métadonnées Open Graph et des données structurées JSON-LD
  • Réduire le temps d'affichage avec preload, lazy et dimensions explicites

Prérequis

  • Maîtriser les formulaires et la sémantique HTML
  • Savoir lire la sortie d'un audit Lighthouse
Le fil rouge du cours

le site d'une association culturelle : navigation au clavier, fenêtre de dialogue de newsletter et données structurées des événements

Programme

1 Auditer la structure et les parcours au clavier 4 leçons
  1. Établir un état des lieux avec Lighthouse et le navigateur 12 min
  2. Organiser les régions et les titres de la page 20 min
  3. Rendre le parcours de tabulation prévisible 20 min
  4. Vérifier le focus et les liens d’évitement 20 min
2 Construire des interactions avec les éléments natifs 4 leçons
  1. Créer une fenêtre de dialogue avec dialog 25 min
  2. Gérer le focus autour d’une fenêtre de dialogue 20 min
  3. Présenter des informations repliables avec details et summary 15 min
  4. Choisir un contrôle natif plutôt qu’une imitation 15 min
3 Décrire les pages pour le partage et les moteurs 4 leçons
  1. Rédiger les métadonnées essentielles d’une page 15 min
  2. Configurer l’aperçu Open Graph 20 min
  3. Décrire un événement en JSON-LD 15 min
  4. Valider et maintenir les données structurées 25 min
4 Améliorer le chargement des ressources 4 leçons
  1. Réserver l’espace des images 15 min
  2. Différer les images hors écran 12 min
  3. Précharger une ressource critique 15 min
  4. Mesurer l’effet des optimisations 8 min
5 Projet pratique : publier une page d’événement accessible et optimisée 4 leçons
  1. Préparer la structure de la page événement 25 min
  2. Intégrer la newsletter et les informations repliables 25 min
  3. Publier les métadonnées et optimiser les médias 20 min
  4. Effectuer la recette finale au clavier et dans Lighthouse 20 min

Validation du cours

Un quiz de 12 questions vérifie que le parcours est acquis. Il faut 80 % de bonnes réponses pour valider le cours. Les tentatives sont illimitées, seul le meilleur score est conservé.

Passer le quiz

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.

Voir les formations +32 (0) 484 29 56 94