Iconographie Cette page présente l’ensemble des icônes et éléments graphiques utilisés dans le site Web de la RAMQ, volet Citoyens. Description Les éléments graphiques utilisés dans le site Web servent à la navigation, à l’information et à l’habillage visuel des contenus. Tous les éléments présents dans cette page sont rendus disponibles et peuvent être téléchargés en formats bitmap (PNG) et vectoriel (SVG). Certains éléments graphiques peuvent aussi être générés par l’utilisation de polices d’icônes, en autant que le résultat demeure le même que celui prévu à la conception visuelle. Menu principal et en-tête Québec drapeau Loupe recherche Ouvrir menu (hamburger) Fermer menu Assurance maladie Assurance médicament Programmes d’aide Absence du Québec Mon carnet de santé Services en ligne Événements de vie Naissance ou adoption 18e anniversaire Fin ou arrêt des études Nouvel emploi Nouveau couple Fin d’emploi ou absence temporaire Séparation ou divorce Déménagement Déménagement hors Québec Aide financière de dernier recours (aide sociale) 65e anniversaire Retraite Décès Services Service en ligne Services médicaux Services dentaires Services optométriques Services pharmaceutiques Joindre la RAMQ Par téléphone En personne (point de service) En ligne Par la poste Heures d’ouverture Ouvert (soleil) Fermé (lune) Points de service Coordonnées téléphoniques Coordonnées physiques Coordonnées Web Coordonnées courriel Punaise point de service Géolocalisation Actions Demander la révision d’une décision Déposer une plainte sur la qualité du service Dénoncer une personne ou une situation Poser une question d’ordre général ou écrire un commentaire Joindre la porte-parole Signaler un changement d’adresse Faire une plainte sur un contrat public Déclarer une absence du Québec Flèches Grosse flèche bleu foncé vide Grosse flèche bleu foncé Grosse flèche orange vide Grosse flèche orange Grosse flèche bleue Petite flèche bleu foncé vide Petite flèche bleu foncé Flèche suivant / retour bleue Flèche suivant / retour blanche Flèche accordéon (petit caret) Flèche carrousel (gros caret) Bas de page Facebook Twitter LinkedIn Point de service Nous écrire Téléphone Autres icônes Erreur du système Succès Attention Médicament couvert Médicament d’exception Infobulle Erreur formulaire Médicament non couvert (inutilisé) Fermer fenêtre modale Loupe zoom sur image Donner votre avis Info gros blanc pour tuile Info gros bleu pour tuile (hover) Info pour avis dans l’entête Info pour encadré Moins (retirer) Plus (ajouter) Moins vide (retirer) Plus vide (ajouter) Document / média Document / média (hover) Téléchargement de document / média Joindre fichier Joindre fichier (hover) Joindre fichier (inactif) Supprimer Supprimer (hover) Supprimer (inactif) Carte de crédit Visa Carte de crédit MasterCard Avatar Accessibilité Selon son contexte d’utilisation, l’icône doit être ignorée si elle est décorative et comporter un texte de remplacement si elle est informative. Type d’icône Une icône est décorative si elle est présente pour des raisons esthétiques ou si un texte à proximité reprend mot pour mot ce qui se serait retrouvé dans le texte de remplacement. Une icône est informative si elle communique une information que doit percevoir l’utilisateur afin de comprendre et utiliser le contenu. Il existe plusieurs techniques afin de rendre une icône décorative ou informative. Icône décorative L’icône peut être ajoutée en CSS (background-image ou pseudo-élément)Si l’icône est une balise <img>, il faut lui ajouter un attribut alt vide (alt="") Icône informative Si l’icône est une balise img, il faut lui ajouter un attribut alt contenant une description de l’icône (alt="Description")Si l’icône est ajoutée par CSS :dans un élément ne pouvant recevoir le focus (span, div, etc.), il faut prévoir un texte hors écran contenant la description de l’icônedans un élément pouvant recevoir le focus (a, button, input, etc.), il est possible d’utiliser le texte hors écran, mais également l’attribut aria-label contenant la description de l’icône (aria-label="Description" qui est ajouté sur la balise a, button, input, etc.). L’attribut aria-label écrase tout le contenu présent à l’intérieur de la balise sur laquelle il se trouve, ce qui fait en sorte que le lecteur d’écran n’annonce que ce qui est contenu dans cet attribut.Si l’icône est un SVG inline, c’est-à-dire un SVG ajouté à même le code HTML de la page, il faut y lier la balise <title> et y ajouter un attribut role="img" :<svg aria-labelledby="svgTitle" role="img"> <title id="svgTitle">Titre du SVG, texte de remplacement qui sera lu</title></svg> Contraste Le taux de contraste entre une icône informative et son arrière-plan doit être d’au moins 3:1. Les icônes décoratives, quant à elles, n’ont pas à respecter un taux de contraste spécifique. Il s’agit toutefois d’une bonne pratique de respecter le même taux de contraste que celui des icônes informatives.
