Rolle Landmarke

`search`

Ein Landmark, das ein Suchformular gruppiert. Damit können Screenreader-Nutzer direkt zur Seitensuche springen. Das native <search>-Element (HTML 2024) trägt diese Rolle automatisch; für breitere Browser-Unterstützung wird role="search" auf einem <form> empfohlen.

Verwendung

Um die primäre Suchfunktion einer Website – in der Regel ein <form> mit einem Eingabefeld und einem Absenden-Button. Empfohlen wird das native <search>-Element, da es das Landmark automatisch mitbringt. Für ältere Browser wird stattdessen role="search" auf dem <form> eingesetzt.

Der Zweck des Landmarks besteht darin, die Suchfunktion im Landmark-Menü des Screenreaders sichtbar zu machen, sodass Nutzer direkt dorthin navigieren können. Ohne das Landmark ist das Suchformular lediglich ein weiteres Formular auf der Seite.

Das Eingabefeld innerhalb des Such-Landmarks sollte <input type="search"> verwenden – das liefert die Such-Semantik für das Feld, den plattformeigenen Löschen-Button und auf mobilen Geräten eine „Suchen“-Eingabetaste.

Wann ein Label benötigt wird

Ein einzelnes Such-Landmark benötigt kein Label. Sind mehrere Suchen auf derselben Seite vorhanden – etwa eine globale Seitensuche im Header und eine Filtersuche im Seiteninhalt –, sollte jede einzeln beschriftet werden: „Seitensuche“, „Ergebnisse filtern“.

Häufige Fehler

Suchformular ohne Landmark. Nutzer können nicht per Landmark-Navigation dorthin navigieren.
role="search" wird auf dem <input> statt auf dem umgebenden <form> oder Container angewendet. Die Rolle gehört auf den Container, nicht auf das Feld.
Mehrere Such-Landmarks ohne Labels.
Das Such-Landmark umschließt nur das Eingabefeld, nicht den Absenden-Button. Nutzer finden das Feld, aber der Button liegt außerhalb des Landmarks.
role="search" wird auf ein generisches „Nach Name suchen“-Feld innerhalb einer CRUD-Seite angewendet – das ist eine Filterung, keine Seitensuche.

Beispiel

<!-- Bevorzugt (modernes HTML) -->
<search>
  <form action="/search">
    <label for="q">Search</label>
    <input id="q" type="search" name="q">
    <button type="submit">Go</button>
  </form>
</search>

<!-- Breitere Browser-Unterstützung heute -->
<form role="search" action="/search">
  <label for="q2">Search</label>
  <input id="q2" type="search" name="q">
  <button type="submit">Go</button>
</form>