Configurations de conception communes de Canada.ca

Cette section contient des configurations de conception communes qui peuvent être utilisées sur les différents modèles de page dans cette Spécification.

Pour les configurations de navigation des pages de destination, voir la section sur la navigation à l’intérieur d’une page.

Nom de la configuration Quand utiliser cette configuration Type de configuration Exemple concret – Dans une page Canada.ca Boîte à outils de l’expérience Web

Alertes contextuelles

Utiliser pour présenter de nouveaux renseignements importants devant être affichés dans un contexte pré-existant

Multimédia

 

BOEW : Alertes

Autres renseignements pour les

Utiliser pour lier à un public cible à l’échelle du gouvernement

Élément de page

Page de sujet

 

Avertissement superposé

Utiliser pour afficher les déclarations de confidentialité ou d’autres avertissements similaires

Interaction

 

BOEW : Lightbox

Bannière promotionnelle

Utiliser pour promouvoir les activités, initiatives, programmes et services des institutions ou à l’échelle du gouvernement

Multimédia

 

 

Bloc des réseaux de médias sociaux (fenêtre « Suivez »)

Utiliser pour permettre aux gens de suivre les comptes officiels de médias sociaux du gouvernement du Canada sur diverses plateformes de médias sociaux.

Élément de page

Page de sujet

 

Boutons

Utiliser pour inciter une personne à exécuter une action.

Interaction

 

BOEW : Boutons

Carrousels

Utiliser pour promouvoir de multiples activités, initiatives, programmes et services

Élément de page; Multimédia

Page de thème

BOEW : Carrousels (utilisez le style 2)

Ce que nous faisons

Utiliser pour lier à du contenu qui fournit des renseignements généraux ou des explications des activités du GC à l’appui de la création ou de l’amélioration des politiques publiques

Élément de page

Page de sujet

 

Collaborateurs

Utiliser pour lier aux institutions ou organisations qui soutiennent le contenu sur la page

Élément de page

Page de sujet

 

Contenu réductible

Utiliser pour cacher le contenu secondaire jusqu’à sa demande

Interaction

 

BOEW : contenu affichable/masquable

Coordonnées

Utiliser pour présenter les coordonnées dans les pages de Canada.ca

Élément de page

Page de coordonnées de l’institution

 

Diagrammes et graphiques

Utiliser comme techniques de visualisation permettant de communiquer des données ou des statistiques

Multimédia

 

BOEW : Graphiques

En demande

Utiliser pour présenter les tâches principales liées à la page sur laquelle elle se trouve

Élément de page

Page de sujet

 

Icônes

Utiliser comme des symboles pour signifier des actions à prendre ou des états

Multimédia

 

BOEW : Icônes

Images

Utiliser pour embellir ou rehausser un texte

Multimédia

 

BOEW : Images

Institution responsable

Utiliser pour fournir un lien vers l’institution responsable du contenu

Élément de page

Page de contenu

 

Liens connexes

Utiliser pour lier à du contenu se rapportant à la page

Élément de page

 

 

Liens de téléchargement

Utiliser pour renvoyer ou lier à des fichiers de format autre que HTML

Multimédia

Page de composantes

 

Multimédia (vidéo et audio)

Utiliser pour embellir ou rehausser un texte

Multimédia

 

BOEW : Lecteur multimédia

Nouveautés

Utiliser pour présenter les nouvelles les plus récentes

Élément de page

Page de profil institutionnel

 

Promotions contextuelles

Utiliser pour promouvoir les activités, initiatives programmes et services

Élément de page; Multimédia

Page de thème

 

Questions interactives

Utiliser pour présenter une séquence de questions simples qui mènent à la réponse précise dont elles ont besoin pour poursuivre leur tâche ou l’achever

Interaction

 

BOEW : Déroulement de champs

Services et renseignements

Utiliser pour présenter des ensembles de liens avec des descriptions connexes

Élément de page

Page de sujet

 

Tableaux de données

Utiliser pour communiquer des données

Multimédia

 

BOEW : Tableaux

Widget des réseaux de médias sociaux

Utiliser pour imbriquer les plus récents messages affichés sur les comptes de médias sociaux du gouvernement du Canada

Élément de page; Multimédia

Restez branché

 

Alertes contextuelles

Les alertes consistent en des boîtes d’avertissement présentant de nouveaux renseignements importants devant être affichés dans un contexte pré-existant.

Quand utiliser cette configuration

Servez-vous d’alertes contextuelles dans les situations suivantes :

  • attirer l’attention d’une personne sur un changement important à l’échelle de la page ou de la sous-section (par exemple interruptions du service ou du site, changements récemment apportés à un processus ou service);
  • fournir une rétroaction en réponse à une mesure prise par l’utilisateur (confirmer le succès, signaler des erreurs à une personne, etc.).

N’utilisez pas d’alertes contextuelles :

  • pour fournir des renseignements à propos d’une étape normale d’un processus ou d’une tâche;
  • simplement pour insister sur un élément de contenu.

Comment utiliser cette configuration

  • L’endroit où l’alerte sera placée dépendra du contexte. Veuillez suivre les spécifications suivantes :
    • Si l’alerte vise l’ensemble du site, placez-la en haut de la page, au-dessus de l’en-tête principal.
    • Si l’alerte ne vise que la page, placez-la en dessous de l’en-tête de la page.
    • Lorsque l’alerte ne concerne qu’une sous-section de la page, placez-la à l’endroit qui convient le mieux à l’intérieur de cette sous-section (sous l’en-tête de la sous-section ou entre deux paragraphes par exemple).
  • Ajoutez à l’alerte un style selon l’importance du contenu en suivant les combinaisons de couleurs suivantes :
    • Bleu—pour du contenu informatif, par exemple renseignements pertinents ou des conseils utiles
    • Vert—pour indiquer que l’action a réussi, par exemple confirmer la transmission d’une demande ou l’exécution d’une tâche
    • Jaune—pour donner des avertissements, par exemple des interruptions ou des problèmes concernant les systèmes
    • Rouge—pour avertir une personne en cas d’erreurs, par exemple la transmission invalide de données dans un formulaire
  • N’utilisez que les styles d’alerte de la BOEW.
  • Le contenu est rédigé afin d’atteindre un auditoire ayant un niveau de scolarité secondaire (pointage de 100 et moins dans Scolarius).

Exemple concret

Exemple

Graphique 1. Configuration d’« Alertes contextuelle »
Capture d’écran illustrant le modèle des alertes contextuelles dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Autres renseignements pour les

Quand utiliser cette configuration

  • Elle sert à se connecter à une page connexe d’un public cible à l’échelle du gouvernement ou à une page de sujet d’un public cible.

Comment utiliser cette configuration

  • Elle sert à relier la page de sujet à une page connexe d’un public cible à l’échelle du gouvernement ou à une page de sujet d’un public cible. Les publics cible à l’échelle du gouvernement sont :
    • les peuples autochtones;
    • les jeunes;
    • les anciens combattants.
  • Pour plus de détails sur les publics cibles du gouvernement du Canada, allez à Pages des publics cibles.
  • L’étiquette de l’en-tête est « Autres renseignements pour les ».

Exemple concret

Exemple

Graphique 2. Modèle « Autres renseignements pour les »
Capture d’écran illustrant les renseignements supplémentaires pour le modèle dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Avertissement superposé

Le motif d’avertissement superposé garantit que les conditions d’utilisation, les déclarations de confidentialité et les formulaires similaires d’avertissement sont disponibles au besoin, mais n’empêche pas l’accès au contenu principal de la page. Elle comprend un lien déclencheur qui active une fenêtre qu’on peut ignorer lorsque le texte d’avertissement s’affiche.

Quand utiliser cette configuration

  • Utilisez la fenêtre superposée lorsque des énoncés d’avertissement (déclarations de confidentialité, conditions d’utilisation, entre autres) sont nécessaires, pour éviter de fournir des liens vers l’extérieur de la page en cours.
  • Ne l’utilisez jamais pour un contenu qui est essentiel pour achever la tâche principale de la page.

Comment utiliser cette configuration

  • Étiquetez le lien déclencheur avec « Avis », « Déclaration de confidentialité », ou autre.
  • Une fois déclenchée, la fenêtre affiche le contenu d’avertissement dans une fenêtre secondaire (dialogue modal).
  • Les fenêtres d’avertissement doivent comprendre une seule action, qui est de fermer la fenêtre – cette action est activée par un « X » sur lequel on peut cliquer dans le coin supérieur droit et un bouton étiqueté « Fermer » en bas de la fenêtre.
  • La fermeture de la fenêtre retourne la personne à la page contenant le lien qui a été utilisé pour l’activer.
  • Jusqu’à la fermeture de la fenêtre d’avertissement, la fenêtre sous la fenêtre d’avertissement est inerte; les personnes ne peuvent pas interagir avec le contenu à l’extérieur de la fenêtre d’avertissement (pour éviter des problèmes d’interprétation du contenu affiché avec la technologie d’assistance).
  • Utilisez seulement le contenu superposé centré (Lightbox) de la BOEW pour ce modèle.

Exemple concret

Exemple

Graphique 13. Modèle d’avertissement superposé
Capture d’écran illustrant le contenu superposé centré de la Boîte à outils de l’expérience Web (BOEW), utilisé pour afficher des avertissements et des renseignements juridiques sur le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Bannière promotionnelle

Les bannières promotionnelles sont des composantes d’intérieur de page qui servent à promouvoir des activités, des initiatives, des programmes et des services à l’échelle du gouvernement et institutionnels.

Quand utiliser cette configuration

  • Utiliser cette composante afin de promouvoir des activités et des initiatives pertinentes et d’actualité.
  • Utiliser cette composante uniquement sur des pages de navigation ou d’accueil, mais non sur des pages de destination.
  • Ne pas utiliser cette composante lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).
  • Ne pas reproduire le contenu d’autres composantes promotionnelles de la page.

Comment utiliser cette configuration

  • Les bannières thématiques promotionnelles sont des composantes pleine largeur et à hauteur réduite qui englobent du texte, des images et des liens.
  • Le nombre de caractères pour l’ensemble du texte (étiquettes de liens comprises) est limité à 65.
  • Le texte et les images doivent être liés, mais tous les liens de la bannière thématique doivent ponter vers la même destination. Autre option : le contenant entier doit fonctionner comme une même zone de lien.
  • Les éléments textuels doivent être codés en HTML. Il ne faut pas imbriquer le texte dans l’image.
  • Pour garantir le fonctionnement à diverses tailles d’écran, ne pas utiliser d’image statique unique pour cette composante.
  • Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.
  • Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

Exemple

Graphique 3. Modèle de bannière des articles promotionnels
Capture d’écran illustrant le modèle de bannière des articles promotionnels dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Bloc des réseaux de médias sociaux (fenêtre « Suivez »)

Le bloc des réseaux de médias sociaux (fenêtre « Suivez ») est une composante d’intérieur de page qui permet aux gens de suivre les comptes officiels de médias sociaux du gouvernement du Canada sur diverses plateformes de médias sociaux.

Quand utiliser cette configuration

  • Utilisez cette fenêtre lorsque les comptes de médias sociaux du GC sont pertinents dans le contexte actuel.
  • Ne pas utiliser cette composante lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).
  • Ne pas reproduire le contenu d’autres composantes promotionnelles de la page.

Comment utiliser cette configuration

  • La fenêtre « Suivez : » des réseaux de médias sociaux comprend l’en-tête « Suivez : » et des icônes pointant vers les comptes officiels de médias sociaux du GC ou les fils RSS qui sont pertinents pour la page.
  • Les comptes indiqués dans la boîte Suivre doivent respecter la Directive sur la Gestion des communications dans son entièreté.
  • Aligner un maximum de sept icônes sur une même ligne horizontale en utilisant le jeu d’icônes standard sous le thème de la BOEW de Canada.ca.
  • Utiliser une seule icône pour chaque plateforme de médias sociaux. S’il y a plus d’un compte pour une même plateforme :
    • énumérez-les dans un menu déroulant cliquable;
    • prévoyez un maximum de huit liens de texte en utilisant les noms des comptes comme étiquettes;
    • s’il faut plus de huit liens, prévoir un lien « Tout afficher » comme dernier élément de la liste. Ce lien doit pointer vers la rubrique pertinente de la galerie de médias sociaux de Canada.ca, où tous les comptes pertinents seront énumérés.
  • Positionner la fenêtre « Suivez : » de manière à ne pas masquer le contenu primaire de la page.
  • Accentuer la forme de la fenêtre de cette composante à l’aide d’une couleur d’arrière-plan plus sombre que l’arrière-plan environnant de la page.
  • Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.

Exemple concret

Exemple

Graphique 4. Modèle de bloc des réseaux de médias sociaux (boîte « Suivre »)
Capture d’écran illustrant le modèle de bloc des réseaux de médias sociaux (boîte « Suivre ») dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Boutons

Les boutons sont des objets cliquables incitant une personne à exécuter une action.

Quand utiliser cette configuration

Servez-vous d’un motif de bouton pour exécuter des mesures ou des commandes qui modifieront l’état du système en aval ou en amont (par exemple « Ajouter un commentaire », « Soumettre », « Envoyer »).

Utiliser des boutons pour :

  • aider une personne à amorcer ou à mener à bien une transaction (un bouton « Rétroaction », par exemple);
  • invoquer une fonction « Partager cette page », par exemple.
  • offrir un ensemble permanent de commandes d’interface utilisateur dans une série de page, par exemple « précédent », « suivant », ou « retour à la table des matières »

Ne pas utiliser des boutons lorsque :

  • un lien de texte ordinaire fera tout autant l’affaire, comme lorsqu’on fournit un simple lien unique vers une autre page

On utilise les boutons pour activer des commandes de système, ou pour attirer l’attention sur des actions importantes sur la page. Limitez leur utilisation en conséquence, pour éviter que leur efficacité visuelle en soit diminuée.

Comment utiliser cette configuration

  • Utilisez une couleur de bouton à contraste élevé pour les actions principales et essayez de n’avoir qu’une seule action principale par page.
  • Utilisez seulement les principaux boutons d’action lorsqu’ils représentent vraiment l’action principale sur la page
    • par exemple, ne l’utilisez jamais pour « renseignements supplémentaires » ou « voir notre FAQ ».
  • Lorsque cela est possible, évitez d’utiliser une action secondaire
    • si une action secondaire s’impose, optez pour une couleur d’arrière-plan ayant un contraste moins élevé que celle de l’action principale.
  • Sur les formulaires, évitez d’inclure des boutons non reliés en bas de la page comme « Partagez cette page ».
  • Laissez suffisamment d’espace de chaque côté des boutons. Ne les placez pas sur la même ligne que du texte.
  • La justification à gauche est la justification par défaut.
  • N’utilisez que les styles de bouton de la BOEW.

Exemple concret

Exemple

Graphique 5. Modèle de bouton
Capture d’écran illustrant le modèle de bouton dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Carrousels

Les carrousels adaptifs sont des composantes d’intérieur de page servant à promouvoir de multiples activités, initiatives, programmes et services différents dans le même espace de contenu.

Quand utiliser cette configuration

  • Utiliser cette composante afin de promouvoir des activités et des initiatives pertinentes et d’actualité.
  • Ne pas utiliser cette composante lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).
  • Ne pas reproduire le contenu d’autres composantes promotionnelles de la page.

Comment utiliser cette configuration

  • Les carrousels adaptifs regroupent entre deux et quatre diapositives défilantes qui se réinitialisent lorsque la page est chargée. Ils comportent des contrôles permettant à l’utilisateur de faire défiler les diapositives manuellement ou de façon automatique.
  • Les contrôles par défaut pour faire défiler les diapositives sont des onglets pour les grands écrans et des boutons « suivante/précédente » avec un message « article X de Y » pour les petits écrans.
  • En mode automatique, le défilement commence par la diapositive 1.
  • En mode automatique, les diapositives défilent à 9 secondes d’intervalle.
  • Par défaut, le passage d’une diapositive à l’autre se fait par défilement horizontal à partir de la bordure de droite.
  • La taille des carrousels peut varier, allant d’une seule colonne à la pleine largeur de l’écran.
  • Chaque diapositive combine du texte et des images, auquel on peut ajouter un bouton de lien.
  • Le texte et les images doivent comporter des liens, mais tous les liens de la diapositive du carrousel doivent pointer vers la même destination.
  • Tout appel à l’action doit être décrit dans le texte de l’hyperlien ou le bouton de lien.
  • Le nombre de caractères pour l’ensemble du texte d’une diapositive de carrousel (étiquettes de liens comprises) est limité à 65.
  • Les éléments textuels doivent être codés en HTML. Il ne faut pas imbriquer le texte dans l’image.
  • Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.
  • Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

Exemple concret

Exemple

Graphique 6. Modèle de carrousel
Capture d’écran illustrant le modèle de carrousel pleine largeur dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Ce que nous faisons

Ce que nous faisons est un modèle qui présente des liens vers du contenu qui fournit des renseignements généraux ou des explications des activités du GC à l’appui de la création ou de l’amélioration des politiques publiques.

Quand utiliser cette configuration

Comment utiliser cette configuration

Exigences en matière de contenu

  • Étiquetez l’en-tête « Ce que nous faisons »
  • Organisez les liens par type de contenu; étiquetez les sous-en-têtes seulement à l’aide des noms de type de contenu (voir les types de contenu pour le site Canada.ca)
  • Fournissez des liens pour les types de contenu suivants uniquement :
    • Dans la catégorie Recherche, statistiques et données :
      • Évaluations
      • Ensembles de données
      • Recherche
      • Statistiques
      • Sondages
    • Dans la catégorie Consultations et mobilisation :
      • Consultations
    • Dans la catégorie Nouvelles, promotions et sensibilisation du public :
      • Documents d’information
      • Communiqués de presse
      • Discours
      • Déclarations
    • Dans la catégorie Renseignements ministériels :
      • Résultats du programme
    • Dans la catégorie Établissement de rapports à l’échelle du gouvernement :
      • Audits
  • Avec les types autorisés ci-dessus, incluez seulement des liens vers du contenu qui fournit un aperçu des travaux que le gouvernement effectue pour évaluer, améliorer ou modifier des programmes, des politiques et des services; par exemple, seulement un communiqué de presse qui annonce un nouveau programme de financement (alors qu’un communiqué de presse qui annonce des fonds octroyés sous un programme existant ne serait pas inclus ici)
  • Incluez seulement des liens qui sont pertinents pour la page où ce modèle s’affiche.
  • Ne fournissez jamais de liens vers de types de contenu qui font partie des catégories de type de contenu suivantes :
    • Services, comme des formulaires ou le lancement d’un service (insérez plutôt des liens vers ces contenus dans les sections Services et renseignements ou En demande).
    • Contactez-nous, comme les coordonnées de la personne à contacter en cas d’urgence ou trouver un bureau (insérez plutôt des liens vers ces contenus dans la page des contacts ou le modèle approprié, ou dans la section En demande, si la tâche fait l’objet d’une demande élevée).
    • Politique et directives (insérez plutôt des liens vers ces contenus dans les sections Services et renseignements, En demande ou Renseignements sur l’organisation).
    • Traités, lois et règlements (insérez plutôt les liens vers ces contenus dans la page Transparence, sous la section Renseignements sur l’organisation ou En demande, si la tâche fait l’objet d’une demande élevée).
    • Navigation et administration, comme des pages de navigation ou d’avis sur le site Web.

Exigences en matière de présentation

  • Lorsqu’il y a plus de trois sous-en-têtes, continuez sur une deuxième rangée.
  • Il doit y avoir au moins deux liens par sous-en-tête.
  • Il doit y avoir quatre liens au plus par sous-en-tête.
  • Lorsque le nombre de liens dépasse quatre, fournissez un lien vers « Tous/Toutes les [nom du type de contenu] connexes. »

Exemple concret

Exemple

Graphique 7. Modèle « Ce que nous faisons »
Capture d’écran illustrant le modèle « Ce que nous faisons » dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Collaborateurs

Quand utiliser cette configuration

Liens menant aux institutions ou aux organisations qui soutiennent le contenu sur la page.

Comment utiliser cette configuration

  • Elle présente les institutions de soutien et fournit des liens à leur profil institutionnel respectif (ou profil organisationnel ou profil de partenariat ou d’entente de collaboration, le cas échéant).
  • Le texte de l’hyperlien est le titre d’usage de l’institution.
  • L’étiquette de l’en-tête est « Collaborateurs ».

Exemple concret

Exemple

Graphique 8. Modèle des contributeurs
Capture d’écran illustrant le modèle des contributeurs dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Contenu réductible

Le motif de contenu réductible permet de cacher le contenu secondaire jusqu’à sa demande. Le modèle comprend un lien déclencheur qui affiche ou cache le contenu réductible.

Quand utiliser cette configuration

  • Utilisez-le pour empêcher au contenu secondaire (qui doit quand même s’afficher dans la page) de faire obstacle à la tâche principale.
  • Utilisez-le pour un contenu qui est clairement de nature secondaire (par exemple, s’il est seulement applicable à une petite minorité de votre public, ou des détails supplémentaires sont au-delà de l’objectif principal de la page).
  • Ne l’utilisez jamais pour un contenu qui est essentiel à la tâche principale de la page.

Comment utiliser cette configuration

  • Le contenu réduit est affiché (agrandi) ou caché (réduit) par un lien déclencheur.
  • Étiquetez le déclencheur comme un appel à l’action qui établit des attentes claires pour ce que les personnes trouveront lorsque le contenu est agrandi (par exemple, « Voir les documents de base »).
  • N’utilisez pas un en-tête (H3, H4, entre autres) comme le lien déclencheur, puisque certaines technologies d’assistance ne reconnaîtront pas les en-têtes utilisés comme des liens déclencheurs.
  • À l’affichage initial de la page, le contenu doit être réduit par défaut.
  • Limitez l’application de ce modèle à des pages individuelles pour éviter de créer des mises en page inutilement complexes.
  • Utilisez seulement le composant « Details/Summary » (contenu affichable/masquable) de la BOEW pour ce modèle.

Exemple concret

Exemples

Graphique 9. Modèle du composant « details/summary » illustré à l’état fermé par défaut
Capture d’écran illustrant le widget « details/summary » de la Boîte à outils de l’expérience Web (BOEW) sur une page dans le site Canada.ca. Le widget « details/summary » est illustré à l’état fermé par défaut. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 10. Modèle du composant « details/summary » illustré à son état ouvert activé
Capture d’écran illustrant le widget « details/summary » de la BOEW sur une page dans le site Canada.ca. Le widget « details/summary » est illustré à son état ouvert. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Coordonnées

Deux configurations permettent de présenter les coordonnées dans les pages de Canada.ca. La configuration « Coordonnées » se présente comme un bloc normalisé indiquant l’adresse civique ou postale, l’adresse courriel et les numéros de téléphone, alors que la configuration « Liens aux coordonnées » présente des liens pointant vers les pages de coordonnées.

Quand utiliser cette configuration

  • Présenter l’information de façon cohérente dans divers contextes.
  • Permettre d’utiliser plusieurs modes d’accès.

Comment utiliser cette configuration

  • L’en-tête est « Contactez-nous ».
  • N’ajoutez pas de bordures à ce bloc. Nous voulons réduire le « bruit » visuel et éviter la « cécité aux bandeaux publicitaires » (où une personne interprète automatiquement du contenu présenté dans des cadres comme étant des annonces).
  • Pour la configuration « Coordonnées » :
    • si l’adresse civique ou postale est disponible, indiquez-la en premier, suivi des autres modes de communication;
    • le texte présenté dans ce bloc doit être rédigé conformément au Guide de rédaction du contenu du site Canada.ca;
    • étiquetez clairement les numéros de téléphone ou d’ATS, les adresses de courriel, etc. (par exemple, « Téléphone » pour un numéro de téléphone);
    • dans la mesure possible, le lien de courriel doit pointer vers un formulaire Web plutôt que vers un lien « mailto ».
  • Pour la configuration « Liens aux coordonnées » :
    • Servez-vous des styles de lien normalisés.
    • Utilisez des listes à puces plutôt que des listes numérotées.
    • Les liens pointent vers des pages de coordonnées (voir les modèles des pages de coordonnées).

Exemple concret

Exemples

Graphique 11. Modèle de « Coordonnées »
Capture d’écran illustrant le modèle d’adresse dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 12. Modèle de « Liens aux coordonnées »
Capture d’écran illustrant le modèle de liens de coordonnées dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Diagrammes et graphiques

Les diagrammes et graphiques sont des techniques de visualisation permettant de communiquer des données ou des statistiques.

Quand utiliser cette configuration

  • Servez-vous des diagrammes et graphiques pour communiquer des données plus efficacement qu’à l’aide de texte ou de tableaux lorsque vous devez présenter un grand nombre de données.
  • N’utilisez pas de diagrammes et de graphiques lorsque l’ensemble des données est suffisamment simple pour être présenté dans un tableau, par exemple lorsqu’il y a peu de données.

Comment utiliser cette configuration

  • Lorsque cela est possible, utilisez les diagrammes et graphiques de la version 4 de la BOEW, plutôt que de simples images.
  • Ajoutez toujours les données dans un tableau accompagnant les diagrammes ou graphiques.
    • Il est recommandé de fournir un tableau extensible avec les données tabulaires juste au-dessous de la figure.
  • Déterminez la taille et l’endroit des diagrammes et graphiques en fonction du contexte dans lequel ils sont affichés.
    • Les diagrammes et graphiques doivent être en rapport avec le contenu et le compléter.
  • Ne placez pas les diagrammes et graphiques sur la même ligne que les blocs de texte (par exemple à l’intérieur d’un paragraphe), placez-les plutôt entre des blocs de texte.
  • Optimisez l’espace à votre disposition pour accroître la lisibilité.
  • Les diagrammes et graphiques devraient être aussi simples que possible.

Exemple concret

Exemple

Graphique 14. Modèle de diagrammes et de graphiques
Capture d’écran illustrant le modèle de diagrammes et de graphiques dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

En demande

Quand utiliser cette configuration

  • Comprend des tâches principales liées à la page sur laquelle elles se trouvent. Par exemple, sur une page du sujet ou un profil organisationnel, il dressera la liste des tâches principales liées à ce sujet ou à cette organisation en fonction des mesures et des recherches effectuées par les utilisateurs.

Comment utiliser cette configuration

  • Elle énumère les tâches principales propres à la page sur laquelle elle figure en fonction des mesures relatives au nombre de pages consultées et des recherches sur les utilisateurs.
  • Idéalement, il doit y avoir un maximum de 3 liens, puisque les gens ne cliquent habituellement pas sur les liens qui suivent les 3 premiers.
  • Il ne doit pas y avoir plus de 7 liens.
  • On peut seulement lier les articles au contenu de destination, ou aux liens de sujets connexes que ne sont pas déjà affichés sur la page.
  • Les titres de lien ne devraient pas comprendre des noms de programme ou de publication, à moins qu’ils soient utiles à leur public cible.
  • L’étiquette de l’en-tête est « En demande ».

Exemple concret

Exemple

Graphique 15. Modèle des services les plus demandés
Capture d’écran illustrant le modèle des services les plus demandés dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Icônes

Les icônes représentent des symboles servant à indiquer des actions à prendre ou des états dans l’interface utilisateur de Canada.ca.

Quand utiliser cette configuration

Utilisez les icônes ci-dessous pour aider une personne à se servir des fonctions du site :

  • boutons
  • alertes
  • champs d’un formulaire
  • liens externes ou liens courriel
  • liens à des fichiers de format autre que HTML (par exemple fichiers PDF ou Excel)

N’utilisez pas les icônes :

  • pour embellir les étiquettes de navigation ou les en-têtes;
  • pour styliser les liens à l’intérieur de Canada.ca;
  • pour mettre du texte en évidence.

Comment utiliser cette configuration

  • N’utilisez pas 2 icônes dans le même contexte.
  • Veillez à ce que les icônes soient toujours accompagnées d’une étiquette textuelle.
  • Alignez l’icône avec l’étiquette texte qui y est associée.
  • Utilisez uniquement les ensembles d’icônes de la BOEW.

Exemple concret

Exemple

Graphique 16. Modèle d’icône
Capture d’écran illustrant le modèle d’icône dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Images

Les images sont des éléments de contenu visuel qui embellissent ou rehaussent un texte; il peut s’agir de photos, de graphiques, de dessins ou de diagrammes.

Quand utiliser cette configuration

  • Évitez la décoration inutile dans le site Canada.ca – utilisez seulement une image lorsqu’elle fournit des renseignements supplémentaires que l’on ne peut fournir au moyen du texte uniquement. Consultez le Guide de rédaction du contenu du site Canada.ca pour des détails sur l’utilisation des images.
  • Ne pas utiliser d’images comme éléments cliquables distincts pour la navigation ou pour d’autres fonctions. Les images doivent être cliquables lorsqu’elles sont accompagnées de liens texte, mais elles sont accessoires à ces derniers.

Comment utiliser cette configuration

  • Déterminez la taille et l’endroit des images en fonction du contexte dans lequel elles sont affichées.
    • Les images doivent être en rapport avec le contenu et le compléter.
  • Ne pas aligner les blocs de liens de téléchargement avec les blocs de texte (dans un paragraphe, par exemple). Il faut plutôt les placer entre les blocs de texte.
  • Lorsque des images comprennent des personnes, elles doivent refléter la population diversifiée du Canada.
  • Les images doivent être présentées dans un cadre carré ou rectangulaire. Ne les affichez pas dans un cadre rond ou ovale.
  • Lorsque des légendes et attributions s’imposent, placez-les immédiatement sous l’image pertinente.
  • Vous pouvez rendre les images cliquables uniquement lorsqu’elles sont accompagnées de liens textes menant à la même destination.
    • Dans ces situations, la position par défaut des liens textes est immédiatement au-dessus de l’image.
  • Justifiez les liens, les légendes ou les attributions avec la bordure gauche de l’image pertinente.
  • Ne pas utiliser d’images ou de vidéos copiées d’un autre site Web.

Attribution par licence

  • Les institutions sont responsables de l’utilisation appropriée d’images achetées aux termes d’un accord de licence.
    • Si l’image est attribuée par licence à une seule institution, cette dernière est la seule à pouvoir l’utiliser sur Canada.ca.
    • Lisez attentivement l’accord de licence pour prendre connaissance de toute autre restriction concernant l’utilisation des images achetées.
  • Assurez-vous de détenir les droits appropriés afin de publier des images sur Canada.ca. Plus particulièrement :
    • obtenez une renonciation signée de la part d’une personne (ou de son tuteur légal) avant de publier une image d’elle;
    • conservez les documents montrant que vous détenez les droits appropriés afin de publier des images sous licence (ou dont les droits sont gérés).
  • Les images pour lesquelles une institution n’a plus de licence doivent être retirées de Canada.ca.
  • Achetez la meilleure résolution disponible des images, afin de pouvoir utiliser l’image dans toutes les tailles possibles.

Exemple concret

Exemple

Graphique 17. Modèle d’image
Capture d’écran illustrant le modèle d’image dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Institution responsable

La signature institutionnelle fournit aux personnes un lien vers l’institution ou les institutions responsables du contenu.

Quand utiliser cette configuration

  • Utilisez-la seulement sur des pages de destination (par exemple, page de lancement de service ou pages génériques); ne l’utilisez pas sur des pages de navigation (par exemple, thèmes, page de sujets, profils institutionnels ou organisationnels).
  • Utilisez-la une seule fois sur la page pour fournir un lien vers l’institution, l’organisation ou l’entité similaire responsable du contenu.

Comment utiliser cette configuration

  • Le lien pointant vers l’institution ou l’organisation est précédé de la mention « De : ».
  • Seuls les liens pointant vers des pages de profil institutionnel, des pages de profil organisationnel ou des pages de profil de partenariat d’entente ou de collaboration sont permis.
  • L’étiquette du lien doit être la même que le nom qui s’affiche sur la page de profil institutionnel ou organisationnel vers laquelle il pointe.
  • Une seule institution ou organisation devrait apparaître comme institution responsable.
  • Placez la signature institutionnelle directement sous le titre de la page, justifiée à gauche.
  • Utilisez les styles de paragraphe et de lien standards.
  • Ne placez pas ce bloc en ligne avec d’autres blocs de texte ou éléments de mise en page; il est autonome.

Exemple concret

Exemple

Graphique 18. Modèle de signature institutionnelle
Capture d’écran illustrant le modèle de signature institutionnelle dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Liens connexes

La configuration pour les liens connexes consiste en une liste de liens menant à du contenu se rapportant à la page sur laquelle il figure.

Quand utiliser cette configuration

  • Servez-vous de cette configuration pour fournir des liens menant à du contenu lié directement au contenu fourni sur la page active.
  • Ne pas utiliser la configuration des liens connexes lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).

Comment utiliser cette configuration

  • La liste de liens doit être placée après le contenu principal de la page, mais avant la section du pied de page.
    • En plaçant ces liens toujours au même endroit au bas de la zone de contenu, on permet à une personne de reconnaître plus facilement la fonction de cette configuration.
  • L’en-tête par défaut est « Liens connexes ».
    • Utiliser des en-têtes plus précis lorsque c’est possible pour fournir un contexte plus précis à une personne.
  • N’ajoutez pas de bordures à ce bloc.
    • Nous voulons réduire le « bruit » visuel et éviter la « cécité aux bandeaux publicitaires » (où une personne interprète automatiquement du contenu présenté dans des cadres comme étant des annonces).
  • Servez-vous des styles de lien normalisés.
  • Utilisez des listes à puces plutôt que des listes numérotées.

Exemple

Graphique 19. Modèle des liens connexes
Capture d’écran illustrant le modèle des liens connexes dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Liens de téléchargement

Les liens de téléchargement servent à renvoyer ou à lier à des fichiers de format autre que HTML sur les pages Web de Canada.ca.

Quand utiliser cette configuration

  • Utilisez seulement ce motif pour un fichier qui n’est pas au format HTML (par exemple, PDF, Excel) et une page HTML équivalente.
  • N’utilisez pas cette configuration pour créer des liens vers des pages HTML.

Comment utiliser cette configuration

  • Ajoutez une image vignette ou générique pour indiquer que le lien ne renvoie pas à une ressource HTML.
  • Utilisez le nom du fichier non HTML comme lien texte.
  • Fournissez les renseignements sur le type et la taille du fichier entre parenthèses.
  • Ne pas aligner les blocs de liens de téléchargement avec les blocs de texte (dans un paragraphe, par exemple). Il faut plutôt les placer entre les blocs de texte.
  • La justification à gauche est la justification par défaut.

Exemple concret

Exemple

Graphique 20. Modèle de lien de téléchargement
Capture d’écran illustrant le modèle de lien de téléchargement dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Multimédia (vidéo et audio)

Un élément multimédia est un support à durée limitée de nature visuelle ou auditive qui complète ou améliore le texte, y compris des clips vidéo et des enregistrements audio.

Quand utiliser cette configuration

Comment utiliser cette configuration

  • Redimensionnez et placez l’élément multimédia dans le contexte de façon appropriée. L’élément multimédia intégré doit être lié au contenu et le compléter.
  • Ne placez pas l’élément multimédia dans la ligne avec des blocs de texte (par exemple, dans un paragraphe); placez-les plutôt entre des blocs de texte.
  • Lorsque l’élément multimédia comprend des personnes, il doit refléter la population diversifiée du Canada.
  • L’élément multimédia intégré doit s’afficher en carré ou en rectangle.
  • Utilisez seulement le lecteur multimédia de la BOEW, qui fournit des commandes de lecture accessibles.
  • Incluez toujours des transcriptions descriptives accompagnant le contenu multimédia – placez le lien vers la transcription immédiatement en dessous de l’élément multimédia.
  • Le lien doit pointer vers une page distincte pour les longues transcriptions ou ouvrir un élément de sommaire détaillé pour les courtes transcriptions.
  • Lorsque des légendes et des attributions supplémentaires sont nécessaires, placez-les immédiatement en dessous du lien vers la transcription pour l’élément multimédia auquel elles renvoient.
  • Justifiez les liens, les légendes ou les attributions avec le côté gauche de l’élément multimédia intégré auquel ils renvoient.
  • Évitez d’utiliser des éléments multimédias dont la source est à l’extérieur du gouvernement du Canada.

Attribution par licence

  • Les institutions sont responsables de l’utilisation appropriée des éléments multimédias achetés au moyen d’un contrat de licence. Si la licence d’un élément multimédia est octroyée à une seule institution, seule cette institution peut l’utiliser dans le site Canada.ca. Lisez le contrat de licence très attentivement pour toutes autres restrictions sur l’utilisation des éléments multimédias achetés.
  • Vérifiez si vous avez les droits appropriés pour afficher des éléments multimédias dans le site Canada.ca. Plus particulièrement :
    • obtenez une autorisation signée d’une personne (ou tuteur légal) avant d’afficher n’importe quelle représentation d’elle;
    • obtenez les documents prouvant que vous avez les droits appropriés pour afficher des éléments multimédias sous licence (ou dont les droits sont gérés).
  • Les éléments multimédias qui ne sont plus sous licence aux fins d’utilisation par une institution doivent être retirés du site Canada.ca.

Exemple concret

Exemple

Graphique 21. Modèle de lecteur multimédia
Capture d’écran illustrant le modèle de lecteur multimédia intégré dans une page générique du site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

1 : Lecteur média de la BOEW

Obligatoire

Les composants du lecteur vidéo et audio de la Boîte à outils de l’expérience Web ont été élaborés et testés pour respecter les normes de codage et d’accessibilité du site Canada.ca. Aucun autre lecteur multimédia n’est autorisé dans le site Canada.ca.

2 : Transcription

Obligatoire

Tous les éléments vidéo et audio affichés dans le site Canada.ca doivent comprendre une transcription écrite immédiatement après le lecteur de la BOEW.

On peut placer les courtes transcriptions sur la page, après le lecteur, et on peut cacher les longues transcriptions dans un élément de détails ou de sommaire ou les placer dans une page distincte. Lorsque vous placez la transcription sur une page distincte, un lien doit s’afficher à cet emplacement qui mène vers la page contenant la transcription.

3 : Sous-titres ou descriptions

Facultative

Les sous-titres, les descriptions ou les attributions associés au contenu multimédia doivent être placés après le lien vers la transcription, justifiés à gauche du lecteur de la BOEW.

Nouveautés

Quand utiliser cette configuration

  • Comprend les éléments de nouvelles les plus récents affichés par l’institution, l’organisation ou l’entité.

Comment utiliser cette configuration

  • Elle présente les éléments de nouvelles les plus récents affichés par l’entité.
  • L’étiquette de l’en-tête est « Nouveautés ».
  • Deux des éléments de nouvelles doivent comprendre une image, un titre assorti d’un hyperlien, des renseignements supplémentaires et un texte descriptif :
    • Peut comprendre du contenu promotionnel, et être priorisé à la discrétion de l’institution
    • Le texte de la description doit être court et concis.
    • Si plus de deux images sont requises, elles peuvent être affichées au moyen d’un carrousel.
    • Si le format de carrousel est utilisé, utilisez la configuration Carrousels.
  • Les types de produits liés aux nouvelles affichés comme texte seulement se limitent à ceux affichés sur nouvelles.gc.ca :
    • Avis aux médias
    • Documents d’information
    • Communiqués de presse
    • Discours
    • Déclarations
  • Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur le redimensionnement d’image.

Exemple concret

Exemples

Graphique 22. Modèle des nouveautés avec deux images
Capture d’écran illustrant le modèle des dernières nouvelles avec deux images dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 23. Modèle des nouveautés avec carrousel
Capture d’écran illustrant le modèle des dernières nouvelles avec carrousel dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Promotions contextuelles

Les promotions contextuelles sont des composantes d’intérieur de page servant à promouvoir des activités, des initiatives, des programmes et des services pangouvernementaux.

Quand utiliser cette configuration

  • Utiliser cette composante afin de promouvoir activités, des initiatives, des programmes et des services pangouvernementaux qui sont pertinents pour le contenu de la page sur laquelle elle se trouve.
  • N’utilisez pas cette composante pour promouvoir des activités et des initiatives qui ne sont pas pertinentes ou liées au contexte.
  • Ne pas utiliser cette composante lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).
  • Ne pas reproduire le contenu ou les liens d’autres composantes de la page.

Comment utiliser cette configuration

  • Les promotions contextuelles comprennent toujours un lien et une image; un en-tête et un texte descriptif sont facultatifs.
  • Dans les modèles de navigation (comme les pages de thème et de sujet), utilisez 2 ou 3 promotions côte à côte; chaque lien est placé au-dessus de l’image, et la description est placée sous l’image.
  • Sur les modèles de destination (comme les pages génériques), limitez l’utilisation à une seule promotion; l’image est placée à gauche du lien et de la description.
  • Sur les pages de navigation, utilisez toujours un en-tête. L’en-tête par défaut pour ce bloc est « En vedette ». Utiliser des en‑têtes plus précis pour fournir plus de contexte à une personne.
  • Sur les pages de destination, l’en-tête est facultatif. Si vous utilisez un en-tête, utilisez toujours une formulation spécifique pour fournir un contexte.
  • Positionner les promotions thématiques après le contenu principal de la page, mais avant le pied de page.
  • Utilisez un maximum de 40 caractères pour le texte de l’hyperlien.
  • Si l’image comporte un lien, ce dernier doit pointer vers la même destination que le texte du lien.
  • N’utilisez pas les images pour afficher du texte.
    • Le texte sur les images en vedette peut être difficile à lire sur un petit écran.
    • Les images peuvent plutôt se concentrer sur la photographie et l’illustration.
    • Les extraits de texte accessoires comme le texte qui s’affiche sur des objets photographiés, les mots-symbole dans les logos, les mots-clics, entre autres, sont acceptables.
  • Le texte de la description doit être court et concis.
    • Une ou deux lignes sont idéales.
    • Ne dépassez pas trois lignes de texte (ce qui équivaut à environ 145 caractères avec des espaces).
  • La description, le texte du lien et l’en-tête doivent être différents.
    • Ne répétez pas les locutions dans l’en-tête, le texte du lien ou la description.
  • Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.
  • Veuillez consulter la page GitHub sur Canada.ca pour obtenir des détails sur la taille des images.

Exemple concret

Exemple de page de destination avec une seule promotion

Graphique 24. Modèle de page de destination avec une seule promotion
Capture d'écran illustrant le modèle de promotion contextuelle avec un seul en-tête, une seule image, un seul lien et une seule description, dans le site Canada.ca

Exemple de page de navigation avec 3 promotions

Graphique 25. Modèle de page de navigation avec 3 promotions
Capture d'écran illustrant le modèle de promotion contextuelle avec un groupe de 3 liens, images et descriptions, sous un seul en-tête, dans le site Canada.ca

Questions interactives

Le motif de questions interactives est utilisé pour présenter aux personnes une séquence de questions simples qui mènent à la réponse précise dont elles ont besoin pour poursuivre leur tâche ou l’achever. Le modèle des questions interactives peut être utilisé pour aider les personnes à comprendre les critères d’admissibilité, l’applicabilité des règles, ou les exigences de conformité qui dépendent des situations ou des conditions particulières.

Quand utiliser cette configuration

  • Utilisez-le pour orienter les personnes vers une réponse appropriée en leur posant une série de questions.

Comment utiliser cette configuration

  • Utilisez les styles de présentation définis pour l’interface de déroulement de champs incluse dans la BOEW

Présentation des questions interactives

  • L’en-tête de ce modèle doit formuler l’objectif de l’ensemble des questions interactives.
    • Par exemple, « Trouvez si vous pouvez renouveler votre passeport en ligne ».
  • En option, fournissez un aperçu des résultats auxquels les personnes peuvent s’attendre après le remplissage du questionnaire interactif.
  • En option, fournissez de courtes instructions en haut des questions.

Présentation des questions

  • Gardez le nombre de questions au minimum (pas plus de sept par séquence).
  • Chaque question doit s’adresser à la personne qui la lit (utilisez « vous » et « votre/vos »).
  • Présentez les choix ou les options immédiatement après chaque question, en s’assurant qu’ils sont rédigés comme des réponses possibles à la question ci-dessus.
  • À la présentation des choix, utilisez des commandes de formulaire normalisées comme des boutons radio, des cases à cocher, et des menus déroulants; assurez-vous de couvrir tous les choix possibles.
  • Si possible, présélectionnez le choix le plus courant ou optimal.

Regroupement des questions

  • Présentez les questions une à la fois pour garder l’accent sur la question actuelle; gardez chaque question subséquente sur la même page à la même place que la question précédente.
  • Placez toujours les questions en contexte (par exemple, sur la page d’admissibilité dans le modèle de lancement d’un service).

Navigation dans la séquence des questions

  • Utilisez toujours des boutons pour parcourir la séquence de questions (des boutons étiquetés « continuer » ou « suivant » pour déclencher la question suivante ou la réponse).
  • Assurez-vous que les personnes sont capables de retourner pour annuler ou modifier une sélection précédente, au moyen des boutons ou des liens (comme un lien étiqueté « modifier votre sélection »).
  • Tous les boutons utilisés pour parcourir les questions doivent être étiquetés de façon appropriée pour le contexte (par exemple, « Continuer » pourrait être logique dans une situation, mais un choix plus précis dans une autre situation pourrait être « Découvrez si vous êtes admissibles »).
  • Lorsque des questions interactives sont combinées avec le modèle de navigation sur plusieurs pages (comme dans un modèle de lancement de service), évitez d’utiliser « suivant » pour éviter toute confusion entre les deux types de boutons.

Présentation des réponses

  • Résumez toujours les choix que les personnes ont faits et assurez-vous qu’elles peuvent y retourner pour annuler ou modifier une sélection précédente.
  • Expliquez la réponse clairement et simplement. Fournissez des liens vers la mesure suivante que les personnes doivent prendre en fonction de la réponse qu’elles ont reçue.

Exemple concret

Exemple

Graphique 26. Modèle de questions interactives
Capture d’écran illustrant une présentation du modèle de questions interactives dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Services et renseignements

Services et renseignements est un motif pour présenter des ensembles de liens avec des descriptions connexes. Chaque lien accompagné de sa description fournit une description exacte et concise de ce que l’utilisateur trouvera dans la page de destination. De concert, ces ensembles de liens et descriptions fournissent des choix clairs et distincts pour les personnes qui essaient d’achever leur tâche.

Quand utiliser cette configuration

  • Utilisez ce modèle pour fournir des liens aux sujets ou au contenu de destination liés à la page où il se trouve.
  • Utilisez-le lorsque l’objectif principal de la page est de fournir des choix clairs pour naviguer vers des tâches.

Comment utiliser cette configuration

Exigences en matière de contenu

  • Le contenu pour chaque combinaison de lien et de description est rédigé pour un niveau scolarité secondaire (pointage de 100 et moins dans Scolarius).
  • Gardez la ponctuation simple.
  • Utilisez des mots clés populaires que le public cible connaîtra et utilisera probablement; fondez vos choix sur la recherche et des données probantes.
  • N’utilisez pas d’acronymes ou d’abréviations, à moins que la plupart des gens les connaissent mieux que l’équivalent en forme longue.
  • Consultez le Guide de rédaction du contenu du site Canada.ca pour d’autres renseignements sur la rédaction de contenu pour ce modèle.

Exigences relatives aux liens

  • Le texte du lien doit être logique dans le contexte de la page.
    • Il n’est pas obligé de correspondre exactement au titre de la page de destination.
    • Il n’est pas obligé d’être unique dans tout le site Canada.ca.
    • Il doit être descriptif, unique dans la page, et clairement distinct des autres liens sur la page.
    • Ne mettez pas de ponctuation la fin du texte du lien (par exemple, « Comment présenter une demande de financement? »)
    • Le texte du lien doit s’adresser à une personne (par exemple, « Présentez une demande de financement »)
  • La limite de caractères optimale pour les liens est de 45 caractères (y compris les espaces) dans les deux langues officielles, mais elle peut aller jusqu’à 75 caractères (avec les espaces).
  • Utilisez les styles de lien normalisés comme définis dans la Boîte à outils de l’expérience Web (BOEW).

Descriptions des liens

  • La description du lien complète le lien qu’il accompagne pour fournir plus de détails et de précisions sur la portée du lien.
    • Le style recommandé est d’énumérer les mots clés ou les expressions clés séparés par des virgules; les phrases complètes ne sont pas nécessaires.
    • N’utilisez pas de phrases d’introduction comme « Comprend… », « Renseignements sur… » ou « Apprenez-en plus au sujet de… ».
    • N’incluez pas de liens.
    • N’incluez pas de messages promotionnels.
  • Les descriptions de lien ne doivent pas dépasser 120 caractères (y compris les espaces) dans les deux langues officielles.
  • Les menus déroulants sont autorisés à la place d’une description de lien dans des circonstances particulières :
    • s’ils permettent de fournir un accès à un grand nombre d’éléments au même niveau (par exemple, des listes de pays ou d’espèces);
    • si la page de destination comprend principalement une liste de liens, et que l’on peut entièrement la remplacer par le menu déroulant.
  • Utilisez seulement les styles de présentation normalisés définis dans la BOEW.

Regrouper des ensembles de liens avec des descriptions connexes

On peut utiliser les styles suivants :

  • Fondé sur la demande
    • La priorisation est fondée sur la demande (par exemple, en fonction de l’analytique Web), avec des liens à forte demande s’affichant avant ceux à faible demande.
  • Séquentiel
    • Utilisez les menus d’accueil thématiques séquentiels et numérotés si les liens doivent être suivis dans un ordre étape par étape (par exemple, confirmer l’admissibilité, s’inscrire, puis imposer la TPS/TVH).
    • Utilisez ce style pour permettre aux personnes de sauter les étapes facultatives ou non applicables ou les étapes déjà effectuées.
  • Sous-titres
    • Utilisez-les pour regrouper les liens et les descriptions qui sont très similaires, au cas où il ne serait pas logique de déplacer le groupe dans une page de sous-sujet.
    • Utilisez-les pour éviter la surcharge de renseignements; idéalement pas plus de neuf liens avec des descriptions par sous-titre.
  • Combinaison des styles précédents, le cas échéant; toutefois, limitez l’application pour éviter des ensembles trop complexes de liens et de descriptions.

Dans tous les cas, le classement prioritaire est comme suit :

  • Dans une présentation à colonne unique, le classement prioritaire est du haut en bas.
  • Dans une présentation à plusieurs colonnes, le classement prioritaire est de gauche à droite, puis de haut en bas.

Exemple concret

Exemples

Graphique 27. Modèle de liens de menu d’accueil thématique dans un modèle à deux colonnes
Capture d’écran illustrant un ensemble de liens de menu d’accueil thématique en deux colonnes dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 28. Modèle de liens de menu d’accueil thématique dans un modèle à une colonne
Capture d’écran illustrant un ensemble de liens de menu d’accueil thématique dans une colonne dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 29. Modèle de liens séquentiels de menu d’accueil thématique dans un modèle à une colonne
Capture d’écran illustrant un ensemble de liens séquentiels de menu d’accueil thématique dans une seule colonne. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Graphique 30. Modèle de liens de menu d’accueil thématique dans un modèle de deux colonnes regroupées avec des en-têtes
Capture d’écran illustrant un ensemble de liens de menu d’accueil thématique dans un modèle de deux colonnes regroupées dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Tableaux de données

Les tableaux de données représentent un moyen efficace de communiquer des données à l’aide de rangées et de colonnes.

Quand utiliser cette configuration

  • Servez-vous de ces tableaux pour présenter des données.
  • N’utilisez pas les tableaux de données pour forcer la disposition du texte.

Comment utiliser cette configuration

  • Servez-vous des catégories de présentation définies pour les tableaux dans la BOEW.
  • Veillez à ce que chaque colonne ne présente qu’une facette de données.
  • Dans la mesure du possible, utilisez les tableaux de la version 4 de la BOEW qui comprennent des mécanismes de tri et de filtrage.
    • Cette façon de procéder est recommandée lorsqu’un tableau compte plus de 12 rangées.
  • Ajoutez des commandes de pagination facultatives pour les tableaux comptant plus de 12 rangées.
  • Ne présentez jamais des données tabulaires sous forme d’images.

Exemple concret

Exemple

Graphique 31. Modèle de table de données
Capture d’écran illustrant le modèle de table de données dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Widget des réseaux de médias sociaux

Le widget des réseaux de medias sociaux est une composante d’intérieur de page qui permet d’imbriquer les plus récents messages affichés sur les comptes de medias sociaux du gouvernement du Canada dans les pages Canada.ca.

Quand utiliser cette configuration

  • Utiliser le widget des réseaux de médias sociaux sur les pages où les comptes de medias sociaux sont pertinents pour le contexte actuel.
  • Ne pas utiliser cette composante lorsqu’une tâche accomplie par une personne ne doit pas être interrompue (par exemple pendant une transaction).
  • Ne pas reproduire le contenu d’autres composantes promotionnelles de la page.

Comment utiliser cette configuration

  • Le widget des réseaux de médias sociaux comprend un en-tête et des panneaux pour jusqu’à trois comptes de médias sociaux, chacun renfermant un fil des plus récents messages.
  • L’en-tête par défaut du widget est « Restez branché ».
  • Chacun des panneaux renferme :
    • un en-tête indiquant la plateforme de médias sociaux d’où vient le fil de messages du compte (Facebook, YouTube, etc.);
    • une chaîne des plus récents messages de ce compte, présentés en ordre chronologique inverse;
    • les trois plus récents messages comme réglage par défaut, avec un lien vers le compte d’où ils proviennent afin que les gens puissent en consulter davantage.
  • Utiliser les catégories de présentation définies sous le thème de la BOEW de Canada.ca.

Exemple concret

Exemple

Graphique 32. Modèle de widget des réseaux de médias sociaux
Capture d’écran illustrant le modèle de widget des flux de médias sociaux dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.
Signaler un problème ou une erreur sur cette page
Veuillez sélectionner toutes les cases qui s'appliquent :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, contactez-nous.

Date de modification :