Image avec bas de vignette Cette page présente les règles d’affichage pour les images informatives (qui ne sont pas des icônes) utilisées dans le site Web de la RAMQ, volet Citoyens. Description L’utilisation d’une photographie ou d’une illustration permet d’appuyer le contenu textuel dans une page en lui apportant de la profondeur ou de l’information visuelle complémentaire. Image standard Si nécessaire, un bas de vignette peut accompagner l’image. Le bas de vignette est centré par rapport à l’image, et ne doit jamais la dépasser en largeur. (Texte qui précède une image avec bas de vignette ) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Ceci est un bas de vignette. Lorem ipsum lien hypertexte dolor sit amet, consectetur texte en italique elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Texte en gras veniam, quis nostrud. (Texte qui suit une image avec bas de vignette) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Portrait Pour un portrait (à titre d’exemple : dans une page de présentation d’une équipe de direction), il est prévu d’afficher l’image et le bas de vignette d’une manière un peu différente. De plus, si une personne n’a pas de photo, son portrait est remplacé par l’icône « avatar ». Portrait principal Marco ThibaultPrésident-directeur généralEntrée en fonction le 20 août 2018 Portraits secondaires Mélanie Hillinger Vice-présidente à l’administration et au soutien à l’innovation Entrée en fonction le 6 mai 2019 Accessibilité Comme les images possèdent un bas de vignette, il faut inclure l’image et le bas de vignette dans une balise <figure>. Le texte du bas de vignette se retrouve dans une balise <figcaption>. La balise <figcaption> se retrouve dans la balise <figure>. Selon le contexte d’utilisation de l’image, elle doit être ignorée si elle est décorative et comporter un texte de remplacement si elle est informative. Type d’image Une image est décorative si elle est présente pour des raisons esthétiques, n’apporte aucune information pertinente ou si un texte à proximité reprend mot pour mot ce qui se serait retrouvé dans le texte de remplacement. Une image est informative si elle communique une information que doit percevoir l’utilisateur afin de comprendre et utiliser le contenu. Image décorative Il faut ajouter un attribut alt vide (alt="") sur la balise <img>. Image informative Il faut ajouter un attribut alt contenant une description de l’image (alt="Description") sur la balise <img>.
