From b5253ff5d64efa3034118f32961474605aba2c4d Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:00:14 -0500 Subject: [PATCH 1/4] feat: layered theme page --- modeles-obligatoire/theme.md | 699 ++++++----------------------------- 1 file changed, 123 insertions(+), 576 deletions(-) diff --git a/modeles-obligatoire/theme.md b/modeles-obligatoire/theme.md index d2b492de9..2340ff863 100644 --- a/modeles-obligatoire/theme.md +++ b/modeles-obligatoire/theme.md @@ -1,582 +1,129 @@ --- altLangPage: https://design.canada.ca/mandatory-templates/theme.html -breadcrumbs: -- link: https://www.canada.ca/fr/gouvernement/a-propos.html - title: "À propos de Canada.ca" -- link: https://conception.canada.ca - title: "Conception" -- link: https://www.canada.ca/fr/gouvernement/a-propos/systeme-conception/bibliotheque-modeles.html - title: "Bibliothèque de modèles et de configurations de conception" date: null -dateModified: '2024-09-24' -description: null -title: "Page de thème" +dateModified: '2026-02-27' +description: Orientation sur l'utilisation d'une page de navigation par thème stratifiée sur Canada.ca. Une page de navigation par thème stratifiée permet aux gens de trouver des services et des renseignements provenant de tous les sites Web du gouvernement du Canada regroupés sous l'un des principaux thèmes de Canada.ca. +title: Page de thème stratifiée --- -
-

Nous avons déplacé les directives portant sur la page de sujet. Vous pouvez les trouver ici : Page de sujet.

-
- -

- - Obligatoire - -

-

Dernière modification : {{ page.dateModified }}

- -

- Les pages de thème fournissent un accès aux sujets et aux pages de destination qui appuient l’achèvement des tâches. -

- -

- Les pages de thème : -

- - - -

- Sur cette page -

- - - -
-

- Quand l'utiliser -

-

- Ce modèle doit être utilisé pour la page de thème. -

-
- -
-

- Quoi éviter -

-

- Les pages où les personnes peuvent lancer une tâche devraient être considérées comme du contenu de destination et ne devraient pas utiliser le modèle de page de thème et de sujet. -

-

- Le modèle de la page de thème ne doit pas être utilisé pour faire de la promotion; utilisez plutôt les - pages d’événements promotionnels - ou les - pages de campagnes. -

-
- -
-

- Comment mettre en œuvre -

-
- -
-

- Page de thème -

-
- - Directives pour la version stable de la page de thème - -
- - -
-
-
-
-
- - Modèle de page de thème - -
- Modèle de page de thème indiquant les parties qui composent sa structure. Lire de haut en bas et de gauche à droite. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image. -
-
-
-
-
-

- 1 : Titre du thème -

-

- - Obligatoire - -

-

- Décrit le thème et le contenu de la page -

-
    -
  • -
    - - - Présentation - - -
      -
    • - Le titre du thème doit être une balise H1 unique. -
      • -
    • - Il doit être la première composante de la page. -
      • -
    -
    -
    • -
-
-
-

- 2 : Paragraphe d’introduction du thème -

-

- - Obligatoire - -

-

- Décrit les tâches principales (services et renseignements) et les sujets accessibles sur cette page -

-
    -
  • -
    - - - Contenu - - -
      -
    • - Elle donne un aperçu de l’ensemble des tâches principales pouvant être accomplies sur un thème donné. -
      • -
    • - Le texte doit être court et concis. -
      • -
    • - Le contenu est rédigé pour un niveau de scolarité secondaire (pointage de 100 et moins dans - - Scolarius - - ). -
      • -
    -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante figure sous le titre du thème. -
      • -
    • Elle se trouve à la gauche de l'image.
      • -
    -
    -
    • -
-
-
-

- 3 : Image du thème -

-

- - Facultative - -

-

- L’image est facultative. Utilisez uniquement des images décoratives. -

-
    -
  • -
    - - - Présentation - - -
      -
    • - L'image figure en haut de la page. -
      • -
    • - Elle se trouve à droite du paragraphe d’introduction du thème. -
      • -
    -
    -
    • -
-
-
-

- 4 : Réseaux de médias sociaux du thème -

-

- - Conditionnelle - -

-

- Présente les réseaux de médias sociaux propres au thème -

-
    -
  • -
    - - - Contenu - - - -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante figure sous le paragraphe d’introduction du thème. -
      • -
    -
    -
    • -
-
-
-

- 5 : Services et renseignements -

-

- - Obligatoire - -

-

- Présente les sujets propres au thème -

-
    -
  • -
    - - - Contenu - - - -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante figure sous les réseaux de médias sociaux propres au thème et à gauche de la section « En demande ». -
      • -
    • - L’étiquette de l’en-tête est « Services et renseignements ». -
      • -
    -
    -
    • -
-
-
-

- 6 : En demande -

-

- - Obligatoire - -

-

- Présente les services et renseignements les plus demandés propres au thème -

-
    -
  • -
    - - - Contenu - - - -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante se trouve à droite de « Services et renseignements ». -
      • -
    • - L’étiquette de l’en-tête est « En demande ». -
      • -
    -
    -
    • -
-
-
-

- 7 : Autres renseignements pour les -

-

- - Conditionnelle - -

-

- Liens menant à des renseignements intéressant les publics cibles à l’échelle du gouvernement -

-
    -
  • -
    - - - Contenu - - -
      -
    • - Cette composante est obligatoire lorsqu’il y a une ou plusieurs pages de public cible à l’échelle du gouvernement ou de pages de sujets liées au thème qui existent. -
      • -
    • - Utilisez la configuration - - Autres renseignements pour les - - . -
      • -
    -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante se trouve sous la section « En demande ». -
      • -
    • - L’étiquette de l’en-tête est « Autres renseignements pour les ». -
      • -
    -
    -
    • -
-
-
-

- 8 : Section « En vedette » du thème -

-

- - Obligatoire - -

-

- Fait la promotion des activités en cours propres au thème, menées par les ministères et organismes à l’échelle du - - GC - -

-
    -
  • -
    - - - Contenu - - - -
    -
    • -
  • -
    - - - Présentation - - -
      -
    • - Cette composante se trouve en dessous de « Services et renseignements ». -
      • -
    -
    -
    • -
-
-
-
-
- -

- Le site Canada.ca s’articule autour de 15 thèmes fondés sur une analyse des tâches principales (renseignements et services les plus demandés) à l’échelle du gouvernement du Canada. -

-

- S’ils mettent l’accent sur les tâches principales liées aux renseignements et à la prestation des services, les thèmes donnent également un aperçu des activités du gouvernement du Canada menées à bien pour contribuer à la - prestation des programmes et services (par exemple, recherches, consultations, élaboration de politiques). -

-
-
- - Diagramme de la façon de naviguer - -
- Diagramme de la façon de naviguer vers les pages de thème dans le site Canada.ca. La version textuelle se trouve ci-dessous : -
- - Version textuelle - -

- On peut accéder aux pages de thème à partir de la page d’accueil du site Canada.ca. -

-
-
-
-
- -
-

- Derniers changements -

-

- - 2024-09-24 : - -

- -

- - 2020-07-10 : - -

+ Obligatoire + +**Dernière modification :** {{ page.dateModified }} + +La page de thème stratifiée est une suite de pages jouant le rôle de chemin de navigation principal sur Canada.ca. Les pages de thème fournissent un accès aux sujets et aux pages de destination qui appuient l'achèvement des tâches. Elles permettent aux utilisateurs de naviguer dans le contenu de l'ensemble du gouvernement en fonction d'un des thèmes principaux plutôt que par institution. De plus, ces pages organisent le contenu et la navigation par ordre de priorité en présentant d'abord les renseignements et les services les plus consultés. + +
+ +## Sur cette page +- [Quand l'utiliser](#quand-lutiliser) +- [Quoi éviter](#quoi-eviter) +- [Contenu et conception](#contenu-et-conception) +- [Comment procéder à la mise en œuvre](#comment-proceder-a-la-mise-en-oeuvre) +- [Recherche et justification](#recherche-et-justification) +- [Derniers changements](#derniers-changements) + +## Quand l'utiliser {#quand-lutiliser} + +Le modèle stratifié pour la page de thème ne doit être utilisé que pour la page de thème. Seuls les responsables des thèmes peuvent utiliser ce modèle. + +## Quoi éviter {#quoi-eviter} + +N'utilisez pas la configuration de navigation à gauche de ce modèle sur un autre type de page. Cette option est réservée à la page de thème stratifiée. + +N'ajoutez pas de liens menant aux canaux de communication de médias sociaux. Ajoutez-les plutôt à la page de sujet. + +## Contenu et conception {#contenu-et-conception} + +Le titre du thème doit être une balise H1 unique ainsi que le premier élément de la page. + +Ajoutez la bande En demande sous le titre du thème pour mettre en évidence les tâches principales. Utilisez la [configuration de la bande En demande](https://conception.canada.ca/configurations-conception-communes/en-demande.html). + +Ajoutez un lien et une brève description, également appelés menus d'accueil thématique, pour chaque sujet lié au thème inclus dans la page. Ne répétez aucun des liens qui figurent dans la bande En demande. Utilisez la variante à deux colonnes de la [configuration Services et renseignements](https://conception.canada.ca/configurations-conception-communes/services-renseignements.html). + +Insérez une bande contextuelle dans le pied de page. Utilisez la [configuration de la bande contextuelle](https://conception.canada.ca/configurations-conception-communes/pied-page-contextuelle.html). + +Inclus par défaut, le bouton de connexion renvoie à la page de connexion générale. Vous pouvez personnaliser le lien et le nom du bouton pour diriger l'utilisateur vers une page de connexion particulière ou vers une page qui gère plusieurs comptes en lien avec votre thème. Les pages qui gèrent plusieurs comptes doivent être intitulées « Se connecter à l'ARC » ou « Se connecter à IRCC ». Sinon, utilisez « Se connecter à [nom du compte] ». Voir la [configuration du bouton contextuel « Se connecter »](https://conception.canada.ca/configurations-conception-communes/connexion-contextuel.html). + +Vous pouvez ajouter une alerte pour signaler une interruption urgente du service. L'alerte doit s'afficher sous le titre h1 dans le contenu du côté droit. Voir les [directives concernant l'utilisation des alertes pour les situations de crise](https://conception.canada.ca/crise/alertes.html). + +Vous pouvez ajouter un maximum de trois promotions contextuelles au-dessus du pied de page. Voir la [configuration des promotions contextuelles](https://conception.canada.ca/configurations-conception-communes/vignettes-promotionnelles.html). + +Vous pouvez inclure un lien en vedette lorsqu'il est nécessaire de promouvoir un élément important de nature temporaire. Voir la [configuration du lien en vedette](https://conception.canada.ca/configurations-conception-communes/lien-vedette.html). + +Les demandes de personnalisation seront examinées au cas par cas si votre thème permet d'effectuer des recherches et de surveiller les répercussions de la personnalisation. Veuillez faire parvenir vos demandes de personnalisation au Bureau de l'expérience Canada.ca : + +- [cds.dto-btn.snc@servicecanada.gc.ca](mailto:cds.dto-btn.snc@servicecanada.gc.ca) + +### Exemples visuels + +
+
+
Conception stratifiée pour la navigation par thème - grand écran
+ Conception stratifiée pour la navigation par thème pour les grands écrans. Version textuelle ci-dessous : +
+ Description de l'image : Conception stratifiée pour la navigation par thème - grand écran +

Le modèle stratifié pour la navigation par thème comporte une barre de navigation sur la gauche qui énumère tous les thèmes du site Canada.ca. Le contenu du thème sélectionné s'affiche à droite. Puisqu'il est sélectionné, le thème « Emplois » est surligné en bleu foncé. Une barre bleu foncé épaisse sert de séparation visuelle entre la barre de navigation et le contenu.

+

La section affichant le contenu du thème actif contient le titre du thème et une bande présentant les liens les plus demandés, suivie de la configuration Services et renseignements répartie sur deux colonnes. Cette section contient des liens et des descriptions qui aident l'utilisateur à naviguer dans les différents niveaux de contenu du thème. Sous la section de la navigation par thème, on retrouve le titre « En vedette » ainsi que trois promotions contextuelles en lien avec le thème. Cette section est suivie d'un pied de page contextuel qui s'applique au thème.

+
+
+
+
+
+
Conception stratifiée pour la navigation par thème - petit écran
+ Conception stratifiée pour la navigation par thème pour les petits écrans. Version textuelle ci-dessous : +
+ Description de l'image : Conception stratifiée pour la navigation par thème - petit écran +

Dans les appareils mobiles, le modèle stratifié pour la navigation par thème comprend une bande bleu foncé qui contient le texte « Menu » et un chevron pointant vers le bas. L'utilisateur doit cliquer sur le bouton Menu pour afficher tous les thèmes disponibles.

+

La section affichant le contenu du thème actif contient le titre du thème et une bande présentant les liens les plus demandés, suivie de la configuration Services et renseignements répartie sur une seule colonne. Cette section contient des liens et des descriptions qui aident l'utilisateur à naviguer dans les différents niveaux de contenu du thème. Sous la section de la navigation par thème, on retrouve le titre « En vedette » ainsi que trois promotions contextuelles en lien avec le thème. Cette section est suivie d'un pied de page contextuel qui s'applique au thème.

+
+
+
+ +## Comment procéder à la mise en œuvre {#comment-proceder-a-la-mise-en-oeuvre} + +Trouvez des exemples pratiques et du code pour mettre en œuvre le modèle stratifié pour la page de thème. + +### Référence pour la mise en œuvre du thème GCweb (BOEW) + +La référence pour la mise en œuvre explique comment configurer le modèle stratifié pour la page de thème. + +- [Documentation sur le modèle stratifié pour la page de thème – GCWeb]() + +## Recherche et justification {#recherche-et-justification} + +Consultez les conclusions de la recherche et la justification stratégique. + +### Constatations découlant de la recherche + +[Résumé de recherche – Orientation dans Canada.ca](https://conception.canada.ca/resumes-recherche/orientation-dans-canada-ca.html) + +Des études ont révélé que les personnes qui naviguent sur le site utilisent le lien du fil d'Ariane près de deux fois plus souvent que le menu des thèmes et des sujets. + +### Justification stratégique + +Le modèle stratifié pour la page de thème est obligatoire conformément aux spécifications de Canada.ca. +- [Éléments obligatoires du système de conception](https://conception.canada.ca/specifications/elements-obligatoires.html) + + +## Derniers changements {#derniers-changements} + +
+
+
+

Stabilisation et lancement du modèle stratifié pour la page de thème.

+
+
+
+

Mise à jour de la configuration pour supprimer toute référence à la page de sujet, qui est désormais une configuration distincte.

+
+
+
    -
  • - Modifications à la disposition des colonnes de la section Services et renseignements pour les tabelettes -
    • -
  • - Clarification des directives pour les comptes de médias sociaux -
    • +
  • Modifications à la disposition des colonnes de la section Services et renseignements pour les tablettes.
    • +
  • Clarification des directives pour les comptes de médias sociaux.
-

- - 2020-06-30 : - - une nouvelle version bêta de ce modèle a été ajoutée. -

-
+ +
+
+

Ajout d'une nouvelle version bêta de ce modèle.

+
+ From efa4424af9b00bae343195472f07d7e54141166f Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:05:50 -0500 Subject: [PATCH 2/4] feat: qa --- modeles-obligatoire/theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modeles-obligatoire/theme.md b/modeles-obligatoire/theme.md index 2340ff863..420c41d88 100644 --- a/modeles-obligatoire/theme.md +++ b/modeles-obligatoire/theme.md @@ -86,7 +86,7 @@ Trouvez des exemples pratiques et du code pour mettre en œuvre le modèle strat La référence pour la mise en œuvre explique comment configurer le modèle stratifié pour la page de thème. -- [Documentation sur le modèle stratifié pour la page de thème – GCWeb]() +- [Documentation sur le modèle stratifié pour la page de thème – GCWeb (BOEW)]() ## Recherche et justification {#recherche-et-justification} From fee5d3a1e65650d0c7b0caff91b9aeaf74f4bc89 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:08:04 -0500 Subject: [PATCH 3/4] feat: qa --- modeles-obligatoire/theme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/modeles-obligatoire/theme.md b/modeles-obligatoire/theme.md index 420c41d88..c8c906b8a 100644 --- a/modeles-obligatoire/theme.md +++ b/modeles-obligatoire/theme.md @@ -35,9 +35,9 @@ N'ajoutez pas de liens menant aux canaux de communication de médias sociaux. Aj Le titre du thème doit être une balise H1 unique ainsi que le premier élément de la page. -Ajoutez la bande En demande sous le titre du thème pour mettre en évidence les tâches principales. Utilisez la [configuration de la bande En demande](https://conception.canada.ca/configurations-conception-communes/en-demande.html). +Ajoutez la bande En demande sous le titre du thème pour mettre en évidence les tâches principales. Utilisez la [configuration de la bande en demande](https://conception.canada.ca/configurations-conception-communes/en-demande.html). -Ajoutez un lien et une brève description, également appelés menus d'accueil thématique, pour chaque sujet lié au thème inclus dans la page. Ne répétez aucun des liens qui figurent dans la bande En demande. Utilisez la variante à deux colonnes de la [configuration Services et renseignements](https://conception.canada.ca/configurations-conception-communes/services-renseignements.html). +Ajoutez un lien et une brève description, également appelés menus d'accueil thématique, pour chaque sujet lié au thème inclus dans la page. Ne répétez aucun des liens qui figurent dans la bande En demande. Utilisez la variante à deux colonnes de la [configuration services et renseignements](https://conception.canada.ca/configurations-conception-communes/services-renseignements.html). Insérez une bande contextuelle dans le pied de page. Utilisez la [configuration de la bande contextuelle](https://conception.canada.ca/configurations-conception-communes/pied-page-contextuelle.html). From 3856721d8699a42a56587afdfe36ef3e29a89271 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Sun, 25 Jan 2026 20:12:02 -0500 Subject: [PATCH 4/4] feat: qa --- ajax/patterns-01-fr.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ajax/patterns-01-fr.json b/ajax/patterns-01-fr.json index 1bf8f6cc2..ab2fd64f6 100644 --- a/ajax/patterns-01-fr.json +++ b/ajax/patterns-01-fr.json @@ -731,12 +731,12 @@ "TANDP": "1" }, { - "NAME": "Page de thème", + "NAME": "Page de thème stratifiée", "SOURCE": "Bibliothèque de modèles et de configurations de conception", - "DESCRIPTION": "Les pages de thème fournissent un accès aux sujets et aux pages de destination qui appuient l'achèvement des tâches.", - "WHENTOUSE": "Permet aux personnes de découvrir des services et des renseignements liés à un thème ou un sujet précis dans l'ensemble du gouvernement - Modèle obligatoire", - "CATEGORY": "Modèle de page", - "TYPE": "Modèle de thème, Navigation", + "DESCRIPTION": "Directives concernant l’utilisation du modèle stratifié pour la page de thème sur le site Canada.ca. Ce type de page permet aux utilisateurs de trouver des services et des renseignements provenant de tous les sites Web du gouvernement du Canada, regroupés en fonction d’un des thèmes principaux de Canada.ca.", + "WHENTOUSE": "Utiliser pour les principaux thèmes de Canada.ca, pour la navigation par thème.", + "CATEGORY": "Configuration de conception", + "TYPE": "Navigation, Configuration à l'échelle du site, modèle de thème stratifié", "MANDATORY": "Obligatoire", "TANDP": "1" },{