Contenu médias - Responsive medias

Les contenus médias désignent vos contenus photos et vidéos. Lorsqu’ils sont intégré à 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

  • une lien de transcription textuel - optionnel.


Image

 

1 2 3 4 5 6 7 <figure class="fr-content-media" role="group" aria-label="© Légende de l‘image"> <div class="fr-content-media__img"> <img src="/img/image.jpg" 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 ou non 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.

1 2 3 4 5 6 7 <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/image.jpg" 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 ou non 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.

1 2 3 4 5 6 7 <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/image.jpg" 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 ou non 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çaise (Atalan).


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

1 2 3 4 5 6 7 8 9 <div class="fr-content-media"> <div class="fr-responsive-vid"> <iframe title="titre de l’iframe" class="fr-responsive-vid__player" src="https://www.youtube.com/embed/HyirpmPL43I" width="100%" height="100%" frameborder="0" 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>

 

Ratio 4:3 :

1 2 3 4 5 6 7 8 9 <div class="fr-content-media"> <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>

 

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 :

 

1 2 3 4 5 6 7 8 9 <div class="fr-content-media fr-content-media--lg"> <div class="fr-responsive-vid"> <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>

 

Exemple de vidéo LG format 4/3 :

1 2 3 4 5 6 7 8 9 <div class="fr-content-media fr-content-media--lg"> <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>

 

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 :

1 2 3 4 5 6 7 8 9 <div class="fr-content-media fr-content-media--sm"> <div class="fr-responsive-vid"> <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>

 

Exemple de vidéo SM format 4/3 :

1 2 3 4 5 6 7 8 9 <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é

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 (https://www.vie-publique.fr/bd/272944-simone-veil-la-loi-sur-lavortement-episode-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 :