9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar

Beschriftungen sollen über Markup mit den Formularelementen, die sie beschriften, verknüpft sein.

Geprüft wird, ob Formularelemente korrekt beschriftet werden.

Standardmäßig sollten label-Elemente so benutzt werden:

<label> Das ist das beschreibende Label für das Input-Element <input type="text"> </label>

Außerdem kann das label-Element auch getrennt vom Input-Element dargestellt werden. 

Dann müssen die beiden Elemente mit Attributen verknüpft werden.

Möglichkeit 1 (for="{id}" zeigt auf id): 

<label for="beispiel_id"> Das ist das beschreibende Label für das Input-Element </label> <input type="text" id="beispiel_id">

Möglichkeit 2 (aria-labelledby="{id}" zeigt auf id):

<label id="beispiel_label_id"> Das ist das beschreibende Label für das Input-Element </label> <input type="text" aria-labelledby="beispiel_label_id">
wb_incandescent

Gruppenbeschriftungen, wie zum Beispiel bei <fieldset><legend> oder role="group", gilt dasselbe. Sollte die korrekte Struktur vorliegen müssen keine Attribute hinzugefügt werden.

Sollte die korrekte Struktur nicht vorliegen muss das Attribute aria-describedby benutzt werden.

warning

Hierarchische Auswahllisten dürfen nicht mit Bindestrichen oder Leerzeichen gegliedert werden. optgroup muss verwendet werden.