Elemente vom input type="search" dienen der Eingabe von Suchbegriffen. Die Komponente besteht aus dem eigentlichen Eingabefeld und optional einem zugeordneten Icon-Button, der die Suche auslöst. Dieser kann aus Platzgründen entfallen, zum Beispiel in einem Filter oder einer Tabelle oder wenn die Suche durch Enter bzw. durch die Übernahme von Treffern aus einer autocomplete-Liste ausgelöst und beendet werden kann.
In den überwiegenden Fällen hat dieses Eingabefeld keine inhärente Breite, sondern richtet sich nach den Spalten des Gestaltungsrasters, in dem es eingesetzt wird (siehe Kapitel Formularelemente im Grid).
Beschriftung
Felder vom input type="search" benötigen zwingend eine visuell sichtbare Beschriftung, in welcher der Zweck beschrieben wird. Dies wird grundsätzlich über ein implizit oder explizit verknüpftes <label> erreicht. aria-label oder placeholder als Label-Ersatz sind nicht zulässig.
Tooltips
Bei Suchfeldern sind Tooltips nicht sinnvoll und somit nicht vorgesehen.
Design
Das Design der Zustände eines Suchfelds unterscheidet sich nicht von Feldern zur Texteingabe. Die Unterscheidung findet nur im Markup und über den Text des zugeordneten Labels statt. Allerdings werden Suchfelder immer nur in Verbindung mit einem Icon-Button verwendet, der die Suchanfrage an den Server auslöst
In den überwiegenden Fällen haben diese Formularelemente keine inhärenten Breiten in sich, sondern richten sich nach den Spalten des Gestaltungsrasters, in denen sie eingesetzt werden (siehe Kapitel Formularelemente im Grid).
Zustände
Wie alle interaktiven Elemente besitzen Sucheingabefelder verschiedene Zustände:
default
Die initiale Darstellung ohne Interaktion durch die Nutzenden. Formularelemente werden immer im Basisschriftgrad 1rem/16px implementiert.
hover
Bei Interaktion mit der Maus erhalten Eingabefelder vom Typ `input type="search"` eine sichtbare Hervorhebung und zusätzlich einen Farbwechsel. Der enthaltene rahmenlose Button zum Auslösen der Suche wird hiervon nicht beeinflusst, sondern erhält seinen eigenen `:hover`- Zustand nur, wenn mit ihm selbst interagiert wird. Dann richtet er sich nach den Regeln für Icon-Buttons, d. h. bei `:hover` wechselt er die Hintergrundfarbe in Blau, das enthaltene Icon wird Weiss eingefärbt.
focus
Bei Interaktion per Tastatur oder Setzen der Einfügemarke per Maus erhalten Eingabefelder vom Typ input type="search" einen sichtbaren Tastatur-Fokus, der über den hover-Effekt hinausgeht und somit Tastaturnutzer in der Orientierung unterstützt.
error
Sucheingabefelder haben keinen Fehler-Zustand. Sollte eine Suche keine Ergebnisse zurückliefern, so wird dieser Umstand anstelle der Suchtreffer angezeigt.
disabled
Sucheingabefelder haben keinen inaktiven Zustand.
Code
HTML
Suchfelder sollen nicht als Pflichtfelder deklariert werden. Entweder ist die Suche der einzige Zweck des Formulars, oder die Suche ist Bestandteil z. B. eines Filters, in dem alle Felder optional sind.
WAI-ARIA
Formularelemente müssen zwingend über das aria-describedby-Attribut mit den dazugehörigen Info- und Fehler-Texten verknüpft sein. Bitte beachten Sie, dass Screenreader hier typischerweise die Reihenfolge der IDs berücksichtigen und verknüpfte Texte dementsprechend in der Sortierung der IDs vorlesen, d. h. diese muss der visuellen und logischen Reihenfolge der Oberfläche entsprechen.
Das zugeordnete Label eines Inputs bildet den sogenannten „Accessible Name“ und wird von Screenreadern zusammen mit der Rolle des Elements vorgelesen.
Dabei muss das Label des Inputs in räumlich begrenzten Kontexten nicht zwangsläufig visuell angezeigt werden, sondern kann über die entsprechenden CSS-Klassen ausgeblendet werden, wenn sich der Eingabezweck aus dem zugeordneten Button zum Auslösen der Suche erschließt.
Von der Verwendung dieses Attributs zur automatischen Fokussierung von Formularelementen durch den Browser wird in den meisten Anwendungsfällen abgeraten. Begründete Ausnahmen kann es in Fällen geben, wenn eine Maske mit hoher Wahrscheinlichkeit genau diesen einen Zweck verfolgt, wie dies zum Beispiel bei einer Such-Seite der Fall sein kann.
minlength / maxlength
Bei Feldern mit Mengenbegrenzung wird das Erreichen des Maximums in verschiedenen Screenreader-/Browser-Kombinationen nur unzureichend akustisch ausgegeben. Dies stellt keinen Mangel im Sinne der BITV-Konformität dar.
Testhinweise & Akzeptanzkriterien
Tastatur- & Maus-Bedienung:
Gemeinsam mit dem zugeordneten Formular-Element, fokussiert wird immer das Control, nicht das Label. Das dem Label zugeordnete Formularelement reagiert grundsätzlich nur auf die Standard-Tasten bzw. -Tastenkombinationen der jeweiligen Betriebssysteme. Enter löst die Suche aus.
Sprachbedienung:
Der Sprachbefehl mit dem sichtbaren Label-Text fokussiert das zugeordnete Formularelement.
Zustände:
Default, Fokussiert. Disabled ist hier nicht vorgesehen – wenn eine Suche unmöglich ist oder nicht sinnvoll erscheint, dann soll sie folgerichtig nicht angezeigt werden.
Darstellung:
Der Schriftgrad kann Browser- oder Systemseitig um bis zu 200 % vergrößert werden, ohne dass Informationen verloren gehen. Bis zu 400 % müssen Inhalte so umbrechen, dass sie ohne horizontales Scrollen verfügbar sind.
