Usages
Le composant Transcription permet de proposer une version textuelle du contenu d’une vidéo, d’un graphique, d’un audio, d’une image...
Il a pour objectif de rendre le contenu accessible aux personnes malvoyantes, sourdes, malentendantes, ou préférant la lecture au son ou à l’image.
Comportement général
Au clic sur le bouton, une fenêtre de dialogue s’ouvre et affiche la transcription textuelle complète du média.
Le contenu est lisible, scrollable si nécessaire, et la navigation clavier est entièrement gérée (focus dans la fenêtre, retour sur le bouton après fermeture).
Sur mobile, la transcription s’ouvre en plein écran afin d’assurer un confort de lecture optimal.
✅ Usage correct
- Placer systématiquement le bouton immédiatement sous le média.
- Utiliser un libellé clair comme « Lire la transcription textuelle ».
- Fournir une transcription complète, fidèle au contenu audio ou vidéo.
- Structurer le texte pour améliorer la lisibilité (paragraphes, respirations).
- Veiller à ce que la transcription reste lisible, accessible et correctement contrastée.
- Associer chaque bouton au média correspondant, surtout en présence de plusieurs vidéos sur une même page.
🚫 Usage incorrect
- Placer le bouton au-dessus du média ou dans une autre section de la page.
- Remplacer la transcription par un simple résumé.
- Intégrer la transcription directement dans la page lorsque le texte est long : cela peut perturber la lecture, en particulier sur mobile.
- Utiliser un élément non accessible comme un lien <a> sans rôle explicite.
- Désactiver le bouton (état disabled), ce qui limite l’accessibilité clavier.
Localisation
Le bouton doit toujours être positionné sous le média concerné, dans la même zone visuelle.
Il doit rester suffisamment proche pour que l’utilisateur comprenne immédiatement que la transcription correspond au contenu affiché au-dessus.