Navigation und Service

Einfach teilhaben (Link zur Startseite)


Formulare

Begründung

Formulare sind wesentliche Bestandteile von Nutzerinteraktionen in Webauftritten. In Formularen können Nutzerinnen und Nutzer Texte eingeben, aus Listen Einträge auswählen, Optionsfelder markieren und durch eine Schaltfläche die eingegebenen Daten absenden.

Menschen mit Behinderungen können bei der Nutzung von Formularen auf zahlreiche Probleme stoßen. Neben den Barrieren die auch auf normalen Webseiten vorkommen, treten einige Probleme ausschließlich in Formularen auf. Die BITV nimmt deshalb mit einigen Bedingungen explizit Bezug auf Formulare und zeigt Techniken zum Lösen der Probleme auf.

Bei der Verwendung von Formularen auf Webseiten treten zwei Probleme besonders häufig auf: Um ein Formular auszufüllen, muss für jedes Eingabefeld der Zweck des Feldes bekannt sein. Für Felder, die keine eindeutig zugeordnete Beschriftung haben, ist der Zweck nicht von einer Software bestimmbar. Wenn ein Eingabefeld aktiv wird, kann ein Screenreader also keine Beschriftung feststellen und diese vorlesen. Jedes Feld muss deshalb mit einer Beschriftung verknüpft werden,sodass diese von einer Software als solche erkannt werden kann. Die Verwendung von eindeutig zugeordneten Beschriftungen hat noch einen weiteren positiven Effekt. Da der Browser die Zuordnung kennt, kann auch die Beschriftung mit der Maus angeklickt werden. Menschen mit einer Körperbehinderung, die zum Beispiel aufgrund eines Tremors der Hand kleine Flächen mit der Maus nur schwer treffen, steht so eine größere Fläche zur Verfügung. Besonders die kleinen Optionsfelder (Radiobuttons) oder Kontrollkästchen (Checkboxen) sind so wesentlich leichter mit der Maus zu treffen.

Das zweite Problem sind Fehler bei der Eingabe. Ein Formular muss Fehleingaben erkennen und die Fehlerbeschreibung auf barrierefreie Art der Nutzerin oder dem Nutzer mitteilen. Um von vornherein Fehleingaben zu vermeiden, müssen klare und verständliche Anweisungen zur Eingabe gemacht werden.

Das Ziel der BITV ist es, dass Menschen mit Behinderungen alle Informationen zu einem Formular wahrnehmen können. Über eine eindeutig zugeordnete Beschriftung müssen Sinn und Zweck jedes Feldes deutlich sein. Nutzerinnen und Nutzer sollen vor Fehleingaben geschützt werden und jedes Formular soll auch von Menschen mit Behinderungen bedient werden können.

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

Beispiele

Beschriftung

Das erste Beispiel zeigt zwei Textfelder mit je einer Beschriftung. Die Beschriftung befindet sich, wie in europäischen Ländern üblich, vor dem Eingabefeld. Das for-Attribut des label-Elements verweist auf das zugeordnete id-Attribut des Eingabefeldes. Jede Beschriftung ist dadurch mit einem Eingabefeld semantisch verbunden. Ein Screenreader kann so die Beschriftung vorlesen, wenn bei der Navigation mit der Tastatur das Textfeld aktiviert wird und zusätzlich kann durch ein Anklicken der Beschriftung das zugeordnete Textfeld aktiviert werden.

<label for="vorname" class="text">Vorname:</label>
<input type="text" name="vorname" id="vorname"/>
 
<label for="nachname" class="text">Nachname:</label>
<input type="text" name="nachname" id="nachname"/>

Typische Anordnung von Beschriftungen bei Textfeldern, die Beschriftung ist links neben dem Textfeld Typische Anordnung von Beschriftungen bei Textfeldern, die Beschriftung ist links neben dem Textfeld

Bei Kontrollkästchen (Checkboxen) und Optionsfelder (Radiobutton) wird die Beschriftung in der Regel hinter die Eingabeelemente gesetzt. Im folgenden Beispiel ist die Zuordnung der Beschriftungen für Screenreader trotzdem eindeutig. Die Beschriftung und das Eingabeelement sind wieder mit einem id-Attribut und einem for-Attribut verbunden. Durch Anklicken der Beschriftung wird hier direkt die verbundene Option ausgewählt. Die Beschriftung "Anrede" wurde als zusätzliche Beschriftung mit der ersten Auswahloption "Frau" verbunden, sodass ein Screenreader hier beide Texte vorlesen könnte.

<label for="anrede-frau" class="text">Anrede:</label>
 
<input type="radio" name="anrede" id="anrede-frau" value="frau"/>
<label for="anrede-frau" class="radio">Frau</label>
 
<input type="radio" name="anrede" id="anrede-herr" value="herr"/>
<label for="anrede-herr" class="radio">Herr</label>

Typische Anordnung von Beschriftungen bei Optionsfeldern, die Beschriftung ist rechts neben dem Textfeld Typische Anordnung von Beschriftungen bei Optionsfeldern, die Beschriftung ist rechts neben dem Textfeld

nicht sichtbare Beschriftung

Im folgenden Beispiel wird ein Formular für eine Suche im Webangebot erzeugt. Das Textfeld für den Suchbegriff wird durch ein label-Element beschriftet und die Beschriftung wird durch CSS-Eigenschaften aus dem sichtbaren Bereich des Browsers herausgeschoben. Ein Screenreader würde die Beschriftung somit weiter vorlesen, lediglich den sehenden Nutzerinnen oder sehenden Nutzern würden die Beschriftung nicht angezeigt werden.

.hideme {position:absolute;top:-32768px;left:-32768px}
...
<form action="/suche.php">
   <label class="hideme" for="search">Suche:</label>
   <input type="text" name="search" id="search" />
   <input type="submit" value=" Suche "/>
</form>

Die BITV erlaubt ein Weglassen der Beschriftung auch, wenn stattdessen das Textfeld mit einem title-Attribut versehen wird. Da das Vorlesen des title-Attributs abhängig von den Einstellungen des Screenreaders ist, bietet sich zur Sicherheit eine Kombination der beiden oberen Techniken an, wenn eine sichtbare Beschriftung nicht erwünscht ist.

<input type="text" name="search" id="search" title="Suche:" />

Die Abbildung zeigt das Ergebnis einer Kombination der beiden vorgestellten Techniken. Beim überfahren mit dem Mauszeiger erscheint der Inhalt des title-Attributs. Ein Screenreader würde den Text des label-Attributs vorlesen.

Suchfeld mit unsichtbarer Beschriftung und title-Attribut Suchfeld mit unsichtbarer Beschriftung und title-Attribut

Eine weitere sinnvolle Situation, in der anstelle einer sichtbaren Beschriftung eine Nicht-Sichtbare in Kombination mit einem title-Attribut genutzt werden kann, sind Felder zur Eingabe eines Datums. Der Quellcode zeigt einen etwas komplizierteren Aufbau. Alle Felder haben ein title-Attribut und eine zugeordnete Beschriftung in einem label-Element. Die Beschriftung des ersten Feldes ist in einen speziellen Teil ("Tag") und in einen allgemeinen Teil ("Geburtsdatum") geteilt. Letzterer bleibt sichtbar. Die Beschriftungen "Tag", "Monat" und "Jahr" werden aus dem sichtbaren Bereich geschoben.

.hideme {position:absolute;top:-32768px;left:-32768px}
...
<label for="day">Geburtsdatum:</label>
<label for="day" class="hideme">Tag:</label>
<input type="text" name="day" id="day" title="Tag" />
<label for="month" class="hideme">Monat:</label>
<input type="text" name="month" id="month" title="Monat" />
<label for="year" class="hideme">Jahr:</label>
<input type="text" name="year" id="year" title="Jahr" />

Alle Felder haben somit eindeutige Beschriftungen, die vorgelesen werden können. Zusätzlich hat das erste Feld die Beschriftung "Geburtsdatum". Durch die optische Anordnung wird auch ohne die sichtbaren Beschriftungen deutlich, welcher Teil des Geburtsdatums in welches Feld geschrieben werden muss. Die title-Attribute, die beim Überfahren mit der Maus sichtbar werden, unterstützen dies nochmals.

Drei Textfelder zur Eingabe eines Datums mit einer Beschriftung und title-Attribute für die einzelnen Felder Drei Textfelder zur Eingabe eines Datums mit einer Beschriftung und title-Attribute für die einzelnen Felder

Gruppierungen

Das Beispiel zeigt vier Kontrollkästchen, die durch ein fieldset-Element semantisch zusammengefasst wurden. Beschriftet wurde die Gruppe mit dem legend-Element und dem Teilsatz: "Ich suche eine Werkstatt mit ...".

<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>

Das fieldset-Element erzeugt einen Rahmen, der auch optisch die Zusammengehörigkeit der Kontrollkästchen anzeigt. Der Inhalt des legend-Elements wird auf den Rahmen gelegt und wirkt optisch, wie eine Überschrift.

Screenshot: Eine Gruppe von Kontrollkästchen. Semantisch verbunden durch ein fieldset-Element und des legend-Element. Screenshot: Eine Gruppe von Kontrollkästchen. Semantisch verbunden durch ein fieldset-Element und des legend-Element.

Das fieldset-Element kann auch, wie im nächsten Beispiel, dazu verwendet werden, Eingabefelder semantisch zu trennen. In diesem Fall werden zwei Gruppen von Adresseingabefeldern erzeugt. Einen Satz Felder für die Lieferadresse und einen für die Rechnungsadresse. Die Adressfelder mit ihren Beschriftungen kommen somit alle doppelt vor. Um diese aber unterscheidbar zu machen, wurde jede Adresse mit einem fieldset-Element umschlossen und durch ein legend-Element unterschiedlich benannt. Ein Screenreader kann so die Kombination legend und label nutzen um beide Beschriftungen vorzulesen.

<fieldset>
   <legend>Lieferanschrift:</legend>
   <label for="name1" class="text">Vorname, Name:</label>
   <input type="text" name="name1" id="name1"/>
   ...
   <label for="ort1" class="text">Ort:</label>
   <input type="text" name="ort1" id="ort1"/>
</fieldset>
<fieldset>
   <legend>Rechnungsanschrift:</legend>
   <label for="name2" class="text">Vorname, Name:</label>
   <input type="text" name="name2" id="name2"/>
   ...
   <label for="ort2" class="text">Ort:</label>
   <input type="text" name="ort2" id="ort2"/>
</fieldset>

Durch die Anordnung der Felder und den umschließenden Rahmen ist die Zugehörigkeit der Adressfelder zu den Überschriften "Lieferadresse" und "Rechnungsadresse" auch optisch eindeutig.

Screenshot: 2 Fieldsets, um die Eingabefelder von Lieferanschrift und Rechnungsanschrift semantisch zu gliedern. Screenshot:Semantische Zuordnung von Adressfeldern zur Lieferadresse und zur Rechnungsadresse durch die Verwendung des fieldset-Elements und des legend-Elements.

Datenformat

Der folgende Quellcode erzeugt ein Eingabefeld mit einer zugeordneten Beschriftung für eine Eingabe eines Datums. Da das zum Formular gehörende Serverprogramm nur ein bestimmtes festgelegtes Datenformat verarbeiten kann, muss das Datum nach der üblichen deutschen Schreibweise eingegeben werden. Um dies der Nutzerin oder dem Nutzer mitzuteilen, wurde eine kurze Formatbeschreibung (tt.mm.jjjj) in das label-Element mit aufgenommen. Die Formatbeschreibung ist also semantisch ein Teil der Beschriftung.

<label for="date">Datum (tt.mm.jjjj):</label>
<input type="text" name="date" id="date"/>

Da die Formatbeschreibung wahrscheinlich nicht von allen Menschen verstanden wird, ist es sinnvoll durch weitere Methoden auf das gewünschte Format hinzuweisen. Ein beschreibender Text vor dem Formular oder die Verwendung des title-Attributes wären geeignete Stellen.

<input type="text" name="date" id="date" 
       title="Bitte das in Deutschland übliche Datumsformat 
              mit je 2 Ziffern für Tag und Monat und 
              4 Ziffern für das Jahr benutzen."/>

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

Pflichtfelder

Das folgende Beispiel zeigt ein Formular, bei dem die E-Mail-Eingabe ein Pflichtfeld ist. Das Pflichtfeld wurde durch eine CSS-Eigenschaft mit einem roten Rahmen versehen. Da dieser farbliche Hinweis alleine nicht ausreicht, um das Pflichtfeld für alle Menschen zu kennzeichnen, wurde eine weitere Methode verwendet. Die durch ein label-Element mit dem Eingabefeld verbundene Beschriftung wurde mit einem "*"-Zeichen versehen. Ein Text vor dem Formular weist darauf hin, dass Pflichtfelder mit einem solchen "*"-Zeichen gekennzeichnet sind.

input.required {border:2px solid #D64040;}
...
<p>
   <strong>Hinweis:<strong> Dieses Formular enthält 
   Pflichtfelder, die ausgefüllt werden müssen. Pflichfelder 
   sind mit einem "*"-Zeichen und einem roten Rahmen markiert.
</p>
...
<label for="email" class="text">E-Mail-Adresse *:</label>
<input type="text" name="email" id="email" class="required"/>

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

Eingabefehler

Das letzte Beispiel zeigt ein Formular, dass angezeigt wird, nachdem die Nutzerin eine falsche Eingabe getätigt hatte. Das fehlerhaft ausgefüllte Feld wird mehrfach hervorgehoben und der Nutzerin oder dem Nutzer wird die Möglichkeit gegeben, die Fehleingabe zu korrigieren. Die Hervorhebungen im Einzelnen:

  • Eine farbliche Hervorhebung des fehlerhaft ausgefüllten Feldes und des dazugehörigen Labels. Nach BITV-Bedingung 1.4.1 "Farbe" eine nicht ausreichende Methode.
  • Ein Symbol vor dem Feld zeigt optisch den Fehler an.
  • Das Symbol ist Teil des Labels und der Alternativtext "fehlerhafte Eingabe" würde von einem Screenreader vorgelesen werden.
  • Ein Text vor dem Formular gibt einen Hinweis auf die fehlerhafte Eingabe.
  • Ein Link im Text vor dem Formular, verlinkt direkt auf das Eingabefeld. Eine Nutzerin oder ein Nutzer kann also direkt das fehlerhaft ausgefüllte Feld anspringen.

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

BITV 1.0 zu BITV 2.0

Die Verwendung von eindeutig zugeordneten Beschriftungen war in der BITV von 2002 bereits eine wesentliche Bedingung. Die Zuordnung des label-Elements zu einem Eingabefeld sollte deshalb auf allen zur alten BITV konformen Webseiten bereits vorhanden sein. Die BITV von 2002 verlangte die Einhaltung weiterer Bedingungen, die durch den technologischen Fortschritt heute als veraltet gelten und nicht mehr nötig sind. So müssen nach der BITV 2.0 Textfelder nicht mehr vorbelegt werden und die Positionierung der Beschriftung ist auch nicht mehr genau vorgeschrieben.

Die Verwendung des fieldset-Elements und des legend-Elements ist in der BITV 2.0 ein Mittel um verschiedene BITV-Bedingungen zu erfüllen. Die BITV empfiehlt die Verwendung an den Stellen, wo sie sinnvoll genutzt werden können, zum Beispiel bei der Gruppierung von Kontrollkästchen und anderen semantisch zusammengehörigen Eingabefeldern. Nach der alten BITV war die Verwendung streng genommen überall vorgeschrieben, was aber in der Regel nicht eingehalten wurde und von Testverfahren, wie dem BITV-Kurztest auch nicht überprüft wurde.

Neu in der BITV 2.0 sind die ausführlichen Bedingungen zur Vermeidung und Korrektur von Fehleingaben. Die einzelnen Bedingungen galten bei der Formularerstellung zwar als "best practise" und gute Formulare erfüllen bereits die Bedingungen. Aber in diesem Punkt sollten Sie bei der Umstellung von der BITV 1.0 auf die BITV 2.0 Ihre Formulare auf jeden Fall erneut überprüfen und gegebenenfalls nachbessern.

BITV

Priorität I

BITV Bedingung 1.3.1 "Informationen und Beziehungen"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 1.4.1 "Farbe"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 3.3.1 "Fehleridentifizierung"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 3.3.2 "Beschriftungen"

Für Experten (in Englisch):

Deutsche Übersetzungen:


BITV Bedingung 3.3.3 "Korrekturvorschläge"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 3.3.4 "Fehlervermeidung"

Für Experten (in Englisch):

Deutsche Übersetzungen:


BITV Bedingung 4.1.2 "Name, Rolle, Wert"

Für Experten (in Englisch):


Deutsche Übersetzungen:


Priorität II

BITV Bedingung 2.1.3 "Tastaturbedienbarkeit"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 3.3.5 "Hilfe"

Für Experten (in Englisch):


Deutsche Übersetzungen:


BITV Bedingung 3.3.6 "Fehlervermeidung"

Für Experten (in Englisch):


Deutsche Übersetzungen:

© Bundesministerium für Arbeit und Soziales