Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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:

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

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 Extern, englischsprachig: 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 Extern, englischsprachig: 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.