Stellen Sie sicher, dass das <select>-Element einen zugänglichen Namen hat

Web-Accessibility-Standards besagen, dass jedes <select>-Element ein programmatisch zugeordnetes <label>-Element haben muss.

Warum es wichtig ist

Screenreader benötigen nützliche Formularbeschriftungen, um Benutzern die Details der Formularfelder zu vermitteln. Das Hinzufügen einer Beschriftung zu allen Formularelementen beseitigt Verwirrung während des Ausfüllens des Formulars.

Behebung des Problems

Entwickler sollten <label>-Elemente programmatisch mit <select>-Elementen verknüpfen. Die empfohlene Methode besteht darin, das <label>-Element mit einer expliziten Zuordnung unter Verwendung der Attribute for und id zu verwenden.

Gutes Codebeispiel

Die Beschriftung kann auch implizit sein, indem das <label>-Element um das <select>-Element herum gewickelt wird:

Wenn das <select>-Element bereits auf andere Weise visuell beschriftet ist, kann es akzeptabel sein, aria-label zu verwenden, um eine unsichtbare Textbeschriftung für Screenreader bereitzustellen.

Eine alternative Methode (manchmal verwendet, wenn das Hinzufügen eines <label>-Tags die Funktionalität oder das Design beeinträchtigen würde oder wenn mehrere Beschriftungen auf dasselbe <select>-Element angewendet werden), besteht darin, stattdessen aria-labelledby zu verwenden:

Stellen Sie außerdem sicher, dass alle id-Attribute auf jeder Seite eindeutig sind und dass der Beschriftungstext für jemanden, der sie mit einem Screenreader hört, sinnvoll ist.

Schlechtes Codebeispiel

Testfälle

Für weitere Beispiele besuchen Sie die ACT Rules Library der W3C auf GitHub.