1. Accueil  
  2. Design  
  3. Composants  
  4. Barre de recherche

Barre de recherche

Le composant Barre de recherche permet à l’utilisateur de faire des recherches dans un site Internet ou une application à partir de mots clés. 

Exemple


Quand les utiliser

On place la barre de recherche lorsqu’on veut mettre de l’avant l’option de recherche. Par exemple sur une page d’accueil, ou pour donner accès plus facilement à une base de données.

Il existe deux types de barre de recherche : simple et avancée.

Barre de recherche simple

La barre de recherche simple permet à l’utilisateur de faire des recherches à partir de mots simples ou de courtes phrases. Elle est constituée d’un champ texte ainsi que de l’icône de la loupe.

Exemple


Barre de recherche avancée

La barre de recherche avancée est similaire à la barre de recherche simple, mais se distingue par l’ajout de l’option « Recherche avancée » sous le champ texte, ce qui permet l’affichage des filtres à la recherche. On utilise la barre de recherche avancée lorsque des options de raffinement de recherche sont disponibles à l’utilisateur (exemples : dates, thèmes, régions).

Exemple


Comment l’utiliser

Une barre de recherche doit être facilement accessible pour permettre à l’utilisateur d’effectuer des requêtes rapidement.

L’option de recherche avancée est présentée sous la forme d’un lien situé sous le champ texte à gauche.

La barre de recherche doit être permissive afin d’accepter les erreurs et les fautes d’orthographe.

L’icône de la loupe est située à droite du champ texte. L’icône doit être présentée sous la forme d’un bouton cliquable qui permet de lancer la recherche.

Le texte de l’espace réservé (placeholder) permet d’indiquer à l’utilisateur à quel endroit il effectue sa recherche. Ce texte indicatif doit être situé dans la barre de recherche avec la mention « Rechercher sur [nom du site ou de la plateforme] ». La couleur du texte indicatif doit être distincte du texte de saisie du champ d’un gris clair pour ne pas confondre avec le texte d’une recherche.

Informations techniques

Dimensions

Le champ texte et le bouton ont une hauteur totale de 40 px. La largeur est variable selon la grille employée. Lorsque le texte saisi dans le champ déborde, le texte glisse vers la gauche en masquant le début du texte.

En format mobile, la barre de recherche garde les mêmes caractéristiques. La largeur est variable selon la grille employée et elle prend toujours la pleine largeur de celle-ci.

Le bouton de recherche est un carré de 40 px par 40 px avec l’icône de la loupe centrée dans celui-ci. La hauteur et la largeur de l’icône sont de 24 px.

Le bouton garde les mêmes caractéristiques et les mêmes dimensions en format mobile.

Espacements

Espace réservé

L’espace réservé est à 8 px de la limite gauche et droite du champ de recherche.

Barre de recherche avancée

En plus des informations données pour la barre de recherche simple, la barre de recherche avancée comprend l’ajout du texte « Recherche avancée ». Il doit être situé sous le champ texte avec un espacement de 12 px et aligné à la gauche de celui-ci.

La barre de recherche avancée en format mobile garde les mêmes caractéristiques. 

Exemple


CSS du champ
border: 1px solid #6B778A;
height: 40px;

CSS du texte de l’espace réservée
font-family: Open Sans;
font weight: regular;
font-size: 16px;
color: #6b778a; 

CSS du bouton
height: 40px;
width: 40px;
color: #095797;

CSS de l’icône de loupe
background-color: #ffffff;

CSS du lien de recherche avancée
font-family: Open Sans;
font weight: regular;
font-size: 14px;
color: #095797;

Couleurs inversées

Il est possible d’inverser les couleurs de la barre de recherche lorsque celle-ci est affichée sur un arrière-plan foncé. Voici les ajustements à prévoir :

  • Les couleurs du champ de recherche et du texte de l’espace réservé (placeholder) restent inchangées.
  • La couleur du lien « Recherche avancée » est blanche (#FFFFFF).
  • La couleur du bouton de recherche est blanche (#FFFFFF).
  • La couleur de l’icône de la loupe est bleue (#095797).

Si le lien « Recherche avancée » n’est pas utilisé, il est essentiel que la couleur de fond du conteneur (où la barre de recherche est placée) offre un contraste significatif, soit un rapport de contraste de 3:1 et plus par rapport à la couleur de contour du champ ou à l’arrière-plan blanc du champ.

Si le lien « Recherche avancée » est utilisé, la couleur de fond du conteneur doit présenter un contraste encore plus élevé, avec un rapport de contraste supérieur à 4.5:1 par rapport à la couleur blanche du lien.

Exemple


CSS du bouton
background-color: #ffffff;

CSS de l’icône de loupe
background-color: #095797;

CSS du lien de recherche avancée
color: #ffffff;

Dernière mise à jour : 12 octobre 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec