search

Quand l’utiliser

Autour de l’affordance de recherche principale du site — généralement un <form> contenant un champ de saisie et un bouton de soumission. Utilisez l’élément natif <search> si vous le pouvez ; il fournit le landmark gratuitement. Pour les navigateurs plus anciens, appliquez role="search" au <form> à la place.

L’intérêt du landmark est d’exposer l’affordance de recherche dans le menu des landmarks du lecteur d’écran afin que les utilisateurs puissent y accéder directement. Sans le landmark, le formulaire de recherche n’est qu’un formulaire parmi d’autres sur la page.

Le champ à l’intérieur du landmark de recherche doit utiliser <input type="search"> — cela fournit la sémantique de recherche sur le champ, l’affordance de bouton d’effacement sur la plateforme et une touche Entrée « Rechercher » sur mobile.

Quand étiqueter

Un seul landmark de recherche n’a pas besoin d’un label. Si vous disposez de plusieurs recherches sur la même page (une recherche globale du site dans l’en-tête ET une recherche de filtre dans le contenu de la page), étiquetez chacune — « Recherche du site », « Filtrer les résultats ».

Erreurs fréquentes

• Formulaire de recherche sans landmark. Les utilisateurs ne peuvent pas y accéder par la navigation par landmark.
• role="search" appliqué au <input> plutôt qu’au <form> ou à l’élément englobant. Le rôle appartient au conteneur, pas au champ.
• Plusieurs landmarks de recherche sans labels.
• Landmark de recherche englobant uniquement le champ de saisie mais pas le bouton de soumission. Les utilisateurs trouvent le champ, mais le bouton se situe en dehors du landmark.
• Utiliser role="search" sur un champ générique « rechercher par nom » dans une page CRUD — sur-appliqué ; c’est un filtre, pas une recherche du site.

Exemple

<!-- Privilégié (HTML moderne) -->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- Prise en charge plus large aujourd'hui -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>