1<!-- ❌ Mauvaise pratique : divs génériques -->
2<div class="header">
3  <div class="navigation">
4    <div class="menu-item">Accueil</div>
5    <div class="menu-item">Services</div>
6  </div>
7</div>
8
9<!-- ✅ Bonne pratique : HTML sémantique -->
10<header>
11  <nav aria-label="Navigation principale">
12    <ul>
13      <li><a href="/" aria-current="page">Accueil</a></li>
14      <li><a href="/services">Services</a></li>
15    </ul>
16  </nav>
17</header>
18
19<main>
20  <article>
21    <h1>Titre principal de l'article</h1>
22    <section>
23      <h2>Section importante</h2>
24      <p>Contenu de la section...</p>
25    </section>
26  </article>
27  
28  <aside aria-label="Informations complémentaires">
29    <h2>Articles connexes</h2>
30    <!-- Contenu latéral -->
31  </aside>
32</main>

1<!-- Images décoratives -->
2<img src="decoration.jpg" alt="" role="presentation">
3
4<!-- Images informatives -->
5<img src="graphique-ventes.png" 
6     alt="Graphique montrant une augmentation de 25% des ventes entre janvier et mars 2024">
7
8<!-- Images complexes avec description détaillée -->
9<figure>
10  <img src="organigramme.png" 
11       alt="Organigramme de l'entreprise" 
12       aria-describedby="org-description">
13  <figcaption id="org-description">
14    L'organigramme montre la hiérarchie : PDG en haut, 
15    suivi de 3 directeurs (Marketing, Technique, Commercial), 
16    chacun supervisant 2 à 4 employés.
17  </figcaption>
18</figure>

1<!-- Exemple complet : bouton de menu avec états -->
2<button class="menu-toggle" 
3        aria-expanded="false" 
4        aria-controls="main-menu"
5        aria-label="Ouvrir le menu principal">
6  <span aria-hidden="true">☰</span>
7  Menu
8</button>
9
10<ul id="main-menu" 
11    class="menu" 
12    aria-hidden="true"
13    role="menu">
14  <li role="menuitem"><a href="/">Accueil</a></li>
15  <li role="menuitem"><a href="/about">À propos</a></li>
16</ul>

1<form>
2  <!-- Étiquettes explicites -->
3  <div class="form-group">
4    <label for="email">Adresse e-mail (obligatoire)</label>
5    <input type="email" 
6           id="email" 
7           name="email"
8           required
9           aria-describedby="email-help"
10           aria-invalid="false">
11    <div id="email-help" class="help-text">
12      Format attendu : nom@example.com
13    </div>
14  </div>
15
16  <!-- Groupe de champs avec fieldset -->
17  <fieldset>
18    <legend>Préférences de contact</legend>
19    <div>
20      <input type="radio" id="contact-email" name="contact-method" value="email">
21      <label for="contact-email">Par e-mail</label>
22    </div>
23    <div>
24      <input type="radio" id="contact-phone" name="contact-method" value="phone">
25      <label for="contact-phone">Par téléphone</label>
26    </div>
27  </fieldset>
28
29  <!-- Messages d'erreur -->
30  <div id="error-summary" role="alert" class="error-summary" style="display: none;">
31    <h2>Erreurs à corriger :</h2>
32    <ul id="error-list"></ul>
33  </div>
34
35  <button type="submit">Envoyer le formulaire</button>
36</form>

1/* Indicateurs de focus visibles */
2:focus {
3  outline: 2px solid #005fcc;
4  outline-offset: 2px;
5}
6
7/* Skip links pour navigation rapide */
8.skip-link {
9  position: absolute;
10  top: -40px;
11  left: 6px;
12  background: #000;
13  color: #fff;
14  padding: 8px;
15  text-decoration: none;
16  z-index: 1000;
17}
18
19.skip-link:focus {
20  top: 6px;
21}

1<!-- Skip link en début de page -->
2<a href="#main-content" class="skip-link">
3  Aller au contenu principal
4</a>
5
6<header>
7  <!-- Navigation -->
8</header>
9
10<main id="main-content" tabindex="-1">
11  <!-- Contenu principal -->
12</main>

1/* Exemples de contrastes conformes */
2.text-aa {
3  color: #595959; /* sur fond blanc = 4.5:1 */
4  background: #ffffff;
5}
6
7.text-aaa {
8  color: #404040; /* sur fond blanc = 7:1 */
9  background: #ffffff;
10}
11
12/* Contraste insuffisant à éviter */
13.text-bad {
14  color: #cccccc; /* sur fond blanc = 1.6:1 ❌ */
15  background: #ffffff;
16}