'/%3E%3C/svg%3E){kind=small}
Nouveau Components
Champ de recherche
Le champ de recherche permet à l’utilisateur de saisir une requête pour retrouver rapidement une information dans un site ou une application. Il repose sur un champ natif, un bouton d’effacement, un bouton de soumission et une région live qui rend compte du résultat. L’ensemble constitue un point de repère de recherche, identifié comme tel par les technologies d’assistance et accessible directement par leurs raccourcis de navigation.
Quand utiliser un champ de recherche
- Contenu volumineux : quand parcourir la navigation coûte plus cher que taper deux mots.
- Besoin connu : l'utilisateur sait ce qu'il cherche et veut y aller directement.
- Catalogue ou archive : une base d'articles, de documents, de références.
Quand ne pas en utiliser
- Peu de contenu : sur une dizaine de pages, la navigation suffit et la recherche donne de faux espoirs.
- Pour filtrer une liste affichée : c'est un filtre, pas une recherche. Le libellé doit le dire.
- Pour choisir dans une liste fermée : utiliser une liste déroulante avec filtrage, dont les valeurs sont connues.
Modes d'action
- Souris : saisie dans le champ, bouton d'effacement, bouton de soumission.
- Clavier : Entrée soumet depuis le champ. Le bouton d'effacement est un bouton réel, dans l'ordre de tabulation.
- Lecteur d'écran : le conteneur porte role="search" ; le résultat est annoncé par une région live, sans déplacer le focus.
Contenu
- Un label visible : le placeholder disparaît dès la première lettre et n'est pas un substitut.
- Deux intitulés distincts : le champ s'appelle « Rechercher » et le bouton « Lancer la recherche », sinon la commande vocale devient ambiguë.
- Un résultat toujours annoncé : nombre de réponses, absence de réponse, ou invitation à saisir un terme.
Mots-clés
- role="search" : région de recherche de la page. Elle apparaît dans la liste des régions du lecteur d'écran.
- input type="search" : champ de saisie de recherche, avec sa croix d'effacement native.
- Région live : zone dont la modification est annoncée sans déplacer le focus.
- Placeholder : texte d'exemple affiché dans un champ vide. Il ne remplace jamais le label.
Décomposition des composants
Un conteneur de recherche, un champ, deux boutons et une région de messages.
Le champ et son label
- Le label est visible et associé par for. Le placeholder le répète au mieux, il ne le remplace pas (WCAG 3.3.2).
- Le conteneur porte role="search", ce qui ajoute la recherche à la liste des régions navigables.
Le bouton d'effacement
- La croix native de input type="search" n'est pas atteignable au clavier : elle ne répond qu'à la souris. Elle est neutralisée en CSS et remplacée par un vrai bouton (WCAG 2.1.1).
- Le bouton porte un nom accessible, rend le focus au champ et annonce l'effacement.
- Le focus est rendu AVANT que le bouton ne soit masqué : masquer un élément qui a encore le focus le fait passer par le document (WCAG 2.4.3).
La restitution du résultat
- Toute soumission produit un message, y compris la soumission à vide. Sans cela, l'utilisateur ne sait pas si sa recherche a été prise en compte (WCAG 4.1.3).
- La région de messages n'est pas rattachée au champ par aria-describedby : le nombre de résultats deviendrait la description permanente du champ, relue à chaque prise de focus.
Lecteur d'écran
- Le champ est annoncé avec son label, pas avec son placeholder.
- Le nombre de résultats est annoncé sans déplacement de focus : l'utilisateur reste maître de sa navigation.
- Deux commandes voisines ne portent jamais le même intitulé.
- La région live existe dès le chargement, et elle est vide.
Le composant ne propose pas de liste de suggestions : il repose sur un champ natif et deux boutons, tous trois dans la séquence de tabulation. Pour une liste de suggestions, voir le composant Liste déroulante.
| Touche | Fonction |
|---|---|
| Tab | Déplace le focus vers le champ, puis vers le bouton d'effacement lorsqu'il est affiché, puis vers le bouton de soumission. |
| Maj + Tab | Déplace le focus vers l'élément précédent. |
| Entrée | Soumet la recherche depuis le champ. Active le bouton qui a le focus. |
| Espace | Active le bouton d'effacement ou de soumission lorsqu'il a le focus. |
| Échap | Efface le champ, là où le navigateur implémente ce comportement natif sur input type="search". |
| Touches d'édition | Saisie et correction dans le champ : caractères, déplacement du curseur, suppression. |
Note : la croix d'effacement native de input type="search" n'est pas atteignable au clavier. Elle est neutralisée en CSS et remplacée par un vrai bouton, qui rend le focus au champ avant d'être masqué.