Markup

Von ARIA genutzte ids müssen eindeutig sein

Regel: duplicate-id-aria
Schweregrad: Kritisch
WCAG-Stufe A

Warum das wichtig ist

aria-labelledby löst auf das erste Element mit dieser id auf. Teilen sich zwei Elemente eine id, bekommt die Hälfte Ihrer Bedienelemente klammheimlich den falschen Namen.

So beheben Sie es

Machen Sie jede von ARIA referenzierte id auf der Seite eindeutig.
Erzeugen Sie ids pro Komponenteninstanz, statt sie in einem sich wiederholenden Template fest zu verdrahten.
Sehen Sie zuerst in Listen und wiederholten Formularzeilen nach — dort entstehen Dubletten.

Im Markup

Fehlerhaft

<span id="label">Street</span>
<span id="label">City</span>
<input aria-labelledby="label">

Korrekt

<span id="street-label">Street</span>
<span id="city-label">City</span>
<input aria-labelledby="street-label">

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu duplicate-id-aria (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.