Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Name ist Pflicht veröffentlicht in 2013

Vorbelegung von Eingabefeldern

Die Beschriftung eines Eingabefelds sollte grundsätzlich mit sichtbarem Text erfolgen. In der Regel wird der sichtbare Text außerhalb des Eingabefelds positioniert und mit dem LABEL-Element mit dem Eingabefeld verknüpft. Somit erhält das Eingabefeld einen eindeutigen Namen.

Eine Alternative für die Beschriftung eines Eingabefelds kann die Vorbelegung des Eingabefelds sein.

Eingabefeld für ein Datum, wobei das Format tt.mm.jjjj als Vorbelegung sichtbar ist, und eine zweite Ansicht bei Fokus

Bei Fokus verschwindet der Text

Eine ungünstige Variante dieser Technik ist die Verwendung des value-Attributs:

<input name="suche" id="schnellsuche" type="text" value="Suchbegriffe eingeben" />

Diese textliche Vorbelegung muss der Nutzer beim Fokussieren des Eingabefelds löschen, bevor eine eigene Eingabe vorgenommen werden kann. Das ist in den meisten Fällen kein großes Problem, allerdings ist es beim Einsatz eines Screenreaders nicht immer klar, dass der Text eine Vorbelegung und nicht etwa eine Beschriftung ist. So kommt es nicht selten vor, dass Screenreadernutzer solche Eingabefelder falsch ausfüllen und der im Formular enthaltener Text eine Zusammensetzung der Vorbelegung und der eigentlichen Eingabe wird.

Das value-Attribut sollte nicht für die Vorbelegung eines Eingabefelds benutzt werden, d.h. wenn es doch genutzt wird:

Alternativ zum value-Attribut kann auch das placeholder-Attribut eingesetzt werden. Mit dem placeholder-Attribut wird erreicht, dass ein Hinweistext solange in einem Eingabefeld angezeigt wird, wie der Fokus nicht darauf liegt und solange der Nutzer keine Eingabe vorgenommen hat:

<input name="suche" id="schnellsuche" type="text" placeholder="Suchbegriffe eingeben" />

Das Attribut wird immerhin von Screenreadern unterstützt, d.h. der Wert des placeholder-Attributs wird in Ergänzung zu der eigentlichen Beschriftung erfasst. Um Redundanzen zu vermeiden, sollten deshalb placeholder-Texte keine Wiederholungen der Beschriftungstexte enthalten.

Der "Platzhalter" ist in den meisten Fällen dennoch kein Ersatz für eine korrekte Beschriftung eines Eingabefelds. Während eine sichtbare Beschriftung immer angezeigt wird, wird die Vorbelegung in dem Moment, in dem es konkret gebraucht wird, ausgeblendet. Außerdem könnte die Vorbelegung als Eingabewert missverstanden werden. Schließlich weist die standardmäßige Darstellung der Vorbelegung (eingegraut) ein geringes Kontrastverhältnis auf. Es gibt also mehrere Gründe, dieses Attribut aus Sicht der Barrierefreiheit nicht zu nutzen (auch wenn es in der Praxis legitime Gründe für dessen Einsatz gibt).