suit.rebell.at

Man kennt das: man hat ein Suchfeld, der Designer hat aber keinen Platz für den Beschreibungstext oder das Label vorgesehen - visuell wäre das natürlich auch nicht vertretbar - die Beschreibung, der Feldname oder vergleichbares wurde innerhalb des input-Elements untergebracht und muss nun aus Komfortgründen entfernt werden, wenn der Benutzer in das Feld klickt.

Aber das ist noch nicht alles, nach kurzem Nachdenken kommt man schnell zu weiteren Anforderungen die sinnvollerweise erfüllt sein sollen:

• ohne JavaScript darf das Feld nicht vorbefüllt sein
• wir wollen den Text in der richtigen Sprache
• wenn der Benutzer das Feld verlässt ohne es zu befüllen muss es wieder mit dem Platzhalter befüllt werden
• der Platzhalter muss sich visuell vom manuell eingegebenen Text unterscheiden
• auch wenn der Benutzer per Tastaturnavigation auf das betreffende Feld gelangt (oder dieses verlässt) soll die Lösung funktionieren.
• dennoch soll das Feld auch in Textbrowsern oder mit Screenreadern zugänglich sein

Summa summarum: Barrierefreie, wartungsarme und elegante Suchfelder müssen es sein. In diesem Artikel habe ich drei Möglichkeiten zusammengefasst, welche die oben genannten Anforderungen erfüllen.

Verhalten ohne JavaScript

Die Ausgangsituation zeigt ein gewöhnliches XHTML-Formular - aus Gründen der Einfachheit habe ich auf den Submit-Button verzichtet. Ebenso dient ein h3-Element als Überschrift, obwohl ein legend-Element im fieldset sicher die semantisch sinnvollere Variante wäre.

Sämtliche JavaScript-bezogenen Dinge sind weitgehend unobtrusiv mit jQuery gelöst, lassen sich aber auch problemlos mit herkömmlichen JavaScript-Methoden und inline-Eventhandlern umsetzen.

Ohne JavaScript, aber mit eingeschaltenem CSS ist das zum Eingabefeld zugehörige label-Element links vorangestellt und hat keinen Wert. Eine Bedienung ist in diesem Zustand einwandfrei möglich.

Feld mit Dummywert befüllen

Das erste Beispiel zeigt eine sehr gebräuchliche Variante. Das Formularfeld wird, sofern JavaScript aktiviert ist, mit einem zuvor definierten Vorgabewert befüllt.

Wird das Formularfeld angeklickt oder fokussiert, wird geprüft ob der derzeitige Wert dem Vorgabewert entspricht. Wenn diese Bedingung zutrifft, wird der Feldinhalt mit einem Leerstring überschrieben. Beim Verlassen des Feldes wird wiederum der Inhalt geprüft - ist er leer, wird wieder der Vorgabewert eingefügt.

In welcher Sprache der Vorgabewert eingefügt wird, ermittelt das Script aus dem Wert des lang-Attributs im html-Element.

Dieser Umstand ist aber auch ein entscheidender Nachteil an der Geschichte: in der JavaScript-Datei müssen die Übersetzungen für sämtliche Sprachen definiert werden, schließlich wären sie im XHTML-Code ziemlich fehl am Platz.