Transcription (Transcription)

Utilisez une transcription pour rendre accessible le contenu textuel d’un média audio ou vidéo.

attention

Ce composant nécessite une licence Pro valide en production.

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:transcription

Usage

• Associez la transcription au média concerné.
• Le contenu doit reprendre les informations utiles du média.

Modes d'utilisation

Exemple principal

Transcription · exemple principal

<twig:dsfr:transcription
  id="video-transcription"
  title="Transcription de la vidéo"
  content="<p>Bonjour, cette vidéo présente les étapes de la démarche.</p>"
/>

Attributs HTML

Ajoutez vos attributs applicatifs directement sur le composant quand ils concernent le nœud racine rendu par le template.

Attributs pass-through

<twig:dsfr:transcription
  id="transcription-example"
  class="fr-mt-2w"
  data-controller="transcription"
/>

API publique

Composant	Rôle
dsfr:transcription	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
id	string	Selon composant	Identifiant HTML, normalisé et utilisé par aria-controls quand nécessaire.
title	string	Transcription	Titre du bloc.
modalTitle	string	Transcription	Titre de la modale plein écran.
content	string	Requis	Contenu textuel de transcription.

Guide d'intégration

Question	Réponse
Famille DSFR	Contenu
Quand l'utiliser	Quand vous présentez, organisez ou approfondissez un contenu éditorial ou métier.
Quand éviter	Pour les contrôles de formulaire ou la navigation principale, sauf si le composant expose explicitement cette interaction.
API publique	Utilisez uniquement les composants Twig listés sur cette page : dsfr:transcription.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Transcription : options, accessibilité et rendu DSFR

Variantes de transcription

• transcription avec attributs HTML pass-through pour id, class, data-* et aria-* quand le template le permet.

Points de contrôle propres à ce composant

• Associez la transcription au média concerné.
• Le contenu doit reprendre les informations utiles du média.

Accessibilité contenu

• Respectez la hiérarchie de titres de la page.
• Les images informatives ont un alt utile ; les images décoratives ont un alt vide.
• Les contenus masqués ou ouverts doivent rester pilotables au clavier.

Intégration Symfony/Twig pour dsfr:transcription

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:transcription quand ils concernent son nœud racine.
• Gardez des id prévisibles pour dsfr:transcription, surtout dans les listes ou formulaires répétés.

Checklist de recette

• ordre de lecture cohérent
• titres dans le bon niveau
• contenu disponible sans souris
• rendu vérifié en thème clair et sombre ;
• rendu vérifié sur mobile, tablette et desktop ;
• aucune erreur dans le profiler DSFR ni dans l'inspecteur d'accessibilité du navigateur.

Erreurs fréquentes

Symptôme	Correction
Les classes DSFR semblent incomplètes	Utilisez les props du composant plutôt que des classes ajoutées à la main.
Un panneau, menu ou état actif ne fonctionne pas	Vérifiez que le JavaScript DSFR est chargé et que les identifiants HTML sont uniques.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.