Verknüpfung einer (sichtbaren) Formularbeschriftung mit dem Formularelement indem das Formularelement als Kindelement der Beschriftung ausgezeichnet wird

forms-label-implicit-html
Titel der RegelVerknüpfung einer (sichtbaren) Formularbeschriftung mit dem Formularelement indem das Formularelement als Kindelement der Beschriftung ausgezeichnet wird
BeschreibungWenn ein Formularelement durch sichtbaren Text beschriftet wird und das Formularelement kein for-Attribut besitzt, das die Beschriftung mit dem Formularelement verknüpft, dann muss das Formularelement ein Kindelement der Beschriftung sein,. Das Formularelement erhält dadurch seinen Namen.
Typatomic
Eingabeaspekte
  • Accessibility-Tree
  • CSS-Stiling
  • DOM-Baum
Anforderungen
  • 251 Pointer Gestures (A)
  • 131 Info und Beziehungen (A)
  • 332 Beschriftungen ({Labels}) oder Anweisungen (A)
  • 412 Name, Rolle, Wert (A)
AnwendbarkeitDie Regel ist für Beschriftungen von Formularelementen anwendbar. Dabei darf die Beschriftung aus Text vor und nach dem Formularelement bestehen.
ErwartungenDie Beschriftung wird mit <label> ausgezeichnet, wobei das Formularelement ein Kindelement der Beschriftung ist. Dadurch kann per Maus auf die Beschriftung geklickt werden und der Fokus wird auf das Formularelement gesetzt. Außerdem wird dadurch die Beschriftung auch zum Namen des Formularelements. Die Regel muss von der expliziten Beschriftung für Formularelemente abgegrenzt werden.
Annahmen

Der Name des Steuerelements wird nicht mit aria-label oder aria-labelledby überschrieben. Wenn aria-label oder aria-labelledby zur Bezeichnung des Formularelements genutzt werden, dann steht die Beschriftung 1:1 im Namen (Erfolgskriterium 2.5.1).

Das <label> Element sowie die Formularelemente haben kein Elternelement mit aria-hidden="true".

Das <label> Element wird nur für beschriftbare Formularelemente eingesetzt. Diese sind <input> (außer type="hidden"), <button>, <select>, <textarea>, <output>, <meter> und <progress>.

Das <label> Element enthält keine Links (da ein Klick nicht zum Fokussieren des Formularelements führt).

Zugänglichkeitsunterstützend-
Beispiele-
Änderungen-
Glossar-
Probleme (optional)-
Hintergrund (optional)-
Danksagung (optional)-