Médias accessibles

Accessibilité des images

Les images doivent toujours avoir un attribut alt pour l’accessibilité.

L’attribut alt

L’attribut alt décrit l’image pour :

• Les personnes utilisant un lecteur d’écran
• Les situations où l’image ne se charge pas
• Les moteurs de recherche

<!-- Image décorative : alt vide -->
<img src="decoration.png" alt="">

<!-- Image informative : alt descriptif -->
<img src="leo-souriant.jpg" alt="Léo souriant avec son sac à dos rouge">

<!-- Image lien : alt décrit la destination -->
<a href="/chapitres">
  <img src="bouton-chapitres.png" alt="Voir tous les chapitres">
</a>

Règles pour de bons alt

✅ À faire :

• Décrire l’image de manière concise
• Inclure l’information importante de l’image
• Laisser vide (alt="") si l’image est purement décorative

❌ À éviter :

• “Image de…” ou “Photo de…” (redondant)
• Descriptions trop longues
• Laisser l’attribut alt absent

<!-- ❌ Mauvais -->
<img src="leo.jpg" alt="Image de Léo">
<img src="leo.jpg">

<!-- ✅ Bon -->
<img src="leo.jpg" alt="Léo tenant une carte au trésor">
<img src="decoration.svg" alt="">

Comment savoir si une image est décorative ?

Posez-vous cette question : “Si je ne voyais pas cette image, est-ce que je perdrais une information importante ?”

• Non → Image décorative → alt=""
• Oui → Image informative → Décrivez l’information

---

Attributs width et height

Ajoutez toujours les dimensions de vos images :

<img
  src="leo.jpg"
  alt="Léo dans la forêt"
  width="800"
  height="600"
>

Pourquoi width et height ?

Ces attributs permettent au navigateur de réserver l’espace nécessaire à l’image avant son chargement, évitant ainsi les sauts de mise en page (améliore l’expérience utilisateur).

---

Figures avec légendes

Pour associer une légende à une image, utilisez <figure> et <figcaption> :

<figure>
  <img src="carte-tresor.jpg" alt="Carte au trésor ancienne">
  <figcaption>
    La carte que Léo a trouvée dans le grenier
  </figcaption>
</figure>

Avantages :

• Associe sémantiquement l’image et sa légende
• Les lecteurs d’écran peuvent annoncer qu’il y a une légende
• Facilite le style CSS

---

Vidéos accessibles

Pour intégrer une vidéo de manière accessible :

<video controls width="100%">
  <source src="intro.mp4" type="video/mp4">
  <source src="intro.webm" type="video/webm">
  <p>Votre navigateur ne supporte pas la vidéo.
     <a href="intro.mp4">Téléchargez-la ici</a>.
  </p>
</video>

Bonnes pratiques pour les vidéos

✅ À faire :

• Toujours inclure l’attribut controls pour permettre la lecture/pause
• Fournir plusieurs formats (mp4, webm) pour la compatibilité
• Ajouter un message de fallback pour les navigateurs anciens
• Idéalement : ajouter des sous-titres avec <track>

<video controls>
  <source src="chapitre1.mp4" type="video/mp4">
  <track
    kind="subtitles"
    src="chapitre1-fr.vtt"
    srclang="fr"
    label="Français"
  >
</video>

Accessibilité des vidéos

Pour une vidéo vraiment accessible, vous devriez fournir :

• Des sous-titres
• Une transcription textuelle
• Une audiodescription si la vidéo contient des éléments visuels importants

---

Audio accessible

Pour intégrer de l’audio (musique, effets sonores, narration) :

<audio controls>
  <source src="musique-chapitre1.mp3" type="audio/mpeg">
  <source src="musique-chapitre1.ogg" type="audio/ogg">
  <p>Votre navigateur ne supporte pas l'audio.</p>
</audio>

Avec une transcription

Si votre audio contient des paroles ou des informations importantes :

<figure>
  <figcaption>Narration du Chapitre 1</figcaption>
  <audio controls>
    <source src="narration-chapitre1.mp3" type="audio/mpeg">
  </audio>
  <details>
    <summary>Voir la transcription</summary>
    <p>
      "Il était une fois, dans un petit village,
      un garçon nommé Léo qui rêvait d'aventure..."
    </p>
  </details>
</figure>

---

Les liens accessibles

Textes de liens explicites

Les liens doivent être compréhensibles hors contexte.

<!-- ❌ Mauvais -->
<p>Pour lire la suite, <a href="/chapitre2">cliquez ici</a>.</p>

<!-- ✅ Bon -->
<p>Vous pouvez maintenant <a href="/chapitre2">lire le chapitre 2</a>.</p>

Pourquoi ? Les lecteurs d’écran ont une fonctionnalité pour lister tous les liens d’une page. Si tous vos liens disent “cliquez ici”, l’utilisateur ne saura pas où ils mènent.

Attribut title (optionnel)

L’attribut title ajoute une info-bulle. Utilisez-le pour des précisions supplémentaires.

<a href="/chapitre2" title="Chapitre 2 : La forêt mystérieuse">
  Chapitre suivant
</a>

Attention

N’utilisez pas title comme remplacement de alt pour les images. Les lecteurs d’écran ne lisent pas toujours l’attribut title.

Liens externes

Indiquez quand un lien ouvre un site externe ou une nouvelle fenêtre.

<a href="https://wikipedia.org" target="_blank" rel="noopener noreferrer">
  En savoir plus sur Wikipedia (ouvre dans un nouvel onglet)
</a>

Bonnes pratiques :

• Utilisez target="_blank" avec rel="noopener noreferrer" pour la sécurité
• Indiquez dans le texte que le lien s’ouvre dans un nouvel onglet
• Ou utilisez une icône ↗ pour l’indiquer visuellement

---

Récapitulatif

Images

• ✅ Toujours un attribut alt
• ✅ alt="" pour les images décoratives
• ✅ Description concise pour les images informatives
• ✅ Ajoutez width et height

Figures

• ✅ Utilisez <figure> + <figcaption> pour associer une image et sa légende

Vidéos

• ✅ Attribut controls
• ✅ Plusieurs formats (mp4, webm)
• ✅ Message de fallback
• ✅ Sous-titres si possible

Audio

• ✅ Attribut controls
• ✅ Plusieurs formats (mp3, ogg)
• ✅ Transcription si contenu important

Liens

• ✅ Texte explicite (“Lire le chapitre 2” pas “cliquer ici”)
• ✅ Indiquez les liens externes
• ✅ rel="noopener noreferrer" pour target="_blank"