Input Search

Verwendung

Elemente vom Typ input type="search" dienen der Eingabe von Suchbegriffen.

Die Komponente besteht aus dem eigentlichen Eingabefeld und optional einem zugeordneten Text-Button oder einem integrierten Icon-Button, womit die Suche ausgelöst wird. Buttons können aus Platzgründen entfallen, zum Beispiel in einem Filter oder in Tabellen und Data Grids, aber auch 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). Das Suchfeld sollte aber über eine ausreichende Breite verfügen, damit typische Eingaben vollständig dargestellt werden können.

Beschriftung

Felder vom Typ input type="search" benötigen zwingend eine Beschriftung, in welcher der Zweck beschrieben wird; dies wird idealerweise über ein visuell sichtbares und explizit verknüpftes <label> erreicht. aria-labelledby oder aria-label können aus Platzgründen ebenfalls verwendet werden, allerdings muss dann das <label>-Element entfallen, Doppler aus beidem sind nicht zulässig.

Bitte beachten Sie, dass Platzhalter-Texte mittels placeholder kein geeigneter Label-Ersatz sind.

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 Hellgrau, das enthaltene Icon behält seine Farbe.

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.

disabled

Sucheingabefelder haben keinen inaktiven Zustand.

Barrierefreiheit

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.

Relevante BITV-Anforderungen

• 1.3.5 Bestimmung des Eingabezwecks
• 2.4.6 Überschriften und Beschriftungen (Labels)
• 2.4.7 Fokus sichtbar
• 2.5.3 Beschriftung (Label) im Namen
• 3.2.1 Bei Fokus
• 3.2.2 Bei Eingabe
• 3.3.2 Beschriftungen (Labels) oder Anweisungen
• 3.3.3 Fehlerempfehlung
• 3.3.4 Fehlervermeidung (rechtliche, finanzielle, Daten)

Weitere Attribute

autofocus

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

Name:

Ein per for="$IDREF" und id="$IDREF" explizit zugeordnetes <label> beschreibt den Eingabezweck, bildet den sogenannten „Accessible Name“ und wird von Screenreadern zusammen mit der Rolle des Elements vorgelesen.
Wenn <label> nicht verwendet werden kann, dann soll per aria-labelledby auf eine sichtbare Beschriftung verwiesen werden. Sollte diese nicht vorhanden sein, dann bildet ein unsichtbares aria-label die nötige Beschriftung.

Rolle:

Wird in den Screenreadern JAWS, NVDA und VoiceOver als „Eingabefeld“ identifiziert.

Wert:

Der Wert wird aus dem eingegebenen Text gebildet.

Tastatur- & Maus-Bedienung:

Gemeinsam mit dem zugeordneten Formularelement, 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.