Rolle Widget

`searchbox`

Kennzeichnet ein Element als Texteingabe für eine Suchaufgabe. Bevorzugt wird <input type="search"> – es bietet in den meisten Browsern einen Löschen-Button und die Such-Semantik von Haus aus. role="searchbox" kommt nur auf einem benutzerdefinierten contenteditable-Suchfeld zum Einsatz.

Verwendung

Empfohlen wird <input type="search">. Browser zeigen einen Button zum Leeren des Felds an, mobile Tastaturen wechseln zur „Suchen“-Eingabetaste, und das Eingabefeld wird von Screenreadern als „Suchfeld“ angesagt.

role="searchbox" tritt nur in zwei Fällen auf:

Eine benutzerdefinierte Sucheingabe basiert auf einem contenteditable-Element (komplexe Tokens, eingefügte Bilder, komplexe Abfragesyntax).
Die gesamte Suchfunktion ist in einem <search>-Landmark oder einer role="search"-Region eingebettet, und das enthaltene Eingabefeld verwendet weiterhin das native type="search".

Für eine Suche mit Autovervollständigung wird role="combobox" auf dem Suchfeld empfohlen, das mit einer role="listbox" für Vorschläge kombiniert wird – searchbox selbst unterstützt kein Popup.

Häufige Fehler

role="searchbox" auf einem Button. Die Rolle gehört auf das Eingabefeld, nicht auf den daneben stehenden Such-Button.
Sucheingabe ohne zugänglichen Namen. „Suchen“ sollte in einem <label>, aria-label oder aria-labelledby stehen – nicht nur im Platzhaltertext.
Ein Suchformular, das Eingabefeld und Button nicht in einem <search>-Landmark oder role="search" einschließt. Screenreader-Nutzer navigieren per Landmark und verlieren sonst die Suchfunktion.
role="searchbox" für ein „Tabelle filtern“-Feld. Das ist keine seitenweite Suche; textbox oder combobox ist dort genauer.
Formular sendet bei jedem Tastendruck ohne Entprellung ab – das löst bei assistiver Technologie kontinuierliche Ankündigungen aus.

Beispiel

<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>