Contenu médias (Content)

Utilisez le contenu média pour associer une image, une vidéo ou un média intégré à une légende.

attention

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

Information	Valeur
Niveau	Pro
Composants Twig	dsfr:media:content

Usage

• Renseignez toujours le texte alternatif des images informatives.
• Ajoutez une transcription pour les contenus audio ou vidéo.

Modes d'utilisation

Exemple principal

Contenu médias · exemple principal

<twig:dsfr:media:content
  src="/images/guichet.jpg"
  alt="Accueil d’un guichet administratif"
  caption="Accueil du public en mairie."
/>

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:media:content
  id="contenu-medias-example"
  class="fr-mt-2w"
  data-controller="contenu-medias"
/>

API publique

Composant	Rôle
dsfr:media:content	Composant principal de cette page.

Configuration

Option	Type	Défaut / requis	Valeurs et usage
src	string	Requis	URL du média.
alt	string	""	Texte alternatif.
caption	string|null	null	Légende visible.
sourceHref / sourceLabel	string|null	null	Lien de source.
transcriptionHref	string|null	null	Lien vers une transcription.
ariaLabel	string|null	null	Libellé accessible.
size	enum|null	null	sm, lg ou null.

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:media:content.
Documentation DSFR	Consultez aussi la bibliothèque officielle : Système de Design de l'État.

Contenu médias : options, accessibilité et rendu DSFR

Variantes de contenu médias

• tailles disponibles via size quand le DSFR expose une variante compacte ou large.

Points de contrôle propres à ce composant

• Renseignez toujours le texte alternatif des images informatives.
• Ajoutez une transcription pour les contenus audio ou vidéo.
• Gardez une légende explicite et cohérente avec les colonnes affichées.
• Renseignez une alternative textuelle utile pour les images informatives et vide pour les images décoratives.

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:media:content

• Ajoutez vos attributs applicatifs (data-controller, data-action, aria-*, class) sur dsfr:media:content quand ils concernent son nœud racine.

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.
Le composant rend en local mais pas en production	Vérifiez la licence avec php bin/console dsfr:license:validate.