FigmaOpenCode

Search

Synonyme: Suche, Suchfeld, Search Field, Search Input, Search Box, Suchbox
Ähnliche Komponenten: Input Text, Button, Input Group

Kurzbeschreibung

Ermöglicht es Nutzenden, Inhalte und Informationen wie z. B. Verwaltungsleistungen mithilfe eines Suchbegriffs schnell zu finden.

Beispiele

Search mit Label

Code anzeigen

<search class="kern-form-input">
<label class="kern-label" for="search-input-with-label">Suche</label>
<div class="kern-input-group">
  <input class="kern-form-input__input" id="search-input-with-label" name="search" type="search" />
  <button class="kern-btn kern-btn--primary">
    <span class="kern-icon kern-icon--search" aria-hidden="true"></span>
    <span class="kern-label">Suchen</span>
  </button>
</div>
</search>

Search mit Label und Icon-Only Button

Hinweis zur Barrierefreiheit

Wenn für den Search-Button ausschließlich ein Icon verwendet wird, muss aus Gründen der Barrierefreiheit zwingend ein Label genutzt werden.

Code anzeigen

<search class="kern-form-input">
<label class="kern-label" for="search-input-icon-only">Suche</label>
<div class="kern-input-group">
  <input class="kern-form-input__input" id="search-input-icon-only" name="search" type="search" />
  <button class="kern-btn kern-btn--primary">
    <span class="kern-icon kern-icon--search" aria-hidden="true"></span>
    <span class="kern-label kern-sr-only">Suchen</span>
  </button>
</div>
</search>

Search ohne Label

Hinweis zur Verwendung

Verwende eine Search-Komponente ohne sichtbares Label nur in begründeten Ausnahmefällen, beispielsweise im Header. In allen anderen Fällen sollte die Suche über eine sichtbare Beschriftung verfügen. Ist kein sichtbares Label vorhanden, muss der Zweck der Suche programmatisch eindeutig benannt sein, z. B. über ‘aria-label‘.

Code anzeigen

<search class="kern-input-group">
<input class="kern-form-input__input" id="search-input-without-label" name="search" type="search" aria-label="Suche" />
<button class="kern-btn kern-btn--primary">
  <span class="kern-icon kern-icon--search" aria-hidden="true"></span>
  <span class="kern-label">Suchen</span>
</button>
</search>

Beschreibung

Die Search-Komponente besteht aus einem Suchfeld und einem Such-Button. Sie basiert auf der Input Group und kombiniert ein Eingabefeld mit einer Aktion zum Auslösen der Suche. Je nach Browser kann im Suchfeld zusätzlich eine native Clear-Funktion zum Zurücksetzen der Eingabe bereitgestellt werden.

Die Komponente kann sowohl als Standard- als auch als Block-Variante dargestellt werden. Außerdem stehen verschiedene Größen sowie unterschiedliche Darstellungen des Such-Buttons zur Verfügung.

Verwendungsregeln

Die Search-Komponente wird verwendet, wenn Nutzende Inhalte, Dokumente oder Daten wie z. B. Verwaltungsleistungen gezielt durchsuchen sollen. Im Gegensatz zu klassischen Formulareingaben ist die Suche eine dynamische und iterative Interaktion. Nutzende probieren häufig mehrere Suchbegriffe nacheinander aus, verfeinern ihre Eingaben oder beginnen eine Suche erneut. Die Search-Komponente kann sowohl zur Suche innerhalb einer einzelnen Seite als auch zum Durchsuchen umfangreicher Inhalte, die sich über mehrere Seiten verteilen, eingesetzt werden.

Wenn eine Suche angeboten wird, sollte sie innerhalb einer Anwendung konsistent an derselben Stelle platziert werden. Handelt es sich um eine seitenübergreifende (globale) Suche, wird diese von Nutzenden standardmäßig im oberen rechten Bereich der Seite erwartet. Die Suche sollte auf Desktop-Geräten nicht ausschließlich hinter einem Lupen-Icon verborgen werden, wenn sie für den Nutzungserfolg relevant ist. Es sollte immer geprüft werden, welche Bedeutung die Suche für den Nutzungserfolg hat. Ist sie zentral, sollte das Suchfeld direkt sichtbar sein. Ist sie ergänzend, kann die Suche hinter einem Lupen-Icon angeboten werden.

Verwende keinen Placeholder-Text als Ersatz für eine sichtbare Beschriftung. Placeholder verschwinden bei der Eingabe und bieten den Nutzenden daher keine dauerhafte Orientierung. Ist die Suche die wichtigste Aktion auf einer Seite, sollte der Such-Button als primäre Aktion dargestellt werden. Ist eine andere Aktion wichtiger, sollte der Such-Button als sekundäre oder sogar tertiäre Aktion dargestellt werden.

Dos und Don'ts

• Platziere die Suche auf allen Seiten konsistent an derselben Stelle.
• Stelle sicher, dass der Suchbegriff über eine Clear-Funktion oder das native Browserverhalten einfach zurückgesetzt werden kann.
• Verwende die Variante ohne sichtbares Label nur in begründeten Ausnahmefällen, z. B. im Header.
• Lasse den Suchbegriff nach dem Absenden im Suchfeld stehen, damit Nutzende ihn verfeinern können.
• Verwende Placeholder-Texte nicht als Ersatz für eine sichtbare Beschriftung.
• Reduziere die Suche auf Desktop-Geräten nicht ausschließlich auf ein Lupen-Icon, wenn sie für den Nutzungserfolg relevant ist.
• Verstecke eine zentrale Suchfunktion auf mobilen Geräten nicht hinter mehreren Bedienungsschritten.

Barrierefreiheit

Für die Search-Komponente gelten zudem die Hinweise zur Barrierefreiheit der verwendeten Komponenten:

• Input Text (Hinweis: Das Suchfeld nutzt zwar type="search", ist aber mit dem Input Text vergleichbar)
• Button

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 2.1.1

Native Clear-Funktion ist per Tastatur bedienbar