Boutons Cette page présente les boutons d’action du site Web de la RAMQ, volet Citoyens, et de l’écosystème Web de la RAMQ. Description des boutons d’action Un bouton d’action, comme le dit son nom, pose une action. Que ce soit une action principale, une action secondaire, un retour sur ses pas ou un appel à l’action (call-to-action), le choix du type de bouton doit correspondre à la logique établie par le designer UX. Bouton principal Bouton principal Principal icône droite Bouton secondaire Bouton secondaire Secondaire icône droite secondaire icône gauche Bouton désactivé Bouton désactivé Duo de boutons Lorsque 2 boutons d’action sont utilisés côte à côte, le bouton principal se situe toujours à la droite du bouton secondaire. Annuler Continuer Mini bouton Mini bouton Mini bouton Mini bouton Accessibilité des boutons d’action Les boutons indiquent à l’utilisateur qu’une action va s’exécuter (exemple : ouverture d’une fenêtre modale, envoi d’un formulaire). Ils sont codés avec des balises <button> ou <input> . Le libellé du bouton ne doit pas obligatoirement être explicite hors contexte, mais il doit décrire sa fonction (exemple : le bouton X permettant de fermer une fenêtre modale posséderait le libellé « Fermer »). Le libellé d’un bouton peut être ajouté de multiples façons : Directement dans le HTML du bouton, entre les balises <button> (exemple : <button>Fermer</button>)En texte hors écran, à l’intérieur des balises <button> (exemple : <button> <span class="visually-hidden">Fermer</span></button>)Dans l’attribut aria-label qui se retrouverait sur la balise <button> ou <input> (exemple : <button aria-label="Fermer">) Même si le bouton ouvre une nouvelle fenêtre ou un nouvel onglet, son libellé ne doit pas inclure l’icône de lien externe . Ce n’est plus une exigence des standards d’accessibilité Web. Il est toutefois important de spécifier ce comportement avec le texte hors écran « Ce lien s’ouvrira dans une nouvelle fenêtre. »
