Website-Suche optimieren
Von der Eingabe zum passenden Treffer
Suchfeld und Trefferliste: zwei Stellen, an denen Namen fehlen.
Suchzustände im Überblick
Eine Suche ist erst fertig, wenn jeder Ausgang weiterführt
Der Begriff bleibt sichtbar, der Fokus bleibt berechenbar und jede Antwort bietet einen nächsten Schritt. Diese Karte zeigt vier Zustände, die Sie vor dem Feinschliff Ihrer Trefferreihenfolge gestalten sollten.
Ausgangspunkt bleibt in jedem Zustand erhalten
Website durchsuchenAnfahrt Suchen- Fokus
- im Suchfeld
- Wert
- „Anfahrt“
- Bereich
- search
- 01
Suche läuft
„Anfahrt“ wird gesucht. Vorherige Treffer werden als veraltet kenntlich gemacht oder ersetzt.
role="status"••• höflich ansagen - 02
Treffer vorhanden
3 Treffer für „Anfahrt“. Titel, Auszug und Pfad erklären jedes Ziel, bevor es geöffnet wird.
role="status"✓ Zahl + Begriff - 03
Keine Treffer
Keine Treffer für „Anfhart“. Eine konkrete Korrektur, häufige Ziele und die Seitenübersicht öffnen neue Wege.
role="status"0 nicht leer lassen - 04
Suche nicht verfügbar
Die Suche konnte nicht geladen werden. Der Begriff bleibt stehen; Wiederholen und Seitenübersicht sind verständlich benannte Wege.
role="status"! Fehler + Ausweg
Treffer unter der Lupe
Ein Link. Vier Entscheidungshilfen.
Die Ergebnisliste selbst ist kein Status. Nach der kurzen Trefferzahl lesen Menschen sie in ihrem eigenen Tempo.
Bushaltestelle, Parkplätze und der stufenlose Weg zum Haupteingang.
- 1
Ein LinkzielDer Titel ist der einzige Link des Treffers.
- 2
Konkreter TitelEr unterscheidet das Ziel in der Linkliste.
- 3
Nützlicher AuszugEr beantwortet, was auf der Zielseite steht.
- 4
Orientierender PfadEr zeigt den Bereich, ohne einen zweiten Link zu erzeugen.
Vollständiges Grundgerüst
Suche, Antwort und Alternativen im HTML trennen
Das search-Element umfasst die Suchfunktion, nicht die Ergebnisliste. Bei einer dynamischen Suche existiert die Statusregion schon vor der ersten Aktualisierung; das Skript ersetzt nur ihren Text.
<h1>Suchergebnisse für „Anfahrt“</h1>
<search>
<form action="/suche" method="get">
<label for="site-search">Website durchsuchen</label>
<input id="site-search" name="q" type="search" value="Anfahrt">
<button type="submit">Suchen</button>
</form>
</search>
<p id="search-status" role="status" aria-atomic="true">
3 Treffer für „Anfahrt“.
</p>
<ol class="results">
<li>
<article>
<h2>
<a href="/kontakt/anfahrt">Anfahrt und barrierefreier Zugang</a>
</h2>
<p>Bushaltestelle, Parkplätze und der stufenlose Weg zum Eingang.</p>
<p>Kontakt / Vor Ort</p>
</article>
</li>
</ol>
<nav aria-label="Weitere Suchergebnisse">
<a href="/suche?q=anfahrt&seite=1" aria-current="page">Seite 1</a>
<a href="/suche?q=anfahrt&seite=2">Seite 2</a>
<a href="/suche?q=anfahrt&seite=2" rel="next">Weiter</a>
</nav>
<section aria-labelledby="no-results-title" hidden>
<h2 id="no-results-title">Keine Treffer für „Anfhart“</h2>
<p>Meinten Sie <a href="/suche?q=anfahrt">Anfahrt</a>?</p>
<ul>
<li><a href="/kontakt">Kontakt und Anfahrt</a></li>
<li><a href="/sitemap">Alle Seiten im Überblick</a></li>
</ul>
</section>Prüfen Sie jeden Ausgang mit demselben Begriff
- Fokus: Suchen Sie nach „Anfahrt“. Nach der Aktualisierung bleibt der Fokus im Suchfeld.
- Status: Ein Vorleseprogramm nennt Zustand oder Trefferzahl einmal, ohne die gesamte Liste vorzulesen.
- Treffer: Gehen Sie durch die Linkliste. Pro Ergebnis erscheint ein verständlicher Titel.
- Nulltreffer: Suchen Sie nach einem Tippfehler. Begriff, Korrektur und Alternativwege bleiben sichtbar.
- Fehler: Simulieren Sie eine fehlgeschlagene Anfrage. Die Seite nennt das Problem und einen nächsten Schritt.
Aus dem Prüfbericht
Zwei Stellen, zwei Befunde
Kritisch Das Suchfeld hat keinen Namen Regel label
Der graue Platzhalter verschwindet beim Tippen und zählt nicht als Beschriftung. Ein label mit for gibt dem Suchfeld seinen Namen.
Kritisch Treffer ohne lesbaren Linktext Regel link-name
In der Trefferliste verlinken Vorschaubild oder Pfeil das Ziel ohne Wort. Der Treffertitel wird zum Link, ein Link pro Treffer.
Zum Mitnehmen
Die Suche, korrigiert
Zwei Änderungen im HTML. Das Aussehen bleibt, wie es ist.
Korrektur in 2 Schritten ansehen
Dem Suchfeld einen Namen geben
Ein label, per for mit dem Feld verbunden, wird sein Name. Der Platzhalter bleibt als Beispiel daneben stehen.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="search" name="q" placeholder="Suchen">Nachher
<label for="site-suche">Website durchsuchen</label> <input id="site-suche" type="search" name="q" placeholder="z. B. Preise">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Website durchsuchen“. Springt der Cursor ins Feld, ist der Name verbunden.
Den Treffertitel verlinken
Ein Link pro Treffer, und zwar der Titel. Das Vorschaubild bekommt ein leeres alt und bleibt Dekoration.
KorrekturvergleichSchritt 2 · HTML Vorher
<li> <a href="/preise"><img src="preise.jpg" alt=""></a> <h3>Preise und Pakete</h3> </li>Nachher
<li> <img src="preise.jpg" alt=""> <h3><a href="/preise">Preise und Pakete</a></h3> </li>Markierte Zeilen wurden geändert
So prüfen Sie es In der Trefferliste ist jeder Titel anklickbar und nennt sein Ziel im Text.