Verwendung des label-Elements bei Radio- und Checkboxen innerhalb von Formularen

Label-CodeFür jedes Element eines Formulares sollte nach Usability- und Accessibility-Gesichtspunkten ein zugehöriges <label>-Element definiert werden.

Dabei weist man dem <label>-Element mit dem Attribut for="id" die ID des zugehörigen Formularelementes zu, also zum Beispiel:

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

Das funktioniert prima bei Textfeldern, Textareas und Submit-Buttons.

Doch wie verhält sich das mit Radio- und Checkboxen?
Hier ist die Lösung etwas verzwickter.

Im ersten Moment möchte man einer Gruppe von Checkboxen nur ein Label verpassen.
Beispiel: Es soll aus drei Vorgaben ausgewählt werden, welches Haustier der Anwender besitzt.

Mit

<label for="haustier">haustier</label>
  <input name="haustier" type="checkbox" id="hund" 
  value="hund" />
  <input name="haustier" type="checkbox" id="katze" 
  value="katze" />
  <input name="haustier" type="checkbox" id="maus" 
  value="maus" />

kommt man aber nicht ans Ziel, da das <label>-Element hier ja für alle drei Checkboxen gelten würde.

Besser und auch semantisch korrekt ist die folgende Lösung:

<fieldset>
  <legend>Ihre Haustiere</legend>
  <input name="haustier" type="checkbox" id="hund" 
  value="hund" />
  <label for="hund">Hund</label>
  <input name="haustier" type="checkbox" id="katze" 
  value="katze" />
  <label for="katze">Katze</label>
  <input name="haustier" type="checkbox" id="maus" 
  value="maus" />
  <label for="maus">Maus</label>
</fieldset>

Das <fieldset>-Element gruppiert die Checkboxen optisch und semantisch, das <legend>-Element vergibt eine Art Überschrift über die Gruppe der Checkboxen.
Und jede Checkbox für sich bekommt dann ein eigenes <label>-Element.

Was dabei noch zu beachten ist:

Um die Checkboxen als zueinandergehörig zu kennzeichnen, brauchen sie dasselbe name-Attribut!
Um jedoch dem <label>-Element eine eindeutige Checkbox zuordnen zu können, braucht jede Checkbox für sich eine eindeutige id.
Das führt dazu, dass sich die name- und id- Elemente der Checkbox unterscheiden (müssen)!

Dieselbe Vorgehensweise empfiehlt sich natürlich auch für Radiobuttons.


Kommentare & Trackbacks

  1. Kommentar von Christoph:

    Gravatar von Christoph

    Hallo,

    sollte es nicht so sein, dass die Label immer vor dem jeweiligen Feld stehen. Schließlich lesen die Screenreader doch von oben nach unten. Wenn die nun zuerst das Feld sehen, und dann erst das dazugehörige Label ist es ja quasi schon “zu spät”.

    Ich würde vorschlagen erst:

    Ansonsten shr schöner BLOG und sehr interessante Beiträge!

    Weiter so!

  2. Kommentar von Franziska:

    Gravatar von Franziska

    Hallo Christoph,

    leider wurde Dein Vorschlag von WordPress vermutlich als Quellcode gedeutet und hier nicht angezeigt. Beim Posten von Code muss man in WordPress alle Zeichen erst mal in HTML-Entities umwandeln.

    Ich habe mir auch schon Gedanken darüber gemacht, dass es vielleicht sinnvoller wäre, das Label vor die Radio- bzw. Checkboxen zu setzen.
    Allerdings fand ich an verschiedenen Stellen die Information, dass bei Textfeldern das Label direkt vor das Feld, bei Radio- und Checkboxen aber direkt nach das Feld gesetzt werden soll, wie z.B. hier:
    http://www.barrierefreies-webdesign.de/knowhow/formulare/bezeichnung.html

    Ich denke, es könnte für sehende Nutzer auch verwirrend sein, wenn die Bezeichnungen für die Radio- und Checkboxen vor selbigen stehen, da es im allgemeinen anders gehandhabt wird.

    Ach ja, danke für das Lob :)
    Hat mich sehr gefreut!

  3. Kommentar von Christoph:

    Gravatar von Christoph

    Hi,

    ja das mit dem Code hat nicht geklappt….

    Den sehenden würde es verwirren. Da hast du Recht. Daran hatte ich nicht gedacht. Ich war so auf die Blinden aus :)

    Vielleicht könnte man ein Label davor machen und es als invisible kennzeichnen. Aber dann müsste man es irgendwie verhindern, dass das Label nach der Checkbox nicht im screenreader erscheint. Sonst wäre es doppelt….Fragen über Fragen…:)

  4. Kommentar von Sofia:

    Gravatar von Sofia

    “Um die Checkboxen als zueinandergehörig zu kennzeichnen, brauchen sie dasselbe name-Attribut!” – ist falsh. Das Attribut name MUSS unterschiedlich sein bei den Checkboxen ansonsten würden die Werte nicht ankommen. Das mit dem selben Namen gilt nur für die Radio-Buttons.

  5. Kommentar von Webdesign Soest:

    Gravatar von Webdesign Soest

    Gerade mal mit Jquery ausprobiert. Klappt auch super!

Kommentar schreiben

* Pflichtfelder