Sur un site avec beaucoup de contenu, un lecteur d'écran propose souvent de sauter directement d'une zone importante à l'autre : le menu principal, le contenu, le pied de page. Pendant longtemps, la zone de recherche n'en faisait pas partie, elle n'était qu'un formulaire parmi d'autres, repérable uniquement en parcourant la page champ par champ.
La balise <search> corrige ce manque : elle transforme la zone de recherche, ou de filtrage, en un repère de navigation à part entière, au même titre que le menu ou le contenu principal.
Définition
<search> désigne une portion de page dont le rôle est de chercher ou de filtrer du contenu : un champ de recherche global, mais aussi un ensemble de filtres sur une page de résultats ou un catalogue. C'est une balise récente dans la norme, qui porte nativement le rôle de repère, ou « landmark », search pour les technologies d'assistance, sans qu'il soit nécessaire d'ajouter quoi que ce soit en plus.
Syntaxe et attributs
<search> n'a aucun attribut qui lui soit propre : elle accepte les attributs globaux, plus, lorsque plusieurs zones de recherche coexistent sur la même page, l'attribut aria-label pour leur donner à chacune un nom distinct dans la liste des repères. Sans lui, deux zones nommées « search » de façon identique deviennent difficiles à distinguer au clavier.
<search>
<form action="/recherche">
<label for="q">Rechercher une formation</label>
<input type="search" id="q" name="q" />
<button type="submit">Chercher</button>
</form>
</search>Différence avec un simple formulaire
Un <form> décrit une intention d'envoi de données, quel que soit son contenu : connexion, inscription, recherche, paiement. Il n'est repéré par un lecteur d'écran que dans la liste des formulaires, une liste que beaucoup d'utilisateurs ne consultent jamais en premier. <search> ajoute une couche par-dessus : il place la même zone dans la liste des repères de navigation, celle que la plupart des utilisateurs de lecteur d'écran consultent en tout premier pour comprendre l'organisation d'une page. Avant l'existence de cette balise, la seule façon d'obtenir ce résultat était d'ajouter role="search" sur un <div> ou un <form> : cela fonctionnait, mais uniquement si personne n'oubliait cet attribut. <search> rend ce comportement natif, sans dépendre d'un attribut ARIA ajouté à la main.
Pas seulement un champ de recherche
La norme décrit <search> de façon plus large qu'un simple champ texte : elle convient aussi à un bloc de filtres sur une page de résultats, par exemple un ensemble de cases à cocher pour affiner une liste de formations par thème et par niveau. Le point commun de ces usages est le même : l'utilisateur cherche ou filtre du contenu qui se trouve ailleurs sur la page, et il doit pouvoir y accéder rapidement sans le confondre avec le reste de la navigation. Sur une page de résultats, ce repère précède souvent un <hgroup> annonçant le nombre de résultats trouvés et un sous-titre récapitulant les filtres actifs. Certaines interfaces de suggestions instantanées génèrent même leurs résultats depuis un <template>, cloné en JavaScript à chaque frappe.
Bonnes pratiques de placement
Un repère de navigation n'a de valeur que si l'utilisateur peut le trouver rapidement dans la liste que propose son lecteur d'écran. Mieux vaut donc placer <search> tôt dans la page, par exemple dans l'en-tête ou juste avant le contenu principal, plutôt que de le nicher au fond d'une colonne latérale secondaire. Il n'est pas nécessaire non plus qu'elle contienne un résultat instantané ou du JavaScript : un simple formulaire de recherche classique, sans aucune interactivité particulière, mérite tout autant d'être enveloppé dans ce repère.
<search> ne crée pas de nouvelle section dans le plan de titres de la page, contrairement à un <section>. C'est un repère pour la navigation par technologies d'assistance, pas un découpage supplémentaire du document : inutile de lui ajouter un titre s'il n'y en avait pas besoin avant.search ?Non, <search> vient en plus du formulaire, pas à sa place. Le <form> continue de gérer l'envoi des données ; <search> se contente d'envelopper cette zone pour la rendre repérable comme un repère de navigation à part entière.
search sur une même page ?Oui, par exemple une recherche globale dans l'en-tête du site et un bloc de filtres sur une page de catalogue. Dans ce cas, il est recommandé de donner à chacune un attribut aria-label différent, pour que la liste des repères reste compréhensible au clavier.
search change l'apparence visuelle de la zone qu'elle contient ?Non, cette balise n'a aucun style par défaut, exactement comme un menu de navigation. Elle ne change rien à l'apparence : sa seule fonction est sémantique, l'apparence reste entièrement à la charge du CSS.