Images & Médias Accessibles

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

<!-- Icône décorative : alt vide, .sr-only pour contexte -->
<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>

<!-- Icône décorative dans notification -->
<img src="success-icon.svg" alt="" />
<span>Commande confirmée !</span>

<!-- ✅ Bon : vidéo accessible avec sous-titres et contrôles -->
<video width="100%" height="200"
       controls
       preload="metadata"
       aria-describedby="video-description">
  <source src="demo.mp4" type="video/mp4">

  <!-- Sous-titres pour les malentendants -->
  <track kind="captions"
         src="captions.vtt"
         srclang="fr"
         label="Français"
         default>

  <!-- Descriptions audio pour les malvoyants -->
  <track kind="descriptions"
         src="descriptions.vtt"
         srclang="fr"
         label="Description audio">

  <!-- Fallback avec lien vers transcription -->
  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>

<!-- ✅ Bon : graphique accessible avec données alternatives -->
<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>

  <!-- Barres du graphique -->
  <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"
  />

  <!-- Labels accessibles -->
  <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>

<!-- Table alternative avec toutes les données -->
<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>
    <!-- ... autres lignes -->
  </tbody>
</table>