searchbox

Quand l’utiliser

Utilisez <input type="search">. Les navigateurs affichent une affordance d’effacement, les claviers mobiles basculent sur une touche Entrée « Rechercher », et le champ est annoncé par les lecteurs d’écran comme « zone de saisie de recherche ».

role="searchbox" n’apparaît que dans deux cas :

• Un champ de recherche personnalisé construit sur un élément contenteditable (tokens enrichis, images collées, syntaxe de requête complexe).
• L’enrobage de l’intégralité de l’affordance de recherche dans un landmark <search> ou une région role="search", le champ intérieur utilisant toujours le type="search" natif.

Pour la recherche avec autocomplétion, utilisez role="combobox" sur le champ de recherche et associez-le à un role="listbox" de suggestions — searchbox lui-même ne possède pas de popup.

Erreurs fréquentes

• role="searchbox" sur un bouton. Le rôle s’applique au champ de saisie, pas au bouton avec icône de recherche à côté.
• Champ de recherche sans nom accessible. « Recherche » doit figurer dans un <label>, aria-label ou aria-labelledby — pas seulement dans le placeholder.
• Construction d’un formulaire de recherche sans enrober le champ et le bouton dans un landmark <search> ou role="search". Les utilisateurs de lecteur d’écran naviguent par landmark et perdent l’affordance.
• Utiliser role="searchbox" pour un champ « filtrer ce tableau ». Ce n’est pas une recherche sur l’ensemble du site ; un simple textbox ou combobox est plus précis.
• Soumission du formulaire à chaque frappe sans anti-rebond — déclenche des annonces continues de la technologie d’assistance.

Exemple

<search>
  <form role="search" action="/search">
    <label for="q">Search the site</label>
    <input id="q" type="search" name="q">
    <button type="submit">Search</button>
  </form>
</search>