Eindeutige Label-Zuordnungen

Silktide prüft Formular-Labels, die ihr Feld über eine ID benennen, und meldet Labels, die sich dieselbe ID mit einem anderen Label teilen. Jedes Feld sollte genau ein Label haben, das auf es verweist, damit es immer auf dieselbe Weise vorgelesen wird.

In wird ein <label> mit seinem Formularfeld verknüpft, indem das for-Attribut des Labels auf die id des Feldes gesetzt wird. Wenn zwei oder mehr Labels denselben for-Wert verwenden, beanspruchen sie alle dasselbe Feld – meist, weil ein Formular kopiert wurde und die IDs nicht aktualisiert wurden.

<!-- Problem: Beide Labels verweisen auf id="name" -->
<label for="name">Ihr Name</label>
<input id="name">

<label for="name">Firmenname</label>
<input id="company">

Warum das wichtig ist

muss auswählen, welches Label für das Feld vorgelesen wird, und unterschiedliche wählen unterschiedlich – manche lesen das erste, manche beide. Währenddessen bleibt das Feld, für das das zweite Label gedacht war, ohne Label und wird als unbenanntes Feld vorgelesen. Ein Klick auf ein Label fokussiert außerdem sein Feld, sodass eine Person, die auf "Firmenname" klickt, sich möglicherweise im falschen Eingabefeld wiederfindet.

So beheben Sie das Problem

Geben Sie jedem Formularfeld eine eigene eindeutige id.
Richten Sie das for-Attribut jedes Labels auf die ID des einen Feldes, das es beschreibt:

<!-- Behoben: Jedes Label verweist auf sein eigenes Feld -->
<label for="name">Ihr Name</label>
<input id="name">

<label for="company">Firmenname</label>
<input id="company">

Wenn mehrere Textbausteine tatsächlich dasselbe Feld beschreiben, belassen Sie es bei einem einzelnen <label> und verknüpfen Sie den zusätzlichen Text mit aria-describedby statt mit einem zweiten Label.

So testet Silktide dies

Alle <label>-Elemente mit einem for-Attribut auf jeder Seite finden.
Die Labels nach ihrem for-Wert gruppieren.
Wo zwei oder mehr Labels denselben Wert haben, meldet Silktide jedes Label in der Gruppe.

Fehlerbehebung

Die Labels befinden sich in separaten Formularen

IDs müssen auf der gesamten Seite eindeutig sein, nicht nur innerhalb eines Formulars. Zwei Formulare, die auf derselben Seite jeweils <label for="email"> enthalten, kollidieren dennoch – benennen Sie die IDs so um, dass sie sich unterscheiden, zum Beispiel signup-email und newsletter-email.