Ratgeber: Zwei Suchbereiche auf derselben Seite verständlich unterscheiden

Eine Seite kann zwei verschiedene Fragen stellen

Oben auf einer Vereinswebsite steht eine Suche über alle Inhalte. Weiter unten lässt sich nur die Liste der Kurse nach Wochentag und Ort filtern. Beide Bereiche sehen ähnlich aus, erfüllen aber unterschiedliche Aufgaben. MDN beschreibt das HTML-Element search als semantischen Behälter für Such- und Filterfunktionen und als Such-Landmarke. Daraus entsteht noch keine Suchlogik. Dieser Fachratgeber nutzt die aktuell geprüfte Dokumentation für einen eigenen Seitenentwurf; er stellt das Element nicht als neue Veröffentlichung des heutigen Tages vor.

Den Suchraum sichtbar erklären

Gib den beiden Bereichen eindeutige Bezeichnungen, etwa „Gesamte Website durchsuchen“ und „Kurse eingrenzen“. Die Beschriftung des Eingabefeldes sollte zusätzlich erklären, was dort eingegeben werden kann. Ein bloßes Lupensymbol lässt den Suchraum offen. Notiere in deinem Bauauftrag, welche Inhalte zur globalen Suche gehören und welche Filter nur die Kursliste verändern. Diese Vereinbarung hilft auch bei der Ergebnisanzeige: Nach einer Kurssuche sollen Besucher nicht rätseln, ob fehlende Nachrichtenartikel ein Fehler oder die beabsichtigte Begrenzung sind.

Ergebnisse und Bedienbereich ordnen

Die Dokumentation unterscheidet den Suchbereich von der eigentlichen Ergebnisdarstellung im Hauptinhalt. Für unseren Entwurf stehen deshalb Suchfeld und Filter zusammen, gefundene Kurse darunter in einem deutlich überschriebenen Ergebnisabschnitt. Plane außerdem eine Rücksetzfunktion, die nur die Kursfilter betrifft. Sie soll eine unabhängig eingegebene globale Suchanfrage nicht löschen. Das ist eine eigene Anforderung an deine Anwendung. Eine passende HTML-Struktur ersetzt weder diese Zustandsverwaltung noch die tatsächliche Übermittlung und Verarbeitung der Suchanfrage.

Ohne Vorwissen durch die Seite gehen

Prüfe den Entwurf zuerst nur mit der Tastatur. Die Reihenfolge sollte vom jeweiligen Suchfeld zu seinen Filtern und zur passenden Aktion führen. Kontrolliere anschließend mit einem geeigneten assistiven Werkzeug, ob beide Suchbereiche unterscheidbar sind. Teste einen Treffer, mehrere Treffer und keinen Treffer. Ergänze lange Kursnamen und eine schmale Bildschirmbreite, damit die Bedeutung der Beschriftungen nicht durch abgeschnittenen Text verloren geht. Für einen einfachen ersten Prototyp reicht eine kleine lokale Kursliste. Die Abnahme ist erfüllt, wenn jede Anfrage einen klaren Suchraum besitzt und die Ergebnisanzeige genau diesen Raum verständlich wiedergibt.