RM

RM Partie 8 : Bonnes pratiques et outils

Partie 8 — Bonnes pratiques et outils

1) Objectifs pédagogiques

2) Validation du code

2.1 Pourquoi valider ?

2.2 Outils principaux

2.3 Exemple d’erreurs détectables

3) Accessibilité (A11y)

3.1 Pourquoi ?

3.2 Attribut alt pour les images

Exemple :

<img src="chaton.jpg" alt="Un chaton tigré qui dort dans un panier">

Cas particuliers :

3.3 Labels pour les formulaires

Chaque champ de formulaire doit être associé à un label :

<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">

3.4 Attributs ARIA

<nav aria-label="Menu principal">
  <ul>
    <li><a href="/accueil">Accueil</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<button aria-expanded="false" aria-controls="menu">Menu</button>
<div id="menu" hidden>…</div>

3.5 Autres bonnes pratiques A11y

4) Bonnes pratiques vs mauvaises pratiques

4.1 Code obsolète ou à éviter

<font color="red">Texte</font>
<center>Texte centré</center>
<b>Texte en gras</b>
<i>Texte en italique</i>
<p style="color: red;">Texte</p>              <!-- encore inline -->
<p class="important">Texte</p>                <!-- mieux -->
<strong>Texte important</strong>              <!-- sémantique -->
<em>Texte mis en valeur</em>                  <!-- sémantique -->

Avec CSS :

.important { color: red; font-weight: bold; }

4.2 Séparation contenu / style / comportement

Ne mélange pas :

<!-- Mauvais -->
<p style="color: blue;" onclick="alert('ok')">Clique</p>

<!-- Bon -->
<p class="lien-action">Clique</p>
.lien-action { color: blue; cursor: pointer; }
document.querySelector('.lien-action')
  .addEventListener('click', () => alert('ok'));

4.3 Indentation et lisibilité

5) Outils développeur des navigateurs

5.1 L’inspecteur d’éléments

5.2 La console

console.log("Bonjour !");

5.3 L’onglet « Réseau » (Network)

5.4 L’onglet « Performances » / « Lighthouse »

6) Documentation fiable

6.1 MDN Web Docs

6.2 Spécifications

6.3 Autres ressources

7) Exercice

But :

  1. Écris un petit document HTML volontairement erroné (ex : balises non fermées, usage de <center>, image sans alt).
  2. Vérifie-le avec https://validator.w3.org/
  3. Corrige les erreurs.
  4. Ajoute une image avec alt, un formulaire avec des label, et un aria-label sur une navigation.
  5. Utilise les outils développeur de ton navigateur pour tester l’affichage et la console.

8) Corrigé possible

Mauvaise version :

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
</head>
<body>
  <center><h1>Bienvenue</h1></center>
  <img src="chat.jpg">
  <form>
    <input type="text" placeholder="Nom">
    <input type="email">
    <button>Envoyer</button>
  </form>
</body>
</html>

Version corrigée :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Exemple corrigé</title>
  </head>
  <body>
    <header>
      <h1>Bienvenue</h1>
    </header>

    <main>
      <img src="chat.jpg" alt="Un chat gris assis sur une chaise">

      <form action="/contact" method="post">
        <div>
          <label for="nom">Nom</label>
          <input type="text" id="nom" name="nom" required>
        </div>
        <div>
          <label for="email">E-mail</label>
          <input type="email" id="email" name="email" required>
        </div>
        <button type="submit">Envoyer</button>
      </form>
    </main>

    <nav aria-label="Menu principal">
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

9) Mini-quiz

  1. À quoi sert https://validator.w3.org/ ?
  2. Donne un exemple où alt="" est la bonne pratique.
  3. Pourquoi <center> et <font> sont-ils à éviter ? Quelle alternative utiliser ?
  4. Comment associer correctement un label et un champ ?
  5. Quelle différence entre aria-label et <label> ?
  6. Quel outil permet de tester la compatibilité des fonctionnalités web dans les navigateurs ?
  7. Quelle est la meilleure source de documentation HTML/CSS/JS ?

Réponses :

  1. Vérifier la conformité HTML/CSS et détecter des erreurs.
  2. Pour une image purement décorative.
  3. Balises obsolètes → utiliser CSS (text-align, color).
  4. En reliant for="id" du <label> avec l’id de l’<input>.
  5. aria-label fournit un libellé invisible (accessibilité) ; <label> associe visuellement et sémantiquement.
  6. Can I use (https://caniuse.com/).
  7. MDN Web Docs.

10) Fiche-mémo