🆕 Transcription
La transcription est présente directement sous le contenu concerné, dans une zone à déployer au clic. La zone à déployer et le contenu doivent au maximum tenir sur un écran sans nécessiter de défilement.
Il est également possible de la consulter en plein écran dans une vue dédiée, via l’ouverture d’une modale.
Le composant reprend l’apparence et le fonctionnement d’un accordéon. Toutefois, la hauteur de celui-ci est fixe pour permettre aux utilisateurs d’avoir accès à la transcription en même temps que le média.
D’autre part, puisque ce composant reprend en parti les caractéristiques des accordéons, l’utilisateur a la possibilité de concevoir le composant par ses propres moyens en réutilisant le composant accordéon permettant l’ouverture intégrale du contenu.
Structure
Ce composant se présente directement sous le contenu concerné dans une zone à déployer.
Il comprend :
- Un label “Transcription” - obligatoire
- Un contenu - obligatoire
- Un sommaire - optionnel
- Un texte de transcription - obligatoire
- Un bouton “Agrandir“ d’ouverture en modale - obligatoire
<div class="fr-transcription">
<button class="fr-transcription__btn" aria-expanded="false" aria-controls="fr-transcription__collapse-transcription-1354">Transcription</button>
<div class="fr-collapse" id="fr-transcription__collapse-transcription-1354">
<dialog id="fr-transcription__modal-transcription-1354" class="fr-modal" role="dialog" aria-labelledby="fr-transcription__modal-transcription-1354-title">
<div class="fr-container fr-container--fluid fr-container-md">
<div class="fr-grid-row fr-grid-row--center">
<div class="fr-col-12 fr-col-md-10 fr-col-lg-8">
<div class="fr-modal__body">
<div class="fr-modal__header">
<button class="fr-btn--close fr-btn" aria-controls="fr-transcription__modal-transcription-1354" title="Fermer">
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1 id="fr-transcription__modal-transcription-1354-title" class="fr-modal__title">
Titre de la vidéo
</h1>
<!-- données de test -->
</div>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button class="fr-btn fr-btn--fullscreen" aria-controls="fr-transcription__modal-transcription-1354" data-fr-opened="false" title="">
Agrandir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</dialog>
</div>
</div>Bonne pratiques
- Afficher la transcription sur la même page que la vidéo (pour autoriser la lecture simultanée)
- Masquer la transcription quand celle-ci est longue, dans une zone à développer au clic ou sur une page séparée (modale) atteinte via un lien
Accessibilité
- Les contenus vidéos doivent être sous-titrés et accompagnés d’une transcription textuelle (RGAA).
- Les contenus seulement audios sont accompagnés d’une transcription textuelle (RGAA).
- Les images complexes (infographies, cartes, etc.) sont accompagnées d’une description détaillée (RGAA).
- Le bouton d’accès à la transcription doit se situer (visuellement et dans le code) juste avant ou après le média.
- La transcription doit reprendre l’intégralité des informations transmises par le média.