Encadrés Cette page présente les différents styles d’encadrés utilisés dans le site Web de la RAMQ, volet Citoyens. Description Les encadrés d’information sont conçus pour mettre en évidence de courtes portions de contenu. Plusieurs encadrés d’information peuvent être utilisés dans une même page. Ils peuvent être affichés à travers les paragraphes de texte courant, dans une fenêtre modale, en appui à un formulaire, ou même dans un groupe d’accordéons. Un encadré traite d’un seul sujet et ne contient qu’un paragraphe de texte sur ce sujet. Si le texte de l’encadré est trop long, il perd en efficacité. Titre (facultatif) d’encadré important Texte d’encadré important lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Titre (facultatif) d’encadré pour information majeure Texte d’encadré pour information majeure lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Titre (facultatif) d’encadré pour information mineure Texte d’encadré pour information mineure lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi Texte d’encadré pour information discrète lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi. Quelques recommandations Utiliser ces composants avec parcimonie afin de ne pas diluer l’attention sur les éléments encadrés.Le titre de l’encadré est facultatif. S’il est utilisé, il doit être balisé selon le niveau de titre souhaité (h2, h3, etc.), mais ne doit pas changer d’allure visuellement.Éviter d’ajouter un titre autre que celui prévu à cet effet dans l’encadré.Il est possible d’ajouter au texte de l’encadré des liens hypertexte, du gras, de l’italique, et toute autre mise en forme prévue pour les paragraphes de texte.Il est permis, au besoin, d’ajouter une image dans l’encadré.Éviter de modifier l’icône d’information. Accessibilité Lorsqu’il y a un titre dans l’encadré, ce dernier doit être codé avec une balise <h(n)> en respectant l’ordre hiérarchique de la page, c’est-à-dire h1, h2, h3, h4, h5, h6. Lorsqu’un encadré comporte une icône ou une bordure de couleur qui communique une information, l’utilisateur de lecteur d’écran doit également percevoir cette information. La solution à privilégier est d’utiliser un texte hors écran au début de l’encadré (exemple : <span class="sr-only">Information importante </span><h3> Titre de l’encadré </h3>).
