Name ist Pflicht veröffentlicht in 2013
Beschriftung mit LABEL
Damit Formulare barrierefrei genutzt werden können, benötigt jedes Formular-Steuerelement eine Beschriftung. Die Beschriftung sollte sichtbar sein, allerdings gibt es Ausnahmen, wenn keine sichtbare Beschriftung verfügbar ist oder wenn es sich um Buttons handelt.
In HTML ist das LABEL
-Element für sichtbare Beschriftungen in Formularen vorgesehen. Das LABEL
-Element kann auf zwei Weisen eingesetzt werden:
- Das
LABEL
-Element kann einem Formularelement explizit zugewiesen werden, indem es mit demfor
-Attribut mit dem Formularelement logisch verknüpft wird. - Das
LABEL
-Element kann einem Formularelement implizit zugewiesen werden, indem es neben der Beschriftung auch das Formularelement zum Kind-Element hat.
Explizite Beschriftung mit LABEL
Wenn eine sichtbare Beschriftung für ein Formularelement vorhanden ist, dann muss sie nach den Web Content Accessibility Guidelines (WCAG) 2.0 mit LABEL
ausgezeichnet werden und mit dem for
-Attribut mit dem Formularelement verknüpft werden. Damit wird die Beziehung zwischen Beschriftung und Steuerelement eindeutig bestimmt und das Formularelement erhält einen Namen.
<p>
<input type="checkbox" name="zustimmung" id="accept" value="ja" />
<label for="accept">Ich stimme allen Bedingungen zu</label>
</p>
LABEL
-Elemente müssen grundsätzlich eingesetzt werden für
- Eingabefelder (
<input type="text" />
,<input type="password" />
und<textarea>
), - Checkboxen (
<input type="checkbox />
), - Radio-Buttons (
<input type="radio />
), - Auswahllisten (
<select>
) sowie - Felder für datei-Uploads (
<input type="file" />
).
Erst mit der Verknüpfung der Beschriftung mit dem Formularelement kann das Formularelement eindeutig von Software wie Screenreader identifiziert werden.
Bei sichtbaren Beschriftungen kann im Übrigen die Verknüpfung überprüft werden, indem auf den Text der Beschriftung geklickt wird; wird der Systemfokus anschließend auf das damit verbundene Formularelement gelegt, ist die Verknüpfung richtig umgesetzt. Die durch die verknüpfte Beschriftung vergrößerte Klick-Fläche kommt sicherlich auch einigen anderen Nutzern zu Gute.
Implizite Beschriftung mit LABEL
Nach den aktuell gültigen Spezifikationen ist es ebenfalls erlaubt, eine implizite Verknüpfung von Formularelementen mit ihren Beschriftungen vorzunehmen:
<p>
<label>
<input type="checkbox" name="zustimmung" value="ja" />
Ich stimme allen Bedingungen zu
</label>
</p>
Eine implizite Verknüpfung bedeutet, dass das Formularelement als Kindelement der Beschriftung ausgewiesen wird. Allerdings gibt es bis heute Kompatibilitätsprobleme mit dieser Technik und Screenreader werten die Beschriftungen falsch oder gar nicht aus. Es sollte daher auf die implizite Verknüpfung von Formularelementen mit ihren Beschriftungen verzichtet werden.
Mehrere Beschriftungen für ein Formularelement
Es ist nach den Spezifikationen zulässig, mehrere LABEL
-Elemente einem Formularelement zuzuordnen.
<label for="eingabe5">Sie haben eine inkorrekte Postleitzahl eingegeben. In Deutschland sind Postleitzahlen 5-stellig.</label>
...
<p>
<label for="eingabe5">Postleitzahl</label>
<input type="text" id="eingabe5" name="plz" />
</p>
Eine solche Möglichkeit wäre in vielen Situationen praktisch, aber auch hier gibt es bis heute Kompatibilitätsprobleme und daher ist die Verwendung von zwei Beschriftungen für ein Formularelement vor dem Hintergrund der Barrierefreiheit nicht zu empfehlen. Um zwei Beschriftungen einem Formularelement zuzuweisen, gibt es allerdings alternative Möglichkeiten etwa mit FIELDSET
und LEGEND
.
Der Beitrag Name ist Pflicht besteht aus folgenden einzelnen Webseiten:
- Beschriftung mit
LABEL
(Aktuelle Seite)
title
-Attribut als RettungsankerDie Beschriftung von Steuerelementen mit dem
title
-Attribut sollte nur in Ausnahmefällen vorgenommen werden.- Beschriftungen nur für Screenreader
Wenn auf sichtbare Beschriftungen für Steuerelemente verzichtet wird, gibt es weitere Techniken, die eine Beschriftung zumindest für Screenreadernutzer berücksichtigen.
- Vorbelegung von Eingabefeldern
Wenn in einem Formular Hinweise für den Nutzer bereitgestellt werden, dann sollten sie immer zugänglich sein. Die
value
- undplaceholder
-Attribute sind für solche Hinweise meist nicht geeignet.
Der folgende Begriff auf dieser Seite wird im Glossar definiert:Name