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
Foto des Experten
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare: 0
Ihre gesamte Domain
Erhalten Sie detaillierte Anweisungen, wie Sie jedes Barrierefreiheitsproblem auf Ihrer Website beheben können

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