A: IDs, die in ARIA und Labels genutzt werden, müssen eindeutig sein (WCAG 4.1.2)

Das bedeutet

Jedes Element, das über eine ID angesprochen wir, zum Beispiel durch aria-labelledby, aria-describedby oder ein for-Attribut in Labels, muss eine einzigartige ID besitzen. Wird dieselbe ID mehrfach vergeben, verlieren assistive Technologien die Zuordnung. Screenreader können nicht mehr erkennen, welches Label oder welche Beschreibung zu welchem Feld gehört.

Auswirkung

Doppelte IDs führen zu schwerwiegenden Problemen bei der Zugänglichkeit. Formulare, Schaltflächen oder Eingabefelder werden falsch oder gar nicht vorgelesen. Das kann dazu führen, dass Nutzer und Nutzerinnen Eingaben nicht verstehen oder wichtige Inhalte übersehen. Ein solcher Fehler verletzt WCAG 4.1.2 (A) „Name, Rolle, Wert“ und hat einen sehr hohen Einfluss auf die Bewertung.

Empfehlung

• Jede ID darf im gesamten Dokument nur einmal vorkommen.

• IDs müssen eindeutig, stabil und aussagekräftig sein (zum Beispiel email-input, password-field).

• Wenn Elemente mehrfach vorkommen, verwenden Sie dynamisch generierte IDs oder alternative Zuordnungen (zum Beispiel mit aria-labelledby auf unterschiedliche Ziele).

• Prüfen Sie insbesondere Formulare und benutzerdefinierte Komponenten, da hier doppelte IDs häufig durch Kopieren entstehen.

Beispiele

Problematisch:

<input id="email" type="email" name="email">
<label for="email">E-Mail-Adresse</label>
<input id="email" type="email" name="confirm_email">
<label for="email">E-Mail wiederholen</label>
  

<input id="email" type="email" name="email">
<label for="email">E-Mail-Adresse</label>
<input id="confirm_email" type="email" name="confirm_email">
<label for="confirm_email">E-Mail wiederholen</label>