Contenu médias - Responsive médias

Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégrés à une page de contenu, il est recommandé de suivre les règles décrites ci-dessous.

Structure

Les contenus médias se composent des éléments suivants:

  • un media, image, vidéo ou audio - obligatoire.
  • une légende - optionnelle.
  • un lien de transcription textuel - optionnel.

Image

[À MODIFIER - vide ou texte alternatif de l’image]
© Légende de l‘image
                <figure class="fr-content-media" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img class="fr-responsive-img fr-ratio-16x9" src="/img/placeholder.16x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>
                
              

Les trois tailles proposées pour les images

Si vous souhaitez accentuer la visibilité d'une image vous pouvez utiliser les différentes tailles à votre disposition :

  • LG : dans cette taille, la largeur de l’image est supérieure à celle du contenu.
  • MD : dans cette taille, la largeur de l’image correspond à celle du contenu.
  • SM : dans cette taille, la largeur de l’image est inférieure à celle du contenu.

Image taille LG (125%)

L’image est plus grande que la zone de texte

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image
<figure class="fr-content-media fr-content-media--lg" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img src="/img/placeholder.16x9.png" class="fr-responsive-img" alt="[À MODIFIER | texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présent, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Image taille SM (75%)

L’image est plus petite que la zone de texte.

[À MODIFIER | texte alternatif de l’image]
© Légende de l‘image
<figure class="fr-content-media fr-content-media--sm" role="group" aria-label="© Légende de l‘image">
    <div class="fr-content-media__img">
        <img src="/img/placeholder.16x9.png" class="fr-responsive-img" alt="[À MODIFIER | texte alternatif de l’image]" />
        <!-- L’alternative de l’image (attribut alt) doit toujours être présent, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
    </div>
    <figcaption class="fr-content-media__caption">© Légende de l‘image</figcaption>
</figure>

Texte alternatif des images

Il est important de bien choisir l’alternative d’image adéquate. Si l’image est illustrative, n’apportant pas d'éléments de compréhension supplémentaires par rapport au texte dans lequel elle se trouve, l’attribut alt doit être vide alt=””. Pour vous aider à faire le bon choix, n’hésitez pas à consulter l'arbre de décision alt du w3c (en anglais), ainsi que l'adaption en français (Atalan).

Images SVG

Les svg répondent aux même impératifs que les autres images concernant leur alternative textuelle. Si il est inséré via une balise img, l’attribut alt doit être présent, et doit être rempli ou non.

Pour les svg ‘inline’ , le principe est le même: il peut être porteur de sens (en contenant du texte, ou bien apportant des informations supplémentaire au contexte dans lequel il se trouve, voir l’arbre de décision) ou non porteur de sens.

Si le svg est porteur de sens il doit contenir les attribut role=”img” et aria-label contenant la description. <svg role=”img” aria-label=”[A modifier - titre ou texte contenu dans l’image]”>.

<figure class="fr-content-media" role="group" aria-label="Légende de l‘image">
    <div class="fr-content-media__img">
        <!-- Les SVG porteurs de sens doivent avoir l'attribut role="img" et être labeliser par l'attribut aria-label="[A modifier - titre ou texte contenu dans l’image]" -->
        <svg version="1.1" role="img" aria-label=”[A modifier - titre ou texte contenu dans l’image]”>
          (...)
        </svg>
    </div>
    <figcaption class="fr-content-media__caption">Légende de l‘image</figcaption>
</figure>

Si le svg n’est pas porteur de sens (icône ou illustration), ajouter un attribut aria-hidden.


        <svg version="1.1" aria-hidden="true">
          (...)
        </svg>

Ratios d’image

Le format par défaut conseillé des images est le 16:9.
Toutefois d’autres ratios (4:3, 32:9, etc.) sont disponibles : voir la section Ratios dans les fondamentaux.

Vidéo

Lorsqu’une vidéo est intégrée dans un contenu éditorial, elle est présentée par défaut en format 16:9 et peut intégrer une légende et un lien pour afficher la transcription. L’Iframe générée par l’hébergeur de la vidéo peut être différent du ratio par défaut de 16:9.

Il est possible d’opter pour un format 4:3 de la vidéo, à l’aide du modifier .fr-responsive-vid--4x3.

Note : le DSFR fournit uniquement le HTML et CSS du lien “Afficher la transcription”. La fonctionnalité d’affichage de la transcription (ouverture d’une nouvelle page ou apparition du texte) n’est pas gérée et devra être ajoutée.

Ratio 16:9

© Légende de la vidéo
                <div class="fr-content-media">
    <iframe title="Titre de l'iframe" class="fr-responsive-vid " src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Ratio 4:3

© Légende de la vidéo
                <div class="fr-content-media">
    <iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Les trois tailles proposées pour les vidéos

Si vous souhaitez accentuer la visibilité d'une vidéo vous pouvez utiliser les différentes tailles à votre disposition.

  • LG : dans cette taille, la largeur de la vidéo est supérieure à celle du contenu.
  • MD : dans cette taille, la largeur de la vidéo correspond à celle du contenu.
  • SM : dans cette taille, la largeur de la vidéo est inférieure à celle du contenu.

Vidéo taille LG (125%)

La vidéo est plus grande que la zone de texte.

Exemple de vidéo LG format 16/9 :

© Légende de la vidéo
                <div class="fr-content-media fr-content-media--lg">
    <iframe title="Titre de l'iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Exemple de vidéo LG format 4/3 :

© Légende de la vidéo
                <div class="fr-content-media fr-content-media--lg">
 <iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Vidéo taille SM (75%)

La largeur de la vidéo est plus petite que la zone de texte.

Exemple de vidéo SM format 16/9 :

© Légende de la vidéo
                <div class="fr-content-media fr-content-media--sm">
  <iframe title="Titre de l'iframe" class="fr-responsive-vid" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Exemple de vidéo SM format 4/3 :

© Légende de la vidéo
                <div class="fr-content-media fr-content-media--sm">
  <iframe title="Titre de l'iframe" class="fr-responsive-vid fr-ratio-4x3" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <button class="fr-btn">
            Label du bouton de la transcription
        </button>
    </div>
</div>
                
              

Exemple de vidéo SM format 4/3 :

© Légende de la vidéo
                <div class="fr-content-media fr-content-media--sm">
    <div class="fr-responsive-vid fr-responsive-vid--4x3">
        <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
    </div>
    <div class="fr-content-media__caption">© Légende de la vidéo</div>
    <div class="fr-content-media__transcription">
        <a class="fr-link" href="[url - à modifier]">Label du bouton de la transcription</a>
    </div>
</div>
                
              

Règles d’utilisation

Usages

  • Utilisez des images et vidéos qui véhiculent un message clair.
  • Veillez à homogénéiser le style graphique de vos images et vidéos.
  • Utilisez exclusivement des images, photos et vidéos libres de droit ou veillez à vous acquitter des droits.

Accessibilité et traitement des alternatives

  • Si l'image n'apporte pas d'information essentielle à la compréhension du contenu, utiliser une alternative vide : alt="". (Ressources d’aide à la décision en anglais et en français).
  • Si l'image apporte une information essentielle à la compréhension du contenu, renseigner l'alternative avec l'information nécessaire : alt="@alternative". (Ressources d’aide à la décision en anglais et en français).
  • Chaque image complexe a si nécessaire une description détaillée adjacente. Exemple : Simone Veil : la loi sur l'avortement. Épisode 2.
  • Si une balise figure possède une légende dans une balise figcaption, elle doit également avoir un attribut aria-label reprenant le texte du figcaption.

Vidéo ou audio

  • La lecture ne commence pas sans le contrôle de l’utilisateur.
  • Le lecteur est utilisable au clavier selon un ordre logique.
  • La transcription textuelle est pertinente, accessible et adjacente à l'élément vidéo ou audio.
  • Les vidéos (hors direct) sont sous-titrées.

Personnalisation

Le style de ce composant n’est pas personnalisable.

Toutefois, certains éléments sont optionnels - voir la structure du composant.

Besoin d'aide ?

L'équipe du DSFR est là pour vous aider.

Retrouvez-la sur :