Was ist label-Element?

Kurz-Fakten

• Zwei gleichwertige Wege: for="feld-id" oder das Feld in das label einschließen
• Ein Platzhaltertext ist kein Ersatz: er verschwindet bei der Eingabe und wird uneinheitlich vorgelesen
• Ein label darf sich nur auf ein Feld beziehen; für Gruppen dient fieldset mit legend
• Fehlt die Beschriftung, meldet jedes Zugänglichkeitswerkzeug es als Fehler
• Bei Ankreuzfeldern und Auswahlknöpfen vergrößert das label die anklickbare Fläche erheblich

Einordnung für die Praxis

Das versteckte Label ist ein Muster, das gut aussieht und schlecht funktioniert: Beschriftung nur als Platzhalter im Feld. Sobald jemand zu tippen beginnt, ist die Angabe weg – wer beim Ausfüllen unterbrochen wird, weiß nicht mehr, was verlangt war.

Wenn die Beschriftung aus Gestaltungsgründen nicht sichtbar sein soll, bleibt sie im Markup und wird per CSS ausgeblendet, ohne sie aus dem Zugänglichkeitsbaum zu entfernen. display: none wäre der falsche Weg.

Verwandte Begriffe

• Formularelemente Ein Formular besteht aus dem form-Element als Rahmen und den Feldern darin: input,…
• Input-Typen Das type-Attribut am input-Element legt fest, welche Art von Eingabe erwartet wird –…
• Barrierefreiheit Barrierefreiheit bedeutet, dass eine Website auch mit Screenreader, Tastatur,…
• id-Attribut Das id-Attribut vergibt eine Kennung, die im gesamten Dokument nur einmal vorkommen…