Liebe Entwickler, verwendet <label>-Tags, verflucht noch mal!

Beinahe täglich stoße ich, beim Ausfüllen von Formularen, auf eine der größten (und für mich nervigsten) Usability-Schlampereien des Internets: Formularfelder ohne dazugehörige <label>-Tags. Bei Textfeldern oder Dropdown-Listen ist das Fehlen dieser noch akzeptabel, immerhin bieten diese Eingabetypen ausreichend Interaktions-Fläche, etwa zum Anklicken.

Bei Radiobuttons und Checkboxen hingegen sollten sich Entwickler darüber im Klaren sein, dass die vorhandene Interaktions-Fläche bei diesen Elementen sehr spärlich bemessen ist. Dies erschwert nicht nur das Anklicken mittels Maus-Cursor (insbesondere bei Bildschirmen mit hohen Auflösungen), sondern auch das Antippen per Finger auf Geräten mit Touchscreens.

Abhilfe schafft hier die konsequente Verwendung des <label>-Tags: Es dient nicht nur der semantischen Auszeichnung von Feld-Beschreibungen, sondern vergrößert auch die Interaktions-Fläche der angeschlossenen Elemente. So wird etwa bei Checkboxen der dazugehörige Text im <label>-Element anklickbar bzw. reagiert auf einen Tap mit dem Finger.

Übrigens: Neben Benutzern mit hohen Auflösungen und/oder Mobilgeräten kommt dies auch Menschen mit Handicap zugute.

Danke

Hinterlasse einen Kommentar