Accordéons et tiroirs Cette page présente les différents styles d’accordéons et de tiroirs utilisés dans le site Web de la RAMQ, volet Citoyens. Dans cette page AccordéonsTiroirs Description des groupes accordéon Les groupes accordéon sont des composants dynamiques qui permettent d’optimiser l’affichage d’un contenu dans un espace réduit grâce à un système « plier/déplier » appliqué sur un groupe de panneaux. Ils sont contrôlables par une action sur le bouton qui surplombe le contenu de chaque panneau. Un seul panneau peut être ouvert à la fois dans chaque groupe accordéon et ils sont tous fermés par défaut. Accordéon standard Ce modèle de groupe accordéon s’insère n’importe où entre le titre et la fin de la zone de contenu. Les boutons sont balisés sous forme de <h>, selon la sémantique de la page. L’aspect visuel de la typographie ne doit pas changer, que les boutons soient balisés en <h2>, <h3> ou autre <h>. Ceci est un bouton d’accordéon 1 de 3 Ceci est le contenu du panneau 1 de 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus ligula ac est eleifend pulvinar. Aliquam cursus, dui et porta vulputate, enim diam faucibus justo, eu gravida mi mi id purus. Ceci est un bouton d’accordéon 2 de 3 Ceci est le contenu du panneau 2 de 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus ligula ac est eleifend pulvinar. Aliquam cursus, dui et porta vulputate, enim diam faucibus justo, eu gravida mi mi id purus. Titre de l’encadré Texte d’encadré pour information mineure Ceci est un bouton d’accordéon 3 de 3 Niveau de titre Ceci est le contenu du panneau 3 de 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus ligula ac est eleifend pulvinar. Aliquam cursus, dui et porta vulputate, enim diam faucibus justo, eu gravida mi mi id purus. Une image peut se trouver dans un panneau. Mini accordéon Un style de mini accordéon a été développé pour la section des heures d’ouverture du service téléphonique de la page Nous joindre du portail citoyen. Cet accordéon peut être consulté dans la colonne de gauche de cette page. Ce mini accordéon permet de publier une information tout en optimisant l'espace de la page, car l'accordéon est fermé par défaut. Par conséquent, ce style peut être utilisé lorsqu'un accordéon est nécessaire et que l'espace disponible est restreint. Accordéon FAQ Un groupe accordéon a été développé expressément pour les questions fréquentes. Il est positionné au bas d’une page de contenu. Il se distingue par un filet orange placé au-dessus qui le sépare du reste du contenu. Frequently asked questions Description des tiroirs Les différents types de tiroirs sont constitués d’un seul bouton et d’un seul panneau. Tiroir standard Ce modèle de tiroir se retrouve dans les pages de contenu, et s’insère n’importe où entre le titre et la fin de la zone de contenu. Il diffère des accordéons standards seulement par le fait qu’il est utilisé seul. Ceci est un bouton de tiroir 1 de 1 Ceci est le contenu du panneau 1 de 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus ligula ac est eleifend pulvinar. Aliquam cursus, dui et porta vulputate, enim diam faucibus justo, eu gravida mi mi id purus. Tiroir récapitulatif Ce modèle de tiroir se retrouve à la fin d’une page de résultat de navigation assistée. Il contient le récapitulatif des réponses données dans le formulaire. Voir vos réponses Question Réponse Question Réponse Recommencer Accessibilité Quelques éléments sont à considérer pour l’accessibilité d’un tiroir ou d’un accordéon : Le bouton du tiroir doit se trouver dans un titre de niveau suivant l’ordre hiérarchique de la page <h(n)> et non l’inverse.Le bouton du tiroir doit posséder l’attribut aria-expanded="false" lorsque le tiroir est fermé et aria-expanded="true" lorsque le tiroir est ouvert.Le bouton du tiroir doit posséder l’attribut aria-controls="id du panneau de contenu".
