Iconographie

Cette section offre un aperçu des contextes d’utilisation et des contenus. Pour plus d’informations sur la composition et les comportements, consulter l’onglet « Spécifications ».

Quand l’utiliser

Une icône est justifiée si elle remplit au moins deux des trois rôles suivants :

• Communiquer une information que le texte seul ne rendrait pas aussi clairement, par une représentation universellement reconnue.
• Attirer l’attention sur un élément qui doit être repéré avant même la lecture du texte ; son absence nuirait à la hiérarchie visuelle.
• Inviter à l’interaction en signalant sans équivoque qu’un élément est actionnable.

Les icônes sont déjà intégrées dans plusieurs composants du système de design. Consulter les fiches Boutons, Tuiles cliquables, Accordéon, Avis, Coordonnées, Liste déroulante, etc.

Accessibilité

Une icône peut autant aider que nuire à l’accessibilité : elle facilite la navigation pour les personnes ayant des difficultés de lecture ou une langue différente, mais une icône sans équivalent textuel est invisible aux lecteurs d’écran, et une icône ambiguë ou superflue ralentit la lecture. La règle à appliquer est précisée sous Contenus.

Quand ne pas l’utiliser

Il ne faut pas utiliser les icônes dans les contextes suivants :

• Lorsque l’icône est purement décorative et ne remplit aucun des rôles ci-dessus. Consulter la fiche Images pour les normes quant à l’utilisation des visuels photographiques ou illustratifs.
• Lorsque son sens est ambigu dans le contexte. Dans ce cas, privilégier le texte seul.
• Lorsque son utilisation surcharge l’interface ou nuit à la lisibilité.

Contenus

Cette section définit les règles et contraintes sur les types de contenus (textuels, graphiques, interactifs, etc.) acceptés par chaque élément de la base.

Sélection de l’icône

Source : sélectionner dans la bibliothèque Material Symbols, style Rounded uniquement.

Si aucune icône de la librairie ne convient, il est possible d’en créer une qui :

• s’inscrit visuellement dans le style Rounded de Material Symbols ;
• reste minimaliste ;
• demeure lisible à 16 px ;
• est monochrome, sauf sur l’accueil de Québec.ca.

Icône avec texte visible (cas par défaut) : toujours accompagner l’icône d’un texte adjacent.

Icône seule, sans texte visible (exception) : permis uniquement si :

• sa signification est universellement reconnue (exemple : bouton fermer « X », loupe de recherche, logos de réseaux sociaux en pied de page), ou
• elle fait partie d’un code visuel expliqué une seule fois dans son contexte (exemple : légende de tableau).

Dans tous les cas, ajouter un équivalent textuel accessible (aria-label). En cas de doute sur la reconnaissance universelle d’une icône, l’accompagner d’un texte visible.