Spécifications relatives à la mise en page et à la conception graphique pour les petits écrans (Spécifications techniques relatives à la présence Web et mobile)

Les spécifications pour les petits écrans sont appliquées lorsque :

  • la largeur de l'écran (media query device-width) est de moins de 768 pixels; ou
  • la largeur de la fenêtre d'affichage (media query width) est de moins de 768 pixels.

1. Pages ou écrans de contenu

Page/écran de contenu affichant tous les éléments décrits à la Section 1. Pages ou écrans de contenu.

Chaque page ou écran de contenu comprend la barre de navigation du gouvernement du Canada, le titre du site ou de l'application, le titre de la page ou de l'écran, ainsi que le corps.

Dimensions

  • Largeur : 100 % (toute la largeur de la fenêtre d'affichage).

1.1. Barre de navigation du gouvernement du Canada

La barre de navigation du gouvernement du Canada comporte le mot-symbole « Canada » et les boutons Accueil, Retour en arrière, Menu, Recherche et Paramètres.

Emplacement

  • Alignée verticalement avec le haut de la page ou de l'écran.

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).

Présentation

  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #3c3c3c à #111.

1.1.1. Mot-symbole « Canada »

Emplacement

  • Aligné horizontalement avec le côté gauche de la barre de navigation du gouvernement du Canada.
  • Centré verticalement.

Dimensions

  • Largeur : 90 pixels.
  • Hauteur : 22 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Transparent.
  • Symbole du drapeau en blanc.
  • Équivalent textuel : « Symbole du gouvernement du Canada ».
  • Image : wmms.

1.1.2. Bouton « Accueil »

Page/écran de contenu où le bouton Acceuil est absent comme décrit dans les exceptions à la Section 1.1.2. Bouton « Acceuil ».

Emplacement

  • Lorsque le bouton Menu est présent : Aligné horizontalement avec le côté gauche du bouton Menu.
  • Lorsque le bouton Menu est absent, mais que le bouton Recherche est présent : Aligné horizontalement avec le côté gauche du bouton Recherche.
  • Lorsque le bouton Menu et le bouton Recherche sont absents : Aligné horizontalement avec le côté gauche du bouton Paramètres.

Dimensions

  • Largeur : 46 pixels.
  • Hauteur : 32 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Icône : Maison (Icône « maison »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Accueil ».

Comportement

  • L'activation du bouton Accueil renvoie l'utilisateur à la page ou l'écran d'accueil.

Exceptions

Le bouton Accueil est absent dans les cas suivants :

  • La page ou l'écran est la page ou l'écran d'accueil.
  • Le bouton Retour en arrière est présent.
  • L'activation du bouton Accueil est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple au cours d'un processus transactionnel.
  • Le site ou l'application ne comporte pas de page ou d'écran d'accueil.
  • Le site ou l'application ne comporte qu'une seule page ou un seul écran.

1.1.3. Bouton « Retour en arrière »

Page/écran de contenu où le bouton Acceuil a été remplacé par un bouton de retour en arrière comme décrit à la Section 1.1.3. Bouton « Retour en arrière ».

Emplacement

  • Lorsque le bouton Menu est présent : Aligné horizontalement avec le côté gauche du bouton Menu.
  • Lorsque le bouton Menu est absent et que le bouton Recherche est présent : Aligné horizontalement avec le côté gauche du bouton Recherche.
  • Lorsque le bouton Menu et le bouton Recherche sont absents : Aligné horizontalement avec le côté gauche du bouton Paramètres.

Dimensions

  • Largeur : 46 pixels.
  • Hauteur : 32 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Icône : Flèche vers l'arrière (Icône « flèche ver l'arrière »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Retour en arrière ».

Comportement

  • L'activation du bouton Retour en arrière renvoie l'utilisateur à la dernière page ou au dernier écran visionnés.

Exceptions

Le bouton Retour en arrière est absent dans les cas suivants :

  • Aucune page ou aucun écran n'a été visionné précédemment.
  • Le bouton Accueil est présent.
  • L'activation du bouton Retour en arrière est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple au cours d'un processus transactionnel.
  • Le site ou l'application ne compte qu'une seule page ou qu'un seul écran.

1.1.4. Bouton « Menu »

Page/écran de contenu où le bouton Menu est absent comme décrit dans les exceptions à la Section 1.1.4. Bouton « Menu ».

Emplacement

  • Lorsque le bouton Recherche est présent : Aligné horizontalement avec le côté gauche du bouton Recherche.
  • Lorsque le bouton Recherche est absent : Aligné horizontalement avec le côté gauche du bouton Paramètres.

Dimensions

  • Largeur : 46 pixels.
  • Hauteur : 32 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Icône : Trois barres (Icône « trois barres »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Menu ».

Comportement

  • L'activation du bouton Menu affiche la fenêtre de navigation superposée.

Exceptions

Le bouton Menu est absent dans les cas suivants :

  • Un mécanisme de navigation apparaît dans le corps.
  • L'activation d'un élément du menu est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple au cours d'un processus transactionnel.
  • Le site ou l'application ne comporte qu'une seule page ou qu'un seul écran.

1.1.5. Bouton « Recherche »

Page/écran de contenu où le bouton Recherche est absent comme décrit dans les exceptions à la Section 1.1.5. Bouton « Recherche ».

Emplacement

  • Aligné horizontalement avec le côté gauche du bouton Paramètres.

Dimensions

  • Largeur : 46 pixels.
  • Hauteur : 32 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Icône : Loupe (Icône « loupe »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Recherche ».

Comportement

  • L'activation du bouton Recherche affiche la fenêtre de recherche superposée.

Exceptions

Le bouton Recherche est absent dans les cas suivants :

  • La recherche n'est pas une fonction de l'application ou du site.
  • La recherche est la fonction principale du site ou de l'application, et le champ de recherche apparaît dans le corps.
  • L'activation de la recherche est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple au cours d'un processus transactionnel.

1.1.6. Bouton « Paramètres »

Page/écran de contenu affichant uniquement le bouton Paramètres comme décrit dans les exceptions des sous-sections de la Section 1. Pages ou écrans de contenu.

Emplacement

  • Aligné horizontalement avec le côté droit de la barre de navigation du gouvernement du Canada.

Dimensions

  • Largeur : 46 pixels.
  • Hauteur : 32 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Icône : Roue dentée (Icône « roue dentée »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Paramètres ».

Comportement

  • L'activation du bouton Paramètres affiche le menu Paramètres.

1.2. Titre du site ou de l'application

Page/écran de contenu où le titre du site ou de l'application est absent comme décrit dans les exceptions à la Section 1.2. Titre du site ou de l'application.

Emplacement

  • Aligné verticalement avec le bas de la barre de navigation du gouvernement du Canada.

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #6facd5 à #497bae.
  • Police : Verdana, sans-serif.
  • Taille de la police : 19,2 pixels.
  • Texte : Titre du site ou de l'application.

Exceptions

Le titre du site ou de l'application est absent dans les cas suivants :

  • Il est impossible d'accéder à la page ou l'écran sans passer tout d'abord par une autre page ou un autre écran du site ou de l'application, et cette page ou cet écran affiche le titre du site ou de l'application.

Les applications mobiles axées sur un appareil peuvent également omettre le titre de l'application lorsque :

  • L'application mobile axée sur un appareil est lancée par l'activation de l'icône d'application de l'application mobile axée sur un appareil, si le titre de l'application est affiché avec l'icône d'application.

1.3. Titre de la page ou de l'écran

Page/écran de contenu où le titre de la page ou de l'écran est absent comme décrit dans les exceptions à la Section 1.3. Titre de la page ou de l'écran.

Emplacement

  • Lorsque le titre du site ou de l'application est présent : Aligné verticalement avec le bas du titre du site ou de l'application.
  • Lorsque le titre du site ou de l'application est absent : Aligné verticalement avec le bas de la barre de navigation du gouvernement du Canada.

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).

Présentation

  • Couleur d'avant-plan : Noir (#000).
  • Bordure : bas seulement; 1 pixel pointillé, #ccc.
  • Police : Verdana, sans-serif.
  • Taille de la police : 21,76 pixels.
  • Texte : Titre de la page ou de l'écran.

Exceptions

  • Le site ou l'application ne comporte qu'une seule page ou qu'un seul écran.

1.4. Corps

Le corps contient le contenu ou l'interface du site ou de l'application.

Emplacement et dimensions

  • Le corps occupe tout l'espace de la page ou de l'écran qui n'est pas utilisé par la barre de navigation du gouvernement du Canada, le titre du site ou de l'application et le titre de la page ou de l'écran. Lorsque le titre du site ou de l'application ou le titre de la page ou de l'écran sont absents, le corps s'étend de façon à occuper tout l'espace non utilisé.

Présentation

  • Couleur d'arrière-plan : Blanc (#fff).
  • Police : Verdana, sans-serif.
  • Taille de la police : Au moins 16 pixels.

2. Pages ou écrans de message du serveur

Page ou écran de message du serveur unilingue comme décrit à la Section 2. Pages ou écrans de message du serveur.

La page ou l'écran de message du serveur comprend le titre du site ou de l'application et le corps.

S'il est possible de déterminer la langue de l'utilisateur, le message du serveur n'est présenté que dans cette langue. Dans le cas contraire, le message du serveur est présenté dans chacune des langues dans lesquelles le site ou l'application sont disponibles.

2.1. Titre du site ou de l'application

Le titre du site ou de l'application s'affiche dans chacune des langues dans lesquelles le message du serveur est affiché.

Emplacement

  • Première langue officielle : Alignée verticalement avec le haut de la page ou de l'écran.
  • Seconde langue officielle : Alignée verticalement avec le bas du titre du site ou de l'application dans la première langue officielle.
  • Langues supplémentaires : Alignées verticalement avec le bas du titre précédent du site ou de l'application.

Présentation

  • Couleur d'avant-plan : #295376.
  • Couleur d'arrière-plan : Blanc (#fff).
  • Police : Verdana, sans-serif.
  • Taille de la police
    • Première et seconde langue officielle : 19,2 pixels.
    • Langues supplémentaires : 15,3667 pixels.
  • Texte :
    • Première langue officielle : Titre du site ou de l'application dans la première langue officielle.
    • Seconde langue officielle : Titre du site ou de l'application dans la seconde langue officielle.
    • Langues supplémentaires : Titre du site ou de l'application dans la langue supplémentaire et dans l'alphabet de cette langue.
  • Bordure :
    • Après le dernier titre du site ou de l'application : au bas seulement; 1 pixel uni, #666.

2.2. Corps

Le corps comprend un bloc de message du serveur et un lien Avis dans chaque langue dans laquelle le message du serveur est affiché, ainsi que le mot-symbole « Canada ».

2.2.1. Blocs de message du serveur

Chaque bloc de message du serveur contient le titre du message, le corps du message ainsi que des liens vers la page ou l'écran d'accueil et les coordonnées.

Emplacement

  • Première langue officielle : Alignée verticalement avec le bas du dernier titre du site ou de l'application.
  • Seconde langue officielle : Alignée verticalement avec le bas du bloc de message du serveur dans la première langue officielle.
  • Langues supplémentaires : Alignées verticalement avec le bas du bloc de message du serveur précédent.

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).
2.2.1.1. Titre du message du serveur

Emplacement

  • Aligné verticalement avec le haut du bloc de message du serveur.
  • Aligné horizontalement avec le côté gauche du bloc de message du serveur.

Présentation

  • Texte : Titre du message du serveur dans la langue du bloc de message du serveur et dans l'alphabet de cette langue.
2.2.1.2. Corps du message du serveur

Emplacement

  • Aligné verticalement avec le bas du titre du message du serveur.
  • Aligné horizontalement avec le côté gauche du bloc de message du serveur.

Présentation

  • Texte : Corps du message du serveur dans la langue du bloc de message du serveur et dans l'alphabet de cette langue.
2.2.1.3. Lien « Accueil »

Emplacement

  • Sous le corps du message.
  • Aligné horizontalement avec le côté gauche du bloc de message du serveur.

Présentation

  • Texte : « Accueil » dans la langue du bloc de message du serveur et dans l'alphabet de cette langue.

Comportement

  • L'activation du lien Accueil renvoie l'utilisateur à la page ou l'écran d'accueil.

Exceptions

  • Le site ou l'application ne comporte pas de page ou d'écran d'accueil.
  • Le site ou l'application ne comporte qu'une seule page ou qu'un seul écran.
2.2.1.4. Lien « Coordonnées »

Emplacement

  • Sous le lien Accueil.
  • Aligné horizontalement avec le côté gauche du bloc de message du serveur.

Présentation

  • Texte : « Contactez-nous » dans la langue du bloc de message du serveur et dans l'alphabet de cette langue.

Comportement

  • L'activation du lien Coordonnées envoie l'utilisateur à la page ou l'écran où se trouvent les coordonnées.

2.2.2. Lien « Avis »

Le lien Avis s'affiche dans chacune des langues utilisées dans le message du serveur.

Emplacement

  • Première langue officielle : Alignée verticalement avec le bas du dernier bloc de message du serveur.
  • Seconde langue officielle : Alignée verticalement avec le bas du lien Avis dans la première langue officielle.
  • Langues supplémentaires : Alignées verticalement avec le bas du lien Avis précédent.
  • Aligné horizontalement avec le côté gauche de la page ou de l'écran.

Présentation

  • Texte :
    • Première langue officielle : « Avis » dans la première langue officielle.
    • Seconde langue officielle : « Avis » dans la seconde langue officielle.
    • Langues supplémentaires : « Avis » dans la langue supplémentaire et dans l'alphabet de cette langue.

Comportement

2.2.3. Mot-symbole « Canada »

Emplacement

  • Sous le dernier lien Avis.
  • Centré horizontalement.

Dimensions

  • Largeur : 90 pixels.
  • Hauteur : 22 pixels.

Présentation

  • Couleur d'avant-plan : Noir (#000).
  • Couleur d'arrière-plan : Blanc (#fff).
  • Texte en noir et symbole du drapeau rouge PCIM.
  • Équivalent textuel : « Symbole du gouvernement du Canada ».
  • Affiché en tant qu'élément dans le bloc.
  • Image : wmms.

3. Pages ou écrans d'entrée

Page ou écran d'entrée bilingue comme décrit à la Section 3. Pages ou écrans d'entrée.

Les pages ou écrans d'entrée contiennent une bannière d'accueil, un bloc de titre du site ou de l'application, un bloc de liens de choix de langue, un bloc de liens Avis et le mot-symbole « Canada ».

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).

Présentation

  • Couleur d'arrière-plan : Blanc (#fff).

Exceptions

  • Les sites Web et les applications Web qui ont une adresse unilingue n'utilisent pas de page ou d'écran d'entrée.
  • Les applications mobiles axées sur un appareil utilisent un écran de démarrage des applications plutôt qu'un écran d'entrée.

3.1. Bannière d'accueil

Emplacement

  • Aligné verticalement avec le haut de la page ou de l'écran.
  • Aligné horizontalement avec le côté gauche de la page ou de l'écran.

Dimensions

  • Largeur : 100 % (toute la largeur de la page ou de l'écran).
  • Hauteur : 189 pixels.

Présentation

  • Couleur d'avant-plan : Noir (#000).
  • Image d'arrière-plan : splashpage-background.jpg.
  • Texte : « Welcome/Bienvenue ».

3.2. Bloc du titre du site ou de l'application

Le bloc du titre du site ou de l'application contient le titre dans chacune des langues affichées dans le site ou l'application.

Emplacement

  • Sous la bannière d'accueil.

Présentation

  • Couleur d'avant-plan : Noir (#000).

3.2.1. Titre du site ou de l'application dans la première langue officielle

Emplacement

  • Aligné verticalement avec le haut du bloc du titre du site ou de l'application.
  • Aligné horizontalement avec le côté gauche du bloc du titre du site ou de l'application.
  • Sur la même ligne de base que le titre du site ou de l'application dans la seconde langue officielle.

Présentation

  • Texte : Titre du site ou de l'application, dans la première langue officielle.
  • Alignement : Aligné à gauche.

3.2.2. Titre du site ou de l'application dans la seconde langue officielle

Emplacement

  • Aligné verticalement avec le haut du bloc du titre du site ou de l'application.
  • Aligné horizontalement avec le côté droit du bloc du titre du site ou de l'application.
  • Sur la même ligne de base que le titre du site ou de l'application dans la première langue officielle.

Présentation

  • Texte : Titre du site ou de l'application dans la seconde langue officielle.
  • Alignement : Aligné à droite.

3.2.3. Titre du site ou de l'application dans les langues supplémentaires

Emplacement

  • Sous le titre du site ou de l'application dans la première et la seconde langue officielle.
  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Aligné horizontalement avec le côté gauche du bloc du titre du site ou de l'application.
    • Sur la même ligne de base que la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Aligné horizontalement avec le côté droit du bloc du titre du site ou de l'application.
    • Sur la même ligne de base que la langue supplémentaire précédente désignée par un chiffre impair.

Présentation

  • Texte : Titre du site ou de l'application dans la langue supplémentaire et dans l'alphabet de cette langue.
  • Alignement :
    • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair : Aligné à gauche.
    • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair : Aligné à droite.

3.3. Bloc des liens de sélection de la langue

Le bloc des liens de sélection de la langue contient des liens vers chacune des langues affichées dans le site ou l'application.

Emplacement

  • Sous le bloc du titre du site ou de l'application.

3.3.1. Liens de sélection de la langue pour la première langue officielle

Emplacement

  • Alignés verticalement avec le haut du bloc des liens de sélection de la langue.
  • Alignés horizontalement avec le côté gauche du bloc des liens de sélection de la langue.
  • Sur la même ligne de base que le lien de sélection de la langue pour la seconde langue officielle.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Texte : Nom officiel de la première langue officielle, dans cette langue et selon son alphabet.

3.3.2. Lien de sélection de la langue pour la seconde langue officielle

Emplacement

  • Aligné verticalement avec le haut du bloc des liens de sélection de la langue.
  • Aligné horizontalement avec le côté droit du bloc des liens de sélection de la langue.
  • Sur la même ligne de base que le lien de sélection de la langue pour la première langue officielle.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Texte : Nom officiel de la seconde langue officielle, dans cette langue et selon son alphabet.

3.3.3. Lien de sélection de la langue pour les langues supplémentaires

Emplacement

  • Sous les liens de sélection de la langue pour la première et pour la seconde langue officielle.
  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Aligné horizontalement avec le côté gauche du bloc des liens de sélection de la langue.
    • Sur la même ligne de base que le lien de sélection de la langue pour la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Aligné horizontalement avec le côté droit du bloc des liens de sélection de la langue.
    • Sur la même ligne de base que le lien de sélection de la langue pour la langue supplémentaire précédente désignée par un chiffre impair.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #444 à #2d2d2d.
  • Texte : Nom officiel de la première langue officielle, dans cette langue et selon son alphabet.

3.4. Bloc des liens « Avis »

Le bloc Avis contient des liens vers les avis, dans chacune des langues affichées dans le site ou l'application.

Emplacement

  • Sous le bloc des liens de sélection de la langue.

3.4.1. Liens « Avis » dans la première langue officielle

Emplacement

  • Alignés verticalement avec le haut du bloc des liens Avis.
  • Alignés horizontalement avec le côté gauche du bloc des liens Avis.
  • Sur la même ligne de base que le lien Avis de la seconde langue officielle.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f5f5f5 à #5d5d5.
  • Texte : « Avis » dans la première langue officielle et dans l'alphabet de cette langue.

3.4.2. Lien « Avis » dans la seconde langue officielle

Emplacement

  • Aligné verticalement avec le haut du bloc des liens Avis.
  • Aligné horizontalement avec le côté droit du bloc des liens Avis.
  • Sur la même ligne de base que le lien Avis de la première langue officielle.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f5f5f5 à #5d5d5.
  • Texte : « Avis » dans la seconde langue officielle et dans l'alphabet de cette langue.

3.4.3. Lien « Avis » dans les langues supplémentaires

Emplacement

  • Sous les liens Avis de la première et de la seconde langue officielle.
  • Première et troisième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre impair :
    • Aligné horizontalement avec le côté gauche du bloc des liens Avis.
    • Sur la même ligne de base que le lien Avis de la langue supplémentaire suivante désignée par un chiffre pair.
  • Deuxième et quatrième langues supplémentaires et langues supplémentaires subséquentes désignées par un chiffre pair :
    • Aligné horizontalement avec le côté droit du bloc des liens Avis.
    • Sur la même ligne de base que le lien Avis de la langue supplémentaire précédente désignée par un chiffre impair.

Dimensions

  • Largeur : 50 % de la largeur de la page ou de l'écran.
  • Hauteur : 36 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f5f5f5 à #5d5d5.
  • Texte : « Avis » dans la langue supplémentaire et dans l'alphabet de cette langue.

3.5. Mot-symbole « Canada »

Emplacement

  • Aligné verticalement avec le bas de la page ou de l'écran.
  • Centré horizontalement.

Dimensions

  • Largeur : 90 pixels.
  • Hauteur : 22 pixels.

Présentation

  • Couleur d'avant-plan : Noir (#000).
  • Couleur d'arrière-plan : Blanc (#fff).
  • Texte en noir et symbole du drapeau rouge PCIM.
  • Équivalent textuel : « Symbole du gouvernement du Canada ».
  • Affiché en tant qu'élément dans le bloc.
  • Image : wmms.

4. Fenêtres de contenu superposées

Chaque fenêtre de contenu superposée s'affiche par-dessus la page ou l'écran et comporte une barre de titre et un corps. Les fenêtres de contenu superposées sont utilisées pour présenter du contenu comme des images et des vidéos en mode plein écran, ou encore de l'aide contextuelle.

4.1. Barre de titre

La barre de titre contient le titre et les boutons Retour en arrière et Fermer.

Emplacement

  • Aligné verticalement avec le haut de la fenêtre de contenu superposée.

Dimensions

  • Largeur
    • Lorsque le titre du contenu superposé est présent : 100 % (pleine largeur du contenu superposé).
    • Lorsque le titre du contenu superposé est absent : largeur du bouton Fermer.

Présentation

  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #3c3c3c à #111.

4.1.1. Titre

Emplacement

  • Centré horizontalement et verticalement.

Dimensions

  • Largeur : Largeur de la barre de titre, moins la largeur des boutons Retour en arrière et Fermer.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Une seule ligne, aucun emballage.
  • Dépassement : Ellipse.

Exceptions

Le titre est absent dans le cas suivant :

  • La fenêtre ne comporte qu'un seul élément, par exemple, une carte, une photo ou une vidéo.

4.1.2. Bouton « Retour en arrière »

Emplacement

  • Aligné horizontalement avec le côté gauche de la barre de titre.

Dimensions

  • Largeur : 18 pixels.
  • Hauteur : 18 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Transparent.
  • Icône : Flèche vers l'arrière (Icône « flèche vers l'arrière »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Retour en arrière ».

Comportement 

  • L'activation du bouton Retour en arrière renvoie l'utilisateur au contenu superposé ou au menu à partir duquel la fenêtre de contenu superposée a été ouverte.

Exceptions

Le bouton Retour en arrière est absent dans les cas suivants :

  • Le contenu superposé n'a pas été lancé à partir d'un contenu superposé ou d'un menu.
  • L'activation du bouton Retour en arrière a le même effet que l'activation du bouton Fermer.

4.1.3. Bouton « Fermer »

Emplacement

  • Aligné horizontalement avec le côté droit de la barre de titre.

Dimensions

  • Largeur : 18 pixels.
  • Hauteur : 18 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Transparent.
  • Icône : X (Icône « X »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Fermer ».

Comportement

  • L'activation du bouton Fermer annule l'affichage du contenu superposé.

4.2. Corps

Emplacement

  • Aligné verticalement avec le bas de la barre de titre.

Dimensions

  • Largeur : Jusqu'à 100 % de la largeur de la fenêtre d'affichage.

Présentation

  • Lorsque le contenu est plus large que la fenêtre d'affichage, le contenu :
    • est redimensionné en fonction de la largeur ou
    • une barre de défilement horizontal s'affiche.

Comportement

  • Le corps est élargi ou rapetissé en fonction du contenu.

5. Menus

Menu où le bouton de retour en arrière est absent comme décrit à la Section 5. Menus et dans les exceptions à la Section 5.1.2. Bouton « Retour en arrière ».

Chaque menu s'affiche par-dessus la page ou l'écran et contient une barre de titre et un corps.

5.1. Barre de titre

La barre de titre contient le titre et les boutons Retour en arrière et Fermer.

Emplacement

  • Alignée verticalement avec le haut du menu.

Dimensions

  • Largeur
    • Lorsque le titre du menu est présent : 100 % (largeur totale du menu).
    • Lorsque le titre du menu est absent : largeur du bouton Fermer.

Présentation

  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #3c3c3c à #111.

5.1.1. Titre

Emplacement

  • Centré horizontalement et verticalement.

Dimensions

  • Largeur : Largeur de la barre de titre, moins la largeur des boutons Retour en arrière et Fermer.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Une seule ligne, aucun emballage.
  • Dépassement : Ellipse.

5.1.2. Bouton « Retour en arrière »

Menu affichant le bouton Retour en arrière comme décrit à la Section 5.1.2. Bouton « Retour en arrière ».

Emplacement

  • Aligné horizontalement avec le côté gauche de la barre de titre.

Dimensions

  • Largeur : 18 pixels.
  • Hauteur : 18 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Transparent.
  • Icône : Flèche vers l'arrière (Icône « flèche vers l'arrière »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Retour en arrière ».

Comportement

  • L'activation du bouton Retour en arrière renvoie l'utilisateur au niveau de menu précédent.

Exceptions

Le bouton Retour en arrière est absent dans le cas suivant :

  • Il n'existe aucun niveau de menu précédent.

5.1.3. Bouton « Fermer »

Emplacement

  • Aligné horizontalement avec le côté droit de la barre de titre.

Dimensions

  • Largeur : 18 pixels.
  • Hauteur : 18 pixels.

Présentation

  • Couleur d'avant-plan : Blanc (#fff).
  • Couleur d'arrière-plan : Transparent.
  • Icône : X (Icône « X »), 18 pixels par 18 pixels, centré horizontalement et verticalement.
  • Équivalent textuel : « Fermer ».

Comportement

  • L'activation du bouton Fermer permet de fermer tous les menus ouverts.

5.2. Corps

Emplacement

  • Aligné verticalement avec le bas de la barre de titre.

Dimensions

  • Largeur : Jusqu'à 100 % de la largeur de la fenêtre d'affichage.

Comportement

  • Le corps est élargi ou rapetissé en fonction du contenu.

5.2.1. Éléments du menu

Emplacement

  • S'il s'agit du premier élément du corps du menu : Aligné verticalement avec le bas de la barre de titre.
  • S'il s'agit du deuxième élément ou d'un élément subséquent du menu : Aligné verticalement avec le bas de l'élément précédent du menu.

Dimensions

  • Largeur
    • Lorsque le corps du menu contient seulement des éléments du menu : 100 % (largeur totale du menu).
    • Lorsque le corps du menu contient des éléments du menu et d'autres éléments : 100 % (largeur totale du corps).

Présentation

  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f5f5f5 à #5d5d5.

Comportement

  • L'activation d'un élément du menu affiche soit un sous-menu, une page ou un écran, ou une fenêtre de contenu superposée.

6. Fenêtre de navigation superposée

Fenêtre de navigation superposée comme décrite à la Section 6. Fenêtre de navigation superposée.

La fenêtre de navigation superposée est pratiquement identique à la fenêtre de contenu superposée, mis à part les quelques différences présentées ci-dessous.

6.1. Barre de titre

6.1.1. Titre

Présentation

  • Texte : « Menu ».

6.2. Corps

Le corps de la fenêtre de navigation superposée contient le fil d'Ariane, la navigation secondaire et la navigation du site ou de l'application.

6.2.1. Fil d'Ariane

Le fil d'Ariane présente une liste horizontale commençant par le lien Accueil, suivi des liens vers chacune des pages ou des écrans précédant la page ou l'écran actuels, selon la hiérarchie du site ou de l'application, et se terminant par le titre de la page ou de l'écran actuels.

Emplacement

  • Aligné verticalement avec le haut du corps.

Présentation

  • Couleur d'avant-plan :
    • Liens du fil d'Ariane : #295376.
    • Page ou écran actuels : #555.
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f0efef à #dfdfdd.
  • Texte :
    • Lien du fil d'Ariane Accueil : « Accueil ».
    • Liens du fil d'Ariane et page ou écran actuels : Titre de la page ou de l'écran correspondants.
  • Séparateur : bcrumb-mobile.png.

Comportement

  • Lien du fil d'Ariane Accueil :
    • L'activation du lien Accueil renvoie l'utilisateur à la page ou l'écran d'accueil.
  • Liens du fil d'Ariane subséquents :
    • L'activation des liens du fil d'Ariane amène l'utilisateur à la page ou l'écran correspondant(e).

Exceptions

La fenêtre de fil d'Ariane est absente dans les cas suivants :

  • La page ou l'écran est la page ou l'écran d'accueil.
  • L'activation d'un élément du fil d'Ariane est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple dans un processus transactionnel.

6.2.2. Navigation secondaire

Emplacement

  • Lorsque le fil d'Ariane est présent : Sous le fil d'Ariane.
  • Lorsque le fil d'Ariane est absent : En haut du corps.

Dimensions

  • 100 % de la largeur du corps.

Exceptions

La navigation secondaire est absente dans le cas suivant :

  • Elle n'est pas utilisée par le site ou l'application.

6.2.3. Navigation du site ou de l'application

Emplacement

  • Lorsque la navigation secondaire est présente : Sous la navigation secondaire.
  • Lorsque la navigation secondaire est absente et que le fil d'Ariane est présent : Sous le fil d'Ariane.
  • Lorsque la navigation secondaire et le fil d'Ariane sont absents : En haut du corps.

Dimensions

  • 100 % de la largeur du corps.

Exceptions

La navigation du site ou de l'application est absente dans le cas suivant :

  • Elle n'est pas utilisée par le site ou l'application.

7. Fenêtre de recherche superposée

Fenêtre de recherche superposée comme décrite à la Section 7. Fenêtre de recherche superposée.

La fenêtre de recherche superposée est pratiquement identique à la fenêtre de contenu superposée, mis à part les quelques différences mentionnées ci-dessous.

7.1. Barre de titre

7.1.1. Titre

Présentation

  • Texte : « Recherche ».

7.2. Corps

Le corps contient un champ de recherche et un bouton Recherche.

7.2.1. Champ de saisie de la recherche

Emplacement

  • Aligné verticalement avec le bas de la barre de titre, centré horizontalement.

Dimensions

  • Largeur : 100 % de la largeur du corps.
  • Hauteur : 31 pixels.

Présentation

  • Texte : « Recherche ».

7.2.2. Bouton « Recherche »

Emplacement

  • Aligné verticalement avec le bas du champ de recherche.
  • Aligné horizontalement avec le côté droit du corps.

Dimensions

  • Largeur : 100 % de la largeur du corps.
  • Hauteur : 39 pixels.

Présentation

  • Couleur d'avant-plan : Noir (#000).
  • Couleur d'arrière-plan : Dégradé linéaire du haut vers le bas de #f5f5f5 à #5d5d5.
  • Texte : « Recherche ».

Comportement

8. Menu « Paramètres »

Menu Paramètres comme décrit à la Section 8. Menu « Paramètres ».

Le menu Paramètres est pratiquement identique au Menu, mis à part les quelques différences présentées ci-dessous.

8.1. Barre de titre

8.1.1. Titre

Présentation

  • Texte : « Paramètres ».

8.2. Corps

Le corps contient les éléments de menu suivants :

  • Ouverture/fermeture de session.
  • Menu Langue.
  • Paramètres modifiables par l'utilisateur du site ou de l'application (autre que la langue).
  • Fenêtre d'information superposée À propos.

8.2.1. Élément de menu d'ouverture et de fermeture de session

L'élément de menu d'ouverture et de fermeture de session est pratiquement identique à un élément de menu, mis à part les quelques différences présentées ci-dessous.

Présentation

  • Texte :
    • Lorsqu'une session est ouverte : « Fermer la session ».
    • Lorsqu'une session est fermée : « Ouvrir une session ».

Comportement

  • Lorsqu'une session est ouverte : l'activation de l'élément de menu d'ouverture et de fermeture de session ferme la session de l'utilisateur dans le site ou l'application.
  • Lorsqu'aucune session n'est ouverte : l'activation de l'élément de menu d'ouverture ou de fermeture de session permet à l'utilisateur d'ouvrir une session dans le site ou l'application.

Exceptions

Le mécanisme d'ouverture ou de fermeture de session est absent dans le cas suivant :

  • Le site ou l'application ne nécessite pas d'ouverture de session pour les utilisateurs.

8.2.2. Élément de menu du menu « Langue »

L'élément de menu Langue est pratiquement identique à un élément de menu, mis à part les quelques différences présentées ci-dessous.

Présentation

  • Texte : « Langue ».

Comportement

  • L'activation de l'élément de menu Langue permet d'afficher le menu Langue.

Exceptions

L'élément de menu Langue est absent dans le cas suivant :

  • La modification de la langue est susceptible de causer une erreur de la part de l'utilisateur ou la perte de données, par exemple dans un processus transactionnel.

8.2.3. Éléments de menu pour les paramètres modifiables par l'utilisateur

Les éléments de menu Paramètres modifiables par l'utilisateur sont pratiquement identiques à un élément de menu, mis à part les quelques différences présentées ci-dessous.

Comportement

  • L'activation d'un élément de menu Paramètres modifiables par l'utilisateur permet d'afficher un sous-menu, une page ou un écran ou une fenêtre de contenu superposée ou de modifier un paramètre.

8.2.4. Élément de menu de la fenêtre d'information superposée « À propos »

Cet élément de menu est pratiquement identique à un élément de menu, mis à part les quelques différences présentées ci-dessous.

Présentation

  • Texte : « À propos ».

Comportement

  • L'activation de l'élément de menu À propos affiche la fenêtre superposée À propos.

9. Menu « Langue »

Menu Langue comme décrit à la Section 9. Menu « Langue ».

Le menu Langue est pratiquement identique à un menu, mis à part les quelques différences présentées ci-dessous.

9.1. Barre de titre

9.1.1. Titre du menu

Présentation

  • Texte : « Langue ».

9.2. Corps

Le corps du menu Langue compte un élément de menu pour chaque langue offerte par le site ou l'application.

9.2.1. Éléments de menu pour les langues

Chaque élément du menu Langue est pratiquement identique à un élément de menu, mis à part les quelques différences présentées ci-dessous.

Présentation

  • Texte : Le nom de la langue, dans cette langue et selon son alphabet.

Comportement

Dans le cadre des sites Web et des applications Web :

  • L'activation d'un élément de menu Langue modifie la langue du site ou de l'application en fonction de la langue sélectionnée.

Dans les applications mobiles axées sur un appareil :

  • L'activation d'un élément de menu Langue modifie la langue de l'application mobile selon la langue sélectionnée ou affiche les directives permettant d'obtenir l'application mobile dans la langue sélectionnée si celle-ci n'est pas installée.

10. Fenêtre d'information superposée « À propos »

Fenêtre d'informatino superposée À propos comme décrite à la Section 10. Fenêtre d'informatino superposée « À propos ».

La fenêtre d'information superposée À propos est pratiquement identique à une fenêtre de contenu superposée, mis à part les quelques différences présentées ci-dessous.

10.1. Barre de titre

10.1.1. Titre

Présentation

  • Texte : « À propos ».

10.2. Corps

Le corps de la fenêtre d'information superposée À propos contient le titre du site ou de l'application, l'indicateur de version, des liens vers des avis et les liens À propos de nous, Contactez-nous, Nouvelles et Restez branchés.

10.2.1. Titre du site ou de l'application

Emplacement

  • Aligné verticalement avec le bas de la barre de titre.
  • Aligné horizontalement avec le côté gauche du corps.

10.2.2. Indicateur de version

Emplacement

  • Sous le titre du site ou de l'application.
  • Aligné horizontalement avec le côté gauche du corps.

Exceptions

L'indicateur de version est absent dans le cas suivant :

La date de la dernière modification est indiquée.

10.2.3. Lien « Avis »

Emplacement

  • Sous l'indicateur de version.
  • Aligné horizontalement avec le côté gauche du corps.

Comportement

10.2.4. Lien « Transparence »

Emplacement

  • Sous le lien Avis.
  • Aligné horizontalement avec le côté gauche du corps.

Comportement

Dans le cadre des sites Web et des applications Web :

  • L'activation du lien Transparence amène l'utilisateur à la page ou l'écran principaux du ministère sur la transparence ou, lorsque le site ou l'application ne relève pas du ministère, à la page pangouvernementale sur l'établissement de rapports, dans le site Web du Secrétariat du Conseil du Trésor du Canada.

10.2.5. Lien « À propos de nous »

Emplacement

  • Sous le lien Avis.
  • Aligné horizontalement avec le côté gauche du corps.

Présentation

  • Texte : « À propos de nous ».

Comportement

  • L'activation du lien À propos de nous affiche des renseignements au sujet du site ou de l'application.

10.2.6. Lien « Contactez-nous»

Emplacement

  • Sous le lien À propos de nous.
  • Aligné horizontalement avec le côté gauche du corps.

Présentation

  • Texte : « Contactez-nous ».

Comportement

  • L'activation du lien Contactez-nous affiche les coordonnées pour le site ou l'application.

10.2.7. Lien « Nouvelles »

Emplacement

  • Sous le lien Contactez-nous.
  • Aligné horizontalement avec le côté gauche du corps.

Présentation

  • Texte : « Nouvelles ».

Comportement

  • L'activation du lien Nouvelles affiche des produits médiatiques, comme les communiqués de presse.

Exceptions

Le lien Nouvelles est absent dans le cas suivant :

  • Le site ou l'application n'affiche pas de produits médiatiques, comme des communiqués de presse.

10.2.8. Lien « Restez branchés »

Emplacement

  • Sous le lien Nouvelles.
  • Aligné horizontalement avec le côté gauche du corps.

Présentation

  • Texte : « Restez branchés ».

Comportement

  • L'activation du lien Restez branchés affiche des liens vers les médias sociaux, des abonnements à des courriels ou des fils de nouvelles.

Exceptions

Le lien Restez branchés est absent dans le cas suivant :

  • Le site ou l'application ne comporte pas de lien vers des médias sociaux, des abonnements à des courriels ou des fils de nouvelles.
Date de modification :