Navigation und Service

Einfach teilhaben (Link zur Startseite)


Anleitung

Jedes Eingabefeld in einem Formular benötigt eine Beschriftung. Die Zuordnung der Beschriftung zum Feld geschieht bei sehenden Menschen in der Regel durch die Formularanordnung und die örtliche Nähe bei der Ausgabe auf dem Bildschirm. Die Beschriftung eines Textfeldes (ein oder mehrzeilig) wird meist links neben oder über dem Feld positioniert. Bei Kontrollkästchen (Checkboxen) oder Auswahlfelder (Radiobutton) wird die Beschriftung traditionell rechts neben den Formularfeldern platziert. Sie sollten diese Positionierung möglichst beibehalten. Wenn Sie andere Positionen nutzen, sollten Sie sehr genau darauf achten, dass der optische Bezug zwischen Beschriftung und Formularelement erhalten bleibt.

Typische Anordnung von Beschriftungen und Formularfelder Typische Anordnung von Beschriftungen und Formularfelder

Menschen, die mit nicht optischen Ausgabeformaten arbeiten, brauchen eine andere Art der Zuordnung. Ein Screenreader muss zum Beispiel die Beschriftung eines Formularelements vorlesen können, wenn dieses den Eingabefokus erhält. Dazu muss der Screenreader die Beschriftung des Elements eindeutig erkennen. Dies ist nur möglich, wenn Sie die Beschriftung mit dem HTML-Element label auszeichnen und diese Beschriftung, wie im folgenden Quellcode, mit dem Formularelement durch die Attribute id und for verbinden.

<label for="name">Name:</label>
<input type="text" id="name" name="name"/> 

Die Verwendung des title-Attributs für die Beschriftung ist nur erlaubt, wenn der Einsatz des label-Elements nicht möglich ist. Die Nutzung einer sichtbaren Beschriftung ist aber dieser Methode immer vorzuziehen, zumal die Beschriftung in diesen Fällen auch außerhalb des sichtbaren Bereichs platziert werden kann. Ein typisches Beispiel wäre eine Suchfunktion innerhalb eines Webauftritts. Das Formular dazu befindet sich oben rechts in der Ecke der Webseite und besteht häufig aus Platzgründen nur aus einem Textfeld und eine Schaltfläche zum Absenden. Die Schaltfläche ist dabei mit "Suchen" beschriftet.

Screenshot: Suchfeld ohne Beschriftung aber mit Title und Sende-Schaltfläche Screenshot: Suchfeld ohne Beschriftung aber mit Title und Sende-Schaltfläche

Ein sichtbares Label wäre hier für sehende Menschen nicht unbedingt nötig. Die Funktion des Textfeldes ist auch ohne explizite Beschriftung ersichtlich. Eine nicht sichtbare Beschriftung oder nur ein title-Attribut für das Textfeld wären demnach ausreichend. Die nächste Abbildung zeigt aber auch, dass in diesem Beispiel genug Platz für eine sichtbare Beschriftung ist. Eine Beschriftung ist in diesem Fall problemlos möglich und sollte aus Gründen der Verständlichkeit auch verwendet werden,.

Screenshot: Suchfeld mit Beschriftung und Sende-Schaltfläche Screenshot: Suchfeld mit Beschriftung und Sende-Schaltfläche

Gruppierungen

Wenn innerhalb eines Formulars bestimmte Eingabefelder semantisch verbunden sind, sollten Sie diese mit dem fieldset-Element gruppieren und mit dem legend-Element beschriften. Dies gilt insbesondere für Gruppen von Kontrollkästchen und Gruppen von Optionsfeldern. In der Regel umrahmen Browser dann die von einem fieldset-Element umschlossenen Felder und beschriften den Rahmen mit dem Inhalt des legend-Elements.

<fieldset>
   <legend>Ich suche eine Werkstatt mit ...</legend>
      <input type="checkbox" name="werkstatt[]" 
             id="werkstatt1" value="1" />
      <label for="werkstatt1">mit Förderstätte</label>
      ...
      <input type="checkbox" name="werkstatt[]" 
             id="werkstatt4" value="2" />
      <label for="werkstatt4">mit Freizeitangebot</label>
</fieldset>

Wenn auf einer Webseite Beschriftungen durch zwei identische Labeltexte mehrdeutig sind, sollten Sie auf jeden Fall die Eingabefelder mit ihren Labeln in zwei unterschiedliche fieldset-Elemente gruppieren. Haben Sie zum Beispiel ein Bestellformular, in dem eine Lieferanschrift und eine Rechnungsanschrift getrennt eingegeben werden, kommen die Felder für Name, Straße, Ort und so weiter in beiden Anschriften vor. In diesem Fall müssen Sie, um die Felder unterscheidbar zu machen, die Anschriften jeweils mit einem fieldset-Element gruppieren und mit dem legend-Element beschriften.

Screenshot: 2 Fieldsets, um die Eingabefelder von Lieferanschrift und Rechnungsanschrift semantisch zu gliedern. Screenshot: 2 Fieldsets, um die Eingabefelder von Lieferanschrift und Rechnungsanschrift semantisch zu gliedern.

Beschriftung mit Hinweisen

Wenn in einem Eingabefeld nur ein bestimmtes Datenformat akzeptiert und vom Server verarbeitet werden kann, dann müssen Sie der Nutzerin oder dem Nutzer dieses Format mitteilen, und zwar bevor sie oder er beginnt, die Eingabe zu tätigen. Es reicht nicht aus, der Nutzerin oder dem Nutzer erst bei einem Fehler auf das richtige Datenformat hinzuweisen.

Am sichersten ist es, wenn Sie das geforderte Datenformat im Label des Eingabefeldes beschreiben.

Screenshot: Ein Eingabefeld für ein Datum, das Label gibt in Klammern einen Hinweis zum erwarteten Format Screenshot: Ein Eingabefeld für ein Datum, das Label gibt in Klammern einen Hinweis zum erwarteten Format

In der Regel ist der verfügbare Platz im Label aber beschränkt, sodass eine ausführliche Anweisung dort nicht immer möglich ist. In diesem Fall ist es sinnvoll, die zweite Alternative zu nutzen und vor dem Formular eine ausführliche Textanweisung zu verfassen. Hier können Sie neben der Formatbeschreibung auch Beispiele einfügen. Beispiele sind für Nutzerinnen und Nutzer meistens besser verständlich.

Screenshot: Ein Eingabefeld für ein Datum. Vor dem Formular steht ein Text, der das Format für die Eingabe eines Datums beschreibt. Screenshot: Ein Eingabefeld für ein Datum. Vor dem Formular steht ein Text, der das Format für die Eingabe eines Datums beschreibt.

Pflichtfelder

Wenn Sie ein Formular mit Pflichtfeldern nutzen, müssen Sie die Pflichtfelder kennzeichnen. Zur Hervorhebung der Pflichtfelder müssen Sie unter anderem beachten, dass Sie sich dabei nicht allein auf Farben verlassen dürfen. Lesen Sie dazu auch "Trennung von Vorder- und Hintergrund". Eine zusätzliche Kennzeichnung ist nötig. Üblich ist es zum Beispiel, Pflichtfelder zusätzlich mit einem Stern "*" im Label zu kennzeichnen. Aber, auch ein Texthinweis in Klammern würde funktionieren.

Wenn Sie die Pflichtfelder markieren, müssen Sie vor dem ersten Formularfeld auf die Pflichtfelder und deren Markierung hinweisen. Beachten Sie dabei, dass Sie sich bei dem Hinweis nicht nur auf sensorische Eigenschaften verlassen dürfen. Ein Hinweis wie: "Pflichtfelder sind rot beschriftet" reicht demnach nicht, es muss auch auf die "*"-Markierung hingewiesen werden. Lesen Sie dazu auch den Abschnitt "Anpassbares Layout - Anweisungen und Hinweise".


Screenshot: Formular mit einem Pflichtfeld, das Pflichtfeld ist farblich und durch ein *-Zeichen hervorgehoben Screenshot: Formular mit einem Pflichtfeld, das Pflichtfeld ist farblich und durch ein *-Zeichen hervorgehoben

Behandlung von Fehlern

Bei jedem Formular wird es zu Fehleingaben kommen. In der Regel löst die Eingabe von Daten auf dem Server eine Reaktion aus. Der Server kann nur korrekt arbeiten, wenn die eingegebenen Daten ebenfalls korrekt sind. Deshalb muss jede Formulareingabe durch den Server auf Fehler überprüft werden.

Ist ein Fehler erkannt worden, muss der Nutzerin oder dem Nutzer der Fehler mitgeteilt werden, denn die vom Server erwartete Arbeit kann nicht korrekt durchgeführt werden. Die Erwartung der Nutzerin oder des Nutzers wird nicht erfüllt. Wenn sich zum Beispiel jemand zu einem Newsletter anmelden möchte, wird eine falsch eingegebene E-Mail-Adresse dazu führen, dass die Nutzerin oder der Nutzer nie einen Newsletter erhalten wird. Erkennt der Server eine ungültige E-Mail-Adresse, muss dies der Nutzerin oder dem Nutzer mitgeteilt werden. Die Überprüfung kann auch durch eine JavaScript-Funktion vom Browser durchgeführt werden. Zu Empfehlen ist dies aber nur als zusätzliche Überprüfung, denn durch Manipulationen der Script-Ausführung kann es immer noch dazu kommen, das ungültige Daten an den Server geliefert werden.

Wenn Sie einer Nutzerin oder einem Nutzer einen Eingabefehler mitteilen, beachten Sie bitte Folgendes:

  • Platzieren Sie eine Fehlermeldung immer über dem Formular.
  • Machen Sie genaue Angaben, welches Feld falsch ausgefüllt wurde.
  • Wenn Sie können, machen Sie Korrekturvorschläge.
  • Markieren Sie das Eingabefeld mit der fehlerhaften Eingabe.

Wenn ein Fehler durch den Server entdeckt wird und dieser eine Fehlerseite ausliefert, sollte Sie bereits im Seitentitel darauf hinweisen, dass es sich um eine Fehlermeldung handelt. Ein blinder Mensch würde die Webseite sonst eventuell nicht bis zur Fehlermeldung lesen. Wenn Sie eine fehlerhafte Eingabe hervorheben, müssen Sie unter anderem beachten, dass Sie sich dabei nicht allein auf Farben verlassen dürfen. Lesen Sie dazu auch "Trennung von Vorder- und Hintergrund". Eine zusätzliche Kennzeichnung ist nötig. Häufig werden zum Beispiel, fehlerhafte Felder mit einem "Achtung"-Zeichen (aus dem Straßenverkehr) im Label gekennzeichnet. Wenn Sie eine Fehlerbeschreibung vor das Formular setzen, können Sie auch aus der Fehlerbeschreibung heraus, auf das Formularfeld verlinken.

Screenshot: Formular mit einer Fehleingabe, das Feld mit der falschen Eingabe ist farblich und durch ein Achtung-Symbol hervorgehoben Screenshot: Formular mit einer Fehleingabe, das Feld mit der falschen Eingabe ist farblich und durch ein Achtung-Symbol hervorgehoben

Fehlervermeidung

"Vorbeugen ist besser als heilen", das sollte auch für Ihre Formulare gelten. Wenn das Ausfüllen eines Formulars zu direkten Konsequenzen führen kann, z.B. Kaufabschlüsse, Geldüberweisungen oder die Freigabe persönlicher Daten, dann müssen Sie konsequent versuchen Fehleingaben zu vermeiden. Je nach Art der Formularanwendungen müssen Sie eine oder mehrere der folgenden Möglichkeiten anbieten.

  • Nach dem Absenden der Daten kann die resultierende Aktion noch rückgängig gemacht werden. Zum Beispiel durch Stornieren einer falschen Bestellung.
  • Die eingegebenen Daten werden ausführlich auf Eingabefehler überprüft und die Nutzerin oder der Nutzer hat die Möglichkeit Fehleingaben zu korrigieren.
  • Das Absenden der Informationen erfolgt mehrstufig und vor dem endgültigen Absenden hat die Nutzerin oder der Nutzer Zeit alle Eingaben nochmals zu überprüfen und gegebenenfalls zu korrigieren.

Ein gutes Beispiel für einen mehrstufigen Bestellvorgang können Amazon-Kunden sehen, wenn Sie eine Bestellung abschließen möchten. Nach der Eingabe aller Daten bekommt die Kundin oder der Kunde einen Hinweis angezeigt, dass sie oder er nach dem Abschicken der Daten, alle Eingaben nochmals kontrollieren kann.

Screenshot: Amazon-Hinweis, dass die Bestellung erst nach einer erneuten Überprüfung der Daten gültig wird Screenshot: Amazon-Hinweis, dass die Bestellung erst nach einer erneuten Überprüfung der Daten gültig wird

Die Bestellung ist erst nach der nochmaligen Kontrolle aller Eingaben gültig, gleichzeitig hat die Käuferin oder der Käufer die Möglichkeit Details der Bestellung zu korrigieren.

Screenshot: Kontrollseite bei einer Bestellung bei Amazon.de Screenshot: Kontrollseite bei einer Bestellung bei Amazon.de

© Bundesministerium für Arbeit und Soziales, 2016