Checklist & Ressources

✅ Checklist de fin de cours

Avant de passer au cours suivant, assurez-vous que :

Toutes vos pages utilisent des balises sémantiques (<header>, <nav>, <main>, <article>, <footer>)
La hiérarchie des titres est correcte (un seul <h1>, pas de saut de niveaux)
Toutes les images ont un attribut alt approprié
La navigation fonctionne entre toutes les pages
Votre HTML est valide (testé avec W3C Validator)
Vous avez au moins 3 pages HTML structurées

📖 Ressources complémentaires

Documentation officielle

HTML Sémantique - MDN : Guide complet sur la sémantique HTML
Guide d’accessibilité - MDN : Tout savoir sur l’accessibilité web
Éléments HTML5 - HTML5 Doctor : Explication détaillée de chaque élément HTML5

Outils de validation

W3C HTML Validator : Valider votre HTML
WAVE : Tester l’accessibilité de votre site
HeadingsMap : Extension Chrome pour visualiser la structure des titres

Guides et tutoriels

Web Content Accessibility Guidelines (WCAG) : Les standards d’accessibilité web
The A11Y Project : Ressources communautaires sur l’accessibilité
HTML5 Accessibility : Support de l’accessibilité par navigateur

❓ Questions fréquentes

Quand utiliser `<section>` vs `<article>` vs `<div>` ?

<article> : contenu autonome qui pourrait être distribué indépendamment
- Un article de blog
- Un chapitre complet
- Une carte de produit
- Un post sur les réseaux sociaux
<section> : regroupement thématique à l’intérieur d’un contenu
- Les différentes parties d’un chapitre
- Les sections d’une page d’accueil
- Un groupe de contenu lié
<div> : conteneur sans signification sémantique
- Uniquement pour le style CSS
- Quand aucune balise sémantique ne convient

Exemple :

<article>  <!-- Un chapitre = contenu autonome -->
  <h2>Chapitre 1</h2>

  <section>  <!-- Une partie du chapitre -->
    <h3>Le matin</h3>
    <p>...</p>
  </section>

  <div class="illustration">  <!-- Juste pour le style -->
    <img src="leo.jpg" alt="Léo">
  </div>
</article>

Puis-je avoir plusieurs `<main>` ?

Non, un seul <main> par page.

Le <main> désigne le contenu principal unique de la page. Si vous avez besoin de plusieurs zones de contenu, utilisez <article> ou <section> à l’intérieur du <main>.

<!-- ✅ Correct -->
<main>
  <article>Chapitre 1</article>
  <article>Chapitre 2</article>
</main>

<!-- ❌ Incorrect -->
<main>Chapitre 1</main>
<main>Chapitre 2</main>

Puis-je imbriquer des `<header>` et `<footer>` ?

Oui ! Vous pouvez avoir :

Un <header> et <footer> pour la page entière
D’autres <header> et <footer> dans vos <article>

<body>
  <header>
    <!-- En-tête de la page -->
    <h1>Mon site</h1>
    <nav>...</nav>
  </header>

  <main>
    <article>
      <header>
        <!-- En-tête de l'article -->
        <h2>Chapitre 1</h2>
        <p>Publié le 15 janvier 2025</p>
      </header>

      <p>Contenu du chapitre...</p>

      <footer>
        <!-- Pied de l'article -->
        <p>Fin du chapitre</p>
      </footer>
    </article>
  </main>

  <footer>
    <!-- Pied de la page -->
    <p>&copy; 2025</p>
  </footer>
</body>

Dois-je mettre `alt` sur toutes les images ?

Oui, l’attribut alt est obligatoire sur toutes les balises <img>.

Mais la valeur peut être vide pour les images décoratives :

<!-- Image informative -->
<img src="leo.jpg" alt="Léo tenant une carte">

<!-- Image décorative -->
<img src="decoration.svg" alt="">

Ne jamais faire :

<!-- ❌ Sans alt (invalide) -->
<img src="leo.jpg">

Comment savoir si mon site est accessible ?

Testez avec le clavier : Pouvez-vous naviguer avec la touche Tab ?
Utilisez WAVE : https://wave.webaim.org/
Validez votre HTML : https://validator.w3.org/
Testez avec un lecteur d’écran :
- Mac : VoiceOver (Cmd + F5)
- Windows : NVDA (gratuit)
Vérifiez les contrastes : https://webaim.org/resources/contrastchecker/

Est-ce que je perds du temps à faire un site accessible ?

Non ! Un site accessible est :

✅ Mieux référencé (SEO)
✅ Plus facile à maintenir
✅ Utilisable par plus de personnes
✅ Conforme aux obligations légales
✅ De meilleure qualité globale

L’accessibilité est un investissement, pas une contrainte.