Transcription - 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" id="transcription-2147">
<button
class="fr-transcription__btn"
aria-expanded="true"
aria-controls="fr-transcription-collapse-transcription-2147"
data-fr-js-collapse-button="true"
>
Transcription
</button>
<div
class="fr-collapse fr-collapse--expanded"
id="fr-transcription-collapse-transcription-2147"
data-fr-js-collapse="true"
style="--collapse-max-height: none; --collapse: -210px"
>
<div class="fr-transcription__footer">
<div class="fr-transcription__actions-group">
<button
class="fr-btn--fullscreen fr-btn"
aria-controls="fr-transcription-modal-transcription-2147"
aria-label="Agrandir la transcription"
data-fr-opened="false"
id="button-2150"
data-fr-js-modal-button="true"
>
Agrandir
</button>
</div>
</div>
<div
id="fr-transcription-modal-transcription-2147"
class="fr-modal"
aria-labelledby="fr-transcription-modal-transcription-2147-title"
data-fr-js-modal="true"
>
<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"
data-fr-js-modal-body="true"
style="--modal-max-height: 719px"
>
<div class="fr-modal__header">
<button
class="fr-btn--close fr-btn"
aria-controls="fr-transcription-modal-transcription-2147"
id="button-2151"
title="Fermer"
data-fr-js-modal-button="true"
>
Fermer
</button>
</div>
<div class="fr-modal__content">
<h1
id="fr-transcription-modal-transcription-2147-title"
class="fr-modal__title"
>
Titre de la transcription
</h1>
<!-- données de test -->
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing,
<a
href="https://www.systeme-de-design.gouv.fr/"
target="_blank"
>link test</a
>
incididunt, ut labore et dolore magna aliqua. Vitae sapien
pellentesque habitant morbi tristique senectus et. Diam
maecenas sed enim ut. Accumsan lacus vel facilisis volutpat
est. Ut aliquam purus sit amet luctus. Lorem ipsum dolor sit
amet consectetur adipiscing elit ut.
</p>
<ul>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</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.