Wenn das Suchfeld keinen Namen hat

Ein Screenreader, also ein Programm, das den Bildschirminhalt vorliest, geht ein Formular Station für Station durch. Kommt er an ein Eingabefeld, sagt er, wie das Feld heißt und was schon darin steht. Fehlt der Name, bleibt ein nacktes "Eingabefeld, leer". Wer das hört, muss raten, ob hier die Hausnummer, die Telefonnummer oder der Gutscheincode hingehört.

Wir haben 14.984 Websites mit unserem Prüfwerkzeug durchgesehen. Bei 1,7 Prozent der 14.984 geprüften Seiten sind Formularfelder gar nicht beschriftet, bei 2,5 Prozent tragen Symbol-Schaltflächen keinen Namen. Die Zahlen sind klein, aber sie treffen fast immer den Bestellprozess und die Suche. Ein unbeschriftetes Feld sitzt selten im Impressum, sondern im Adressblock der Kasse, im Newsletter-Kästchen und in der Suchleiste oben rechts, also genau an den Stellen, an denen aus einem Besuch ein Auftrag wird.

Das Muster dahinter ist fast immer dasselbe. Jemand wollte ein aufgeräumtes Design und hat die Beschriftung in das Feld hineingeschrieben, als grauen Platzhaltertext. Das sieht ruhig aus und funktioniert genau so lange, wie niemand tippt.

Ein Platzhalter verschwindet genau dann, wenn du ihn brauchst

Setz dich an dein eigenes Kontaktformular und tippe in das erste Feld ein einziges Zeichen. Der graue Text ist weg. Ab dem ersten Buchstaben steht in dem Kasten nur noch deine Eingabe, und die Information, was dort hingehört, existiert auf dem Bildschirm nicht mehr. Solange du zügig durchtippst, fällt das niemandem auf. Wenn zwischendurch das Telefon klingelt und du nach fünf Minuten zurückkommst, stehen da vier Kästen mit Zahlen, und keiner davon sagt dir noch, welche die Kundennummer war.

Dazu kommen drei Dinge, die im Alltag Fehler produzieren. Platzhaltertext ist meistens hellgrau auf Weiß und damit schlecht zu lesen, besonders auf dem Handy draußen. Er verschwindet hinter dem Wert, sobald der Browser das Formular automatisch ausfüllt, sodass die Kontrolle vor dem Absenden ins Leere läuft. Und Browser und Vorleseprogramme behandeln ihn unterschiedlich, mal wird er angesagt, mal übersprungen, mal erst nach einer Pause. Verlassen kann sich darauf niemand.

Eine echte Beschriftung steht dauerhaft über oder neben dem Feld und ist technisch mit ihm verbunden. Die Verbindung entsteht über zwei zusammengehörende Angaben, for am <label> und id am Feld. Beide tragen denselben Wert, und dieser Wert kommt auf der Seite nur ein einziges Mal vor.

So sieht ein typisches Feld aus, bevor jemand es anfasst.

<input type="text" placeholder="Ihre E-Mail-Adresse">
<input type="text" placeholder="PLZ">

Und so sieht dasselbe Feld aus, wenn Beschriftung und Eingabe zusammengehören.

<label for="mail">E-Mail-Adresse</label>
<input type="email" id="mail" name="email" autocomplete="email">

<label for="plz">Postleitzahl</label>
<input type="text" id="plz" name="plz" inputmode="numeric" autocomplete="postal-code">

Der Aufwand liegt bei einer Zeile pro Feld. Zwei Dinge bekommst du dabei geschenkt. Der Klick auf das Wort "Postleitzahl" setzt den Cursor ins Feld, was die Trefferfläche auf dem Handy spürbar vergrößert. Und autocomplete erlaubt es Browser und Passwortmanager, die gespeicherte Adresse in die richtigen Felder zu setzen.

Wenn dein Design an einer Stelle keinen sichtbaren Text verträgt, etwa bei der Suche im Kopfbereich, dann versteck die Beschriftung optisch, statt sie wegzulassen. Die passende CSS-Klasse steht im nächsten Abschnitt.

Lupe und Warenkorb sagen von selbst gar nichts

Für ein Vorleseprogramm ist ein Symbol eine Grafik ohne Bedeutung. Eine Schaltfläche, in der nur ein SVG oder ein Icon-Font sitzt, wird als "Schaltfläche" angesagt, und wenn das Symbol als Bilddatei eingebunden ist, hört man im schlechtesten Fall den Dateinamen. Beim Warenkorb ist es noch enger, dort steht neben dem Symbol oft eine kleine Zahl, und vorgelesen wird dann "Link, 3". Damit kann niemand etwas anfangen, der die Grafik nicht sieht.

Die Reparatur besteht aus zwei Handgriffen. Das Symbol selbst wird für Vorleseprogramme ausgeblendet, weil es keine eigene Bedeutung trägt, und die Schaltfläche bekommt einen Namen. Am robustesten ist echter Text, der nur optisch versteckt wird, denn Übersetzungswerkzeuge kommen damit besser zurecht als mit einem aria-label.

Vorher sieht das in vielen Kopfzeilen so aus.

<button type="submit">
  <svg class="icon-search"></svg>
</button>

<a href="/warenkorb">
  <svg class="icon-cart"></svg>
  <span class="badge">3</span>
</a>

Nachher tragen beide einen Namen, ohne dass sich optisch etwas ändert.

<button type="submit">
  <svg class="icon-search" aria-hidden="true" focusable="false"></svg>
  <span class="nur-fuer-screenreader">Suche starten</span>
</button>

<a href="/warenkorb">
  <svg class="icon-cart" aria-hidden="true" focusable="false"></svg>
  <span class="badge" aria-hidden="true">3</span>
  <span class="nur-fuer-screenreader">Warenkorb, 3 Artikel</span>
</a>

Dazu gehört die Klasse, die den Text sehenden Besuchern entzieht und ihn für Vorleseprogramme stehen lässt.

.nur-fuer-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Verwechsle diese Klasse nicht mit display: none. Was auf display: none steht, ist auch für Vorleseprogramme verschwunden. Und beim Warenkorb ändert sich die Zahl, also muss der versteckte Text mitwandern, sonst liest das Programm weiter "3 Artikel", während sieben im Korb liegen.

Fehlermeldungen, die tatsächlich ankommen

Der zweite Punkt, an dem Formulare kippen, ist der Moment nach dem Absenden. Die Seite lädt neu, oben leuchtet "Bitte prüfen Sie Ihre Eingaben" in Rot, der Cursor steht wieder ganz am Seitenanfang, und das fehlerhafte Feld ist irgendwo weiter unten rot umrandet. Wer den Bildschirm nicht am Stück überblickt, sucht diesen Fehler nicht, sondern schließt den Tab.

Drei Änderungen lösen das. Die Meldung steht als Satz direkt am Feld und ist mit ihm verknüpft. Das Feld meldet selbst, dass sein Inhalt nicht stimmt. Und der Cursor springt nach dem Absenden auf das erste fehlerhafte Feld.

<label for="plz">Postleitzahl</label>
<input type="text" id="plz" name="plz" value="6501"
       aria-invalid="true" aria-describedby="plz-fehler">
<p id="plz-fehler">Die Postleitzahl braucht fünf Ziffern, zum Beispiel 55252.</p>

Das Feld bringt seine Erklärung jetzt mit, egal wo auf der Seite sie optisch steht. Den Fokus setzt du beim Absenden mit einer Zeile JavaScript, etwa document.getElementById("plz").focus(). Rote Rahmen dürfen bleiben, sie ersetzen den Satz aber nicht, weil Farbe allein bei einer Rot-Grün-Schwäche nichts transportiert. Und die bereits eingetippten Daten bleiben im Formular stehen, denn wer nach einem Tippfehler in der Postleitzahl alle acht Felder neu ausfüllen soll, bestellt woanders.

Der Selbsttest in unter zwei Minuten

Du brauchst dafür nichts außer deinem Browser. Nimm die Seite mit dem wichtigsten Formular, meistens ist das die Kasse oder das Kontaktformular.

1. Klick genau auf den Beschriftungstext neben oder über einem Feld, nicht in das Feld selbst. Springt der Cursor ins Feld, sind beide verknüpft. Passiert nichts, fehlt die Verbindung.
2. Tippe in jedes Feld ein Zeichen. Steht danach noch irgendwo auf dem Bildschirm, was in dieses Feld gehört? Wenn nicht, arbeitest du mit Platzhaltern statt mit Beschriftungen.
3. Leg die Maus beiseite und geh mit der Tabulatortaste durch das Formular. Jede Station braucht einen sichtbaren Rahmen, und an jeder Station musst du wissen, was dort passiert.
4. Schick das Formular absichtlich leer ab. Landet der Cursor beim ersten fehlerhaften Feld? Steht der Fehler als Satz da oder nur als rote Umrandung? Sind deine bisherigen Eingaben noch drin?
5. Klick mit der rechten Maustaste auf das Lupensymbol und wähle "Untersuchen". In der markierten Zeile steht entweder sichtbarer Text, ein aria-label oder nichts davon. Nichts davon heißt, die Schaltfläche hat keinen Namen.

Womit du anfängst

Sortier nach Weg, nicht nach Menge. Die Suche oben und der Warenkorb sind zwei Schaltflächen und in zehn Minuten benannt. Danach kommt der Adressblock der Kasse, weil dort die meisten Felder auf einmal stehen und ein einziger Abbruch den ganzen Kauf kostet. Das Kommentarfeld im Blog kann bis nächste Woche warten.

Ein Bedienungshelfer wie unser Widget hebt Kontraste an, vergrößert Text und verbessert die Bedienung per Tastatur. Einen Namen für dein Suchfeld erfinden kann er nicht, denn der steht nur in deinem Quelltext. Finden kann er ihn dagegen sehr wohl, unser kostenloser Scan listet dir die Felder und Schaltflächen ohne Namen für deine eigene Seite auf. Wenn du heute nur eine Sache machst, dann öffne die Datei mit deinem Suchformular und gib der Lupe einen Namen.