Formularfelder dürfen nur ein label- Element haben
Blind
Sehbehindert
Hören
Mobilität
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Casandra Visser
Autor
Yotam Flohr
Forscher
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare:
0
Laut Webzugänglichkeitsrichtlinien darf jedes Formularfeld nur ein label-Element haben.
Warum es wichtig ist
Das Zuweisen mehrerer Labels zu demselben Formularfeld kann Probleme verursachen und zu einer verwirrenden Erfahrung führen. Einige unterstützende Technologien lesen das erste Label, einige das letzte, während andere beide lesen.
Behebung des Problems
Jedes Formularfeld darf nur ein label-Element haben.
Gutes Code-Beispiel
Codebeispiel
<label for="pass1">Label</label>
<input type="text" id="pass1" /><textarea id="pass2" title="Label"></textarea><label>Vorname:
<input type="text" id="pass3" />
</label><label>Wählen Sie eine Option:
<select id="pass4">
<option selected="selected">Ausgewählt</option>
<option>Nicht ausgewählt</option>
</select>
</label><label>Geben Sie Ihre Kommentare ein:
<textarea id="pass5"></textarea>
</label>
Kopieren Schlechtes Code-Beispiel
Codebeispiel
<label for="fail1">Hallo</label>
<label for="fail1">Foo</label>
<input type="text" id="fail1" /><label for="fail2">Label eins</label>
<label for="fail2">Label zwei</label>
<input type="checkbox" id="fail2" /><label for="fail3" id="l1">Label eins</label>
<label for="fail3">Label zwei</label>
<input type="checkbox" id="fail3" aria-labelledby="l1" /><label for="fail4">Vorname:</label>
<label>Vorname:
<input type="text" id="fail4" />
</label><label for="fail5">Wählen Sie eine Option:</label>
<label>Wählen Sie eine Option:
<select id="fail5">
<option selected="selected">Ausgewählt</option>
<option>Nicht ausgewählt</option>
</select>
</label><label for="fail6">Geben Sie Ihre Kommentare ein:</label>
<label>Geben Sie Ihre Kommentare ein:
<textarea id="fail6"></textarea>
</label><label>Geben Sie Ihre Kommentare ein:
<label>Geben Sie Ihre Kommentare ein:
<textarea id="fail7"></textarea>
</label>
</label><label>Geben Sie Ihre Kommentare ein:
<label>Geben Sie Ihre Kommentare ein:
<label>Geben Sie Ihre Kommentare ein:
<textarea id="fail8"></textarea>
</label>
</label>
</label><label for="fail9">Geben Sie Ihre Kommentare ein:</label>
<label>Geben Sie Ihre Kommentare ein:
<label>Geben Sie Ihre Kommentare ein:
<label>Geben Sie Ihre Kommentare ein:
<textarea id="fail9"></textarea>
</label>
</label>
</label>
Kopieren