🆕 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.