Accessible Images & Media

<!-- ✅ Good: descriptive alt texts -->
<img src="laptop.jpg"
     alt="MacBook Pro 16 pouces, vue de face,
          écran ouvert montrant l'interface macOS" />

<!-- Decorative icon: empty alt, .sr-only for context -->
<img src="star-icon.svg" alt="" />
<span>
  <span class="sr-only">Note de </span>4.8/5
  <span class="sr-only"> étoiles</span> (127 avis)
</span>

<!-- Decorative icon in notification -->
<img src="success-icon.svg" alt="" />
<span>Commande confirmée !</span>

<!-- ✅ Good: accessible video with captions and controls -->
<video width="100%" height="200"
       controls
       preload="metadata"
       aria-describedby="video-description">
  <source src="demo.mp4" type="video/mp4">

  <!-- Captions for the hearing impaired -->
  <track kind="captions"
         src="captions.vtt"
         srclang="fr"
         label="Français"
         default>

  <!-- Audio descriptions for the visually impaired -->
  <track kind="descriptions"
         src="descriptions.vtt"
         srclang="fr"
         label="Description audio">

  <!-- Fallback with link to transcript -->
  Votre navigateur ne supporte pas la vidéo.
  <a href="transcript.html">Consulter la transcription</a>
</video>

<div id="video-description">
  Vidéo de 2 minutes présentant les fonctionnalités du MacBook Pro.
  Sous-titres en français disponibles.
</div>

<!-- ✅ Good: accessible chart with alternative data -->
<svg width="300" height="150"
     role="img"
     aria-labelledby="chart-title"
     aria-describedby="chart-desc">

  <title id="chart-title">Graphique en barres des ventes trimestrielles</title>
  <desc id="chart-desc">
    Évolution croissante des ventes sur 4 trimestres :
    Q1: 40k€, Q2: 60k€, Q3: 80k€, Q4: 100k€
  </desc>

  <!-- Chart bars -->
  <rect
    x="50"
    y="100"
    width="40"
    height="40"
    fill="#3b82f6"
  />
  <rect
    x="110"
    y="80"
    width="40"
    height="60"
    fill="#3b82f6"
  />
  <rect
    x="170"
    y="60"
    width="40"
    height="80"
    fill="#3b82f6"
  />
  <rect
    x="230"
    y="40"
    width="40"
    height="100"
    fill="#3b82f6"
  />

  <!-- Accessible labels -->
  <text x="70" y="130">Q1</text>
  <text x="130" y="130">Q2</text>
  <text x="190" y="130">Q3</text>
  <text x="250" y="130">Q4</text>
</svg>

<!-- Alternative table with all data -->
<table>
  <caption>Données détaillées des ventes trimestrielles</caption>
  <thead>
    <tr>
      <th scope="col">Trimestre</th>
      <th scope="col">Ventes (k€)</th>
      <th scope="col">Évolution</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Q1 2025</th>
      <td>40</td>
      <td>-</td>
    </tr>
    <!-- ... other rows -->
  </tbody>
</table>