Was ARIA-Verweise und eindeutige IDs brauchen

So funktioniert es

Manche Verbindungen im HTML laufen über die id eines Elements. Ein Element zeigt mit einem Attribut auf diese ID:

• label for verbindet eine Beschriftung mit ihrem Formularfeld.
• aria-labelledby nimmt den Text eines anderen Elements als Namen, etwa die Überschrift eines Dialogs.
• aria-describedby hängt eine Beschreibung an, etwa einen Hinweis zum Passwort oder eine Fehlermeldung.
• aria-controls, aria-owns, aria-activedescendant, aria-errormessage und aria-details verbinden Bedienelemente mit dem, was sie steuern oder erklären.

<label for="passwort">Passwort</label>
<input id="passwort" type="password" aria-describedby="passwort-hinweis">
<p id="passwort-hinweis">Mindestens zwölf Zeichen.</p>

Der Screenreader liest dann beim Feld „Passwort“ und den Hinweis vor. Zeigt der Verweis ins Leere, fehlt beides. Gibt es die ID zweimal, nimmt der Browser das erste Element mit dieser ID, oft das falsche.

WCAG 2.2 hat das frühere Kriterium 4.1.1 zur Syntax gestrichen. Doppelte IDs zählen seither, wenn sie Beschriftungen und Beziehungen brechen; das fällt unter 1.3.1 und 4.1.2.

Worauf es ankommt

• Jede ID nur einmal. Doppelte IDs, auf die ein label oder ein ARIA-Attribut verweist, brechen die Verbindung. Doppelte IDs ohne Verweis sind weniger dringend, führen aber bei der nächsten Änderung leicht zum selben Fehler.
• Jeder Verweis trifft. Ein Tippfehler oder eine umbenannte ID lässt Name oder Beschreibung verschwinden, ohne dass man es sieht.
• Mehrere IDs mit Leerzeichen. aria-labelledby und aria-describedby nehmen mehrere IDs, getrennt durch Leerzeichen, nicht durch Kommas.
• Gleiche Seite. Verweise wirken nur innerhalb derselben Seite, nicht in ein iframe hinein.

Häufigste Ursache sind Bausteine, die mehrfach auf einer Seite stehen: dasselbe Formular im Kopf und im Fuß, mobile und Desktop-Navigation gleichzeitig im Code, eine Kachel mit fester ID in einer Liste.

So richtest du es ein

IDs entstehen in den Vorlagen deines Themes, in Formular-Plugins und Komponenten. Wer sie pflegt, lässt sie je Einsatz eindeutig erzeugen, etwa mit einem Zähler oder einer Funktion des Frameworks (in React useId). Für Formular-Plugins, die bei zwei Formularen auf einer Seite dieselben IDs ausgeben, gibt es oft eine Einstellung für einen Präfix; sonst hilft der Anbieter. Der Report nennt die betroffenen IDs.