Menu Cette page présente le menu de navigation du site Web de la RAMQ, volet Citoyens. Description Le menu est constitué de 2 zones : la zone de bascule entre le volet Citoyens et la section des professionnels (fond gris), et le menu principal du volet Citoyens, incluant un lien vers Carnet santé Québec. En résolution d’écran MD et inférieure, les éléments de menu ainsi que les liens English et Nous joindre du bandeau d’en-tête du PIV sont remplacés par l’icône hamburger. Le menu s’ouvre au clic sur celui-ci et se referme au clic sur le X. Voir au haut de cette page l’exemple du composant en contexte. Accessibilité Quelques éléments doivent être pris en compte dans le menu afin qu’il soit accessible : Les deux zones du menu Elles se retrouvent dans une balise <nav> possédant l’attribut aria-label="Menu principal".La zone de bascule se retrouve dans une liste non ordonnée <ul><li> qui contient le menu principal sous forme de liste imbriquée <ul><li> dans l’item de liste Citoyens.Chaque item de liste se retrouve dans un lien <a>.Le lien représentant la page courante (celui avec le fond gris plus foncé dans la zone de bascule et celui avec la ligne rouge dans la zone du menu principal) contient un texte hors écran Section active. Exemple : <div class="link-container">Citoyens <span class="sr-only">Section active</span></div>. Menu principal L’icône est ignorée, placée seulement en CSS. Menu mobile L’attribut aria-expanded="true" se retrouve sur le bouton contenant l’icône hamburger.La valeur de cet attribut est à true si le menu est ouvert et à false si le menu est fermé.Le bouton possède l’attribut aria-controls="id de la navigation".Le bouton contient un texte hors écran Ouvrir le menu principal lorsque le menu est fermé et Fermer le menu principal lorsque le menu est ouvert.
