Barre de recherche
La barre de recherche permet à l’utilisateur d’effectuer des recherches sur un site Web ou une application en saisissant des mots-clés.
Exemple
Vue d’ensemble
Cette section offre un aperçu des contextes d’utilisation, de l’anatomie du composant et des contenus. Pour plus d’informations sur la composition, le comportement et les interactions, consulter l’onglet « Spécifications ».
Quand l’utiliser
Une barre de recherche est pertinente sur un site Web ou une application pour permettre aux utilisateurs de trouver rapidement des informations dans un contenu volumineux, d’accéder rapidement à ce qu’ils cherchent, de rechercher des informations spécifiques, d’obtenir de l’aide et du support, etc.
On peut ajouter à la barre de recherche un lien « Recherche avancée » lorsque des options de raffinement de recherche sont disponibles à l’utilisateur (exemples : dates, thèmes, régions).
Quand ne pas l’utiliser
La barre de recherche n’est pas pertinente si le contenu du site est modeste et facilement accessible sans recherche, ou si des options de navigation plus adaptées sont disponibles.
Anatomie
- Barre de recherche
- Champ de recherche, texte saisi et espace réservé (placeholder)
- Bouton de réinitialisation
- Bouton de recherche
- Lien vers la recherche avancée
Facultatif
Contenus
Information détaillée sur les éléments spécifiques présents dans l'interface, y compris des explications sur leur fonctionnement et leur utilisation optimale.
Champ de recherche et espace réservé (placeholder)
La barre de recherche n’a pas de libellé au-dessus pour une interface plus épurée. À la place, elle utilise un espace réservé (placeholder) comme « Rechercher sur [nom du site] » pour guider l’utilisateur. Ce texte succinct informe de la fonction du champ et doit être entièrement lisible en format mobile. Cependant, pour s'assurer que tous les utilisateurs comprennent la fonction du champ, il est essentiel d'ajouter une description accessible pour les technologies d'assistance, afin que le champ de recherche soit utilisable par tous.
Lien vers la recherche avancée
Utiliser un libellé textuel clair comme « Recherche avancée » est efficace pour guider les utilisateurs vers cette fonctionnalité.
Spécifications
Cette section présente des informations techniques sur la composition, les comportements fonctionnels et les interactions du composant. Les spécifications techniques détaillées sont disponibles dans la trousse de design.
Composition
Description détaillée des éléments constitutifs de l'interface, avec des informations précises sur son anatomie.
Barre de recherche
Positionnement et alignement : Alignée à gauche ou au centre de la page, selon le conteneur principal de la page. La barre de recherche doit être placée dans un élément large, bien visible (comme le bandeau d’en-tête du PIV ou en haut de la page), et non imbriquée dans d’autres éléments.
Dimensions : Sa largeur maximale est de 825 px, avec une largeur idéale de 640 px en format bureau. En format mobile, elle occupe idéalement toute la largeur disponible.
Espacements : Un dégagement minimal de 24 px en haut et en bas de la barre de recherche est recommandé.
Exemple
Champ de recherche, texte saisi et espace réservé (placeholder)
Positionnement et alignement : Le champ de recherche est placé à gauche des boutons de réinitialisation et de recherche. Le texte saisi et l’espace réservé (placeholder) sont alignés à gauche et centrés verticalement dans le champ.
Dimensions : Si le texte saisi ou le texte de l'espace réservé (placeholder) dépasse la largeur du champ, il est caché selon le comportement standard d’un champ texte. Le champ conserve toujours ses dimensions.
Bouton de réinitialisation
Positionnement : Placé à droite du champ de recherche.
Bouton de recherche
Positionnement : Placé à droite du champ de recherche et du bouton de réinitialisation, le cas échéant.
Lien vers la recherche avancée
Positionnement et alignement : Sous le champ de recherche, aligné à gauche.
Dimensions : Largeur variable, selon le libellé utilisé.
Styles
La couleur d’arrière-plan du conteneur doit avoir un contraste d’au moins 3:1 avec le contour du champ ou son fond blanc. Si le lien « Recherche avancée » est présent, le contraste d’arrière-plan du conteneur doit être supérieur à 4.5:1 par rapport au texte du lien.
Lorsque la barre de recherche est affichée sur un arrière-plan sombre, des ajustements à prévoir à aux couleurs du lien « Recherche avancée », du bouton de recherche et de l’icône de la loupe. Les couleurs du champ de recherche, du texte saisi et du texte de l’espace réservé (placeholder) restent inchangées.
Exemple
Comportements
Description des interactions possibles avec les éléments de l'interface, y compris l'utilisation de la souris et du clavier pour naviguer et effectuer des actions.
Fonctionnel
Fonctionnalités principales et secondaires, ainsi que leur comportement et les actions qu'ils déclenchent.
Bouton de réinitialisation
Le clic sur le bouton de réinitialisation efface le texte du champ de recherche sans recharger les résultats précédents, qui restent visibles jusqu’à une nouvelle recherche.
Lien vers la recherche avancée
Ce lien permet d’accéder aux filtres de recherche avancée. Il est possible d’afficher les filtres sous la barre de recherche ou dans une page dédiée. Éviter les boîtes de dialogue modales pour simplifier la navigation.
Interaction
Assistance sur la manière d’interagir avec la barre de recherche, que ce soit via la souris ou le clavier.
Souris
Instructions sur l’interaction avec la barre de recherche via la souris :
- Cliquer sur le champ de recherche pour saisir du texte.
- Cliquer sur le bouton de réinitialisation pour vider le champ de recherche.
- Cliquer sur le bouton de recherche pour soumettre votre requête.
Clavier
Instructions sur l’interaction avec la barre de recherche via le clavier :
- Utiliser la touche Tab pour accéder au champ de recherche.
- Appuyer sur la touche Entrée pour soumettre votre recherche.
- Utiliser la touche Tab pour accéder aux boutons de réinitialisation et de recherche.
- Lorsque le focus est sur les boutons de réinitialisation ou de recherche, appuyer sur la touche Entrée pour déclencher l’action correspondante.
Contribuer à améliorer le système de design
Pour nous assurer que cette page est utile et à jour, vous pouvez remplir le formulaire de demandes destinées à l’équipe Design de la Direction des communications numériques gouvernementales. Vous pouvez utiliser ce formulaire pour :
- nous transmettre des questions ou commentaires sur le système de design ;
- être ajouté à la liste d'envoi du système de design ;
- faire une demande de trousse, d'information pour un nouveau projet, etc. ;
- rapporter un bogue dans le site Web ou dans la trousse de développement.
Dernière mise à jour : 16 janvier 2026