BITV Reloaded – Anforderung 12

Bedingung 12.4: Label mit Formularelementen verknüpft (Prio. 1)

Beschriftungen sind genau ihren Kontrollelementen zuzuordnen.«

Was heißt das?

Sie kennen diese Funktion aus Ihrem Betriebssystem: bei Radiobuttons oder Checkboxen müssen Sie nicht unbedingt das Element selbst anklicken; meistens reicht es, wenn Sie auf den danebenstehenden Text (das sog. Label) klicken und schon ist das Häkchen gesetzt. Genau das geht seit HTML 4 auch mit allen Elementen in Web-Formularen, nur wird es viel zu selten eingesetzt.

Menschen mit motorischer Behinderung wird durch diese Labels die Möglichkeit gegeben, ein wesentlich größeres Ziel zu treffen (Fitts' Law) oder das Formular per Tastatur zu bedienen. Die Orientierung in nicht-visuellen Ausgabeformen wird durch die eindeutige Zuordnung erst ermöglicht.

Beispiele:

In der Gestaltung Ihrer Formulare sollten Sie sich von den Interface-Konventionen der großen Betriebssysteme leiten lassen, da diese den Benutzern vertraut sind. So sollten die Labels von Checkboxen und Radiobuttons im Idealfall immer unmittelbar rechts neben dem jeweiligen Kontrollelement stehen, bei Texteingabefeldern kann dies sowohl links daneben als auch unmittelbar darüber sein. Im Magazin von ›Einfach für Alle‹ finden Sie mehrere Tutorials, wie Sie Formulare barrierefrei und benutzerfreundlich gestalten und programmieren können.

Das folgende Codelisting zeigt die Verknüpfung eines Formularelementes, in diesem Fall eines Textfelds zur Eingabe einer E-Mail-Adresse mit der dazugehörigen Beschriftung:

1. <label for="email">Ihre <span lang="en">E-Mail</span>:</label>
2. <input type="text" id="email">

Dabei unterscheidet HTML zwischen zwei Formen der Verknüpfung:

1. der expliziten, d.h. der ausdrücklichen Verknüpfung über die Attribute for für das Label und id für das Formularlement sowie
2. der impliziten, d.h. der sich zwangsläufig ergebenen Verknüpfung durch eine entsprechende Verschachtelung der Elemente, wie das folgende Beispiel zeigt:

1. <label>Vorname:
2. <input type="text">
3. </label>

Wie können Sie das testen?

Diesmal dürfen Sie mit einer Maus testen und brauchen nichts in Ihrem Browser abzuschalten! Nehmen Sie sich einfach alle Formulare Ihrer Website nacheinander vor und testen Sie, ob die Kontrollelemente über den Klick auf den danebenstehenden Text aktivieren lassen. Wenn Radiobuttons (Entweder-Oder-Auswahlen) in einem Formular vorhanden sind, sollten es logischerweise immer mindestens zwei sein, Checkboxen können auch alleine auftreten.

Bei Textfeldern sollte die Einfügemarke nach dem Klick auf das Label im entsprechenden Textfeld stehen, so dass Sie sofort mit der Eingabe beginnen können. Auswahlboxen werden bei der Aktivierung meistens durch eine Umrandung hervorgehoben, die Auswahl selber lässt sich dann mit den Pfeiltasten (rauf/runter) vornehmen. Achten Sie bei Ihren Tests auch darauf, dass durch den Klick das richtige, d.h. das zu dem angeklickten Label gehörende Kontrollelement aktiviert wird.