Etwas kleines und simples, das ich aber sehr schätze, ist, wenn man auf einer Webseite eine Checkbox auch aktivieren kann, indem man auf den danebenstehenden Text klickt. Diese Funktion ist auch in Computeranwendungen sehr verbreitet; wenn nicht sogar standartmässig vorhanden.
Ich nicht.
Standartmässig (ohne Manipulationen via CSS) ist eine Checkbox ungefä hr 12 x 12 Pixel gross. Eine relativ kleine Fläche, wenn man von einer Bildschirmauflösung von mindestens 1024 x 768 Pixeln ausgeht (immerhin Platz für rund 5’400 Checkboxen). Es wir also ein ziemlich genaues Mänovrieren mit dem Mauszeiger abverlangt, um diese kleine Checkbox zu klicken. Schlussendlich führt dies zu einer Einbusse der Usability (Benutzerfreundlichkeit) einer Webseite. Ausserdem kommt es äusserts selten vor, dass auf einer Seite eine Checkbox freistehend zu finden ist, ohne einen Beschriftungstext, welcher den Benutzer über die Folgen des An- bzw. Abwählens der entsprechenden Checkbox informiert.
Wieso also nicht den Beschriftungstext so manipulieren, dass bei einem Klick darauf ebenfalls die Checkbox beeinflusst wird? Da der Text und die Checkbox sowieso zusammengehören, wäre das ja eine logische Verknüpfung.
Technisch gibt es mindestens zwei Wege, dies zu lösen. Einer davon bleibt dem W3C-Standart treu, der andere setzt eingeschaltetes JavaScript voraus.
1) Als erstes die W3C-konforme Lösung: dabei wird das Element <label></label> verwendet.
(das Attribut “for=” im Label-Element bezieht sich auf die “id” der Checkbox)
Anzeigebeispiel:
Nachteil: Safari scheint diese Lösung nicht so zu intepretieren, dass durch ein Klick auf das “Label” die Checkbox beeinflusst wird. Mit Firefox funktionierts.
2) Und die zweite Variante, mit Hilfe von JavaScript (was sogleich auch der einzige Nachteil ist), welche auch Browser-unabhängig funktioniert:
Anzeigebeispiel:
Cookies speichern?
Nachteil: wie oben erwähnt: JavaScript muss im Browser aktiviert sein; was heutzutage aber kein Problem mehr sein dürfte, da man sonst schnell an Grenzen stösst weil ja immer mehr AJAX-basierte Webauftritte entstehen, bzw. viele AJAX-Elemente in Webseiten verwendet werden.
Ich empfehle jedem Web-Programmierer Gebrauch von dem <label>-Element zu machen; zumal dieses ja auch die Validierung der Seite nicht beeinträchtigt. Rein strukturmässig betrachtet macht es durchaus Sinn, das <label>-Element auch bei anderen Formularelementen (Radiobuttons, Textinput, etc.) zu verwenden, da so eine eindeutige Verknüpfung zwischen Formularelement und Beschriftungstext erzeugt wird.
Referenzen:
selfHTML – Label Element
The World Wide Web Consortium (W3C)
