Doppelte ID: Warum sie Barrierefreiheit noch stört
Also called: Doppeltes id-Attribut, Nicht eindeutige ID, ID-Wert muss eindeutig sein
Definition
Eine doppelte ID ist ein id-Wert, der auf derselben Seite an mehr als einem Element steht. Labels, ARIA-Attribute und Sprungmarken, die auf diese id verweisen, erreichen dann nur das erste Element – andere Felder verlieren Namen oder Beschreibung.
Eine doppelte ID ist der Prüfbericht-Fehler für einen id-Wert, der auf einer Seite mehrfach vorkommt. Tools melden ihn als „Doppelte ID“, „ID-Wert muss eindeutig sein“ oder englisch „Duplicate id“. Seit WCAG 2.2 ist eine doppelte ID für sich genommen kein Verstoß mehr – sobald aber ein Label oder ein ARIA-Attribut darauf verweist, entsteht eine echte Barriere.
Was es bedeutet
In WCAG 2.0 und 2.1 verlangte das Erfolgskriterium 4.1.1 Syntaxanalyse (Parsing), dass „IDs eindeutig sind“. Das W3C hat dieses Kriterium inzwischen als veraltet und in WCAG 2.2 entfernt gekennzeichnet: Hilfstechnologien werten HTML nicht mehr selbst aus, sondern verlassen sich auf den Browser – die meisten Syntaxfehler stören daher nicht mehr. Das W3C ergänzt, dass viele Probleme, die früher an 4.1.1 gescheitert wären, nun an Info und Beziehungen (1.3.1) oder Name, Rolle, Wert (4.1.2) scheitern. Genau das trifft auf doppelte IDs zu.
Die HTML-Spezifikation verlangt weiterhin, dass jede id eindeutig ist. Ist sie es nicht, löst der Browser Verweise auf das erste passende Element der Seite auf. Betroffen ist alles, was über eine id verknüpft wird:
| Verweis | Folge einer doppelten ID | WCAG-Bezug |
|---|---|---|
<label for="email"> |
Nur das erste Feld erhält das Label, das zweite bleibt unbeschriftet | 1.3.1, 4.1.2 |
aria-labelledby / aria-describedby |
Name oder Hinweis stammt vom falschen Element | 4.1.2 |
aria-controls, headers in Tabellen |
Beziehungen zeigen auf das falsche Element | 1.3.1 |
Sprungmarken (href="#top") |
Der Fokus springt nur zum ersten Treffer | Bedienkomfort |
| Doppelte ID ohne Verweis | Keine Auswirkung für Nutzer | Best Practice |
Praxisbeispiele
<!-- Doppelte ID: das Newsletter-Formular im Footer verwendet erneut "email" -->
<label for="email">Ihre E-Mail-Adresse</label>
<input id="email" type="email"> <!-- Kontaktformular -->
<label for="email">E-Mail für den Newsletter</label>
<input id="email" type="email"> <!-- Footer: Label zeigt auf das erste Feld -->
<!-- Behoben: eindeutige ids je Formular -->
<label for="kontakt-email">Ihre E-Mail-Adresse</label>
<input id="kontakt-email" type="email">
<label for="newsletter-email">E-Mail für den Newsletter</label>
<input id="newsletter-email" type="email">Das zweite Feld oben wird ohne Namen angesagt – mit demselben Ergebnis wie bei einem fehlenden Formular-Label. Bezieht ein Icon-Button seinen Namen per aria-labelledby von einem mehrfach vorhandenen Element, bekommt er womöglich den falschen Namen – das verwirrt besonders Menschen, die per Sprache steuern.
ids aus einem eindeutigen Präfix pro Komponenteninstanz bilden (newsletter-email, produkt-42-titel) und jedem wiederholten Widget eigene ids geben.
ids fest in eine Komponente schreiben, die mehrmals pro Seite erscheint, Formular-Markup zwischen Bereichen kopieren oder ids zum Gestalten verwenden, wo eine Klasse reicht.
So beheben Sie eine doppelte ID
Häufige Fragen
Ist eine doppelte ID ein WCAG-Verstoß?
In WCAG 2.2 für sich genommen nicht, denn 4.1.1 Syntaxanalyse wurde entfernt. Ein Verstoß gegen 1.3.1 oder 4.1.2 liegt vor, wenn sie ein Label, einen Namen oder eine Beziehung bricht – etwa wenn label oder aria-labelledby auf eine doppelte id zeigt.
Warum wurde 4.1.1 Parsing gestrichen?
Laut W3C haben Hilfstechnologien früher Markup selbst ausgewertet und nutzen heute den Browser, der mit Syntaxfehlern deutlich besser umgeht. Die verbleibenden echten Probleme decken andere Kriterien ab.
Was passiert, wenn zwei Elemente dieselbe ID haben?
Verweise werden auf das erste passende Element der Seite aufgelöst. Labels, ARIA-Namen und -Beschreibungen sowie Sprungmarken zeigen also alle auf das erste Element, die anderen gehen leer aus.
Wie finde ich doppelte IDs auf meiner Website?
Prüfen Sie zuerst Formulare und wiederholte Komponenten, denn dort wirken sich Doppelungen aus. Der kostenlose WCAG-Scanner zeigt zusätzlich die Label- und Namensfehler, die daraus entstehen – gemessen an WCAG 2.2.
Related terms
Fehlendes Formular-Label: Fehler erklärt und behoben
Ein fehlendes Formular-Label bedeutet, dass ein Eingabefeld, eine Checkbox, eine Auswahlliste oder ein Textbereich keine verknüpfte Beschriftung und keinen anderen zugänglichen Namen hat. Screenreader sagen nur den Feldtyp an.
Read definition: Fehlendes Formular-Label: Fehler erklärt und behobenIcon-Button: So geben Sie ihm einen Namen
Ein Icon-Button ist eine Schaltfläche, die nur ein Symbol zeigt – Lupe, Kreuz, drei Striche – und keinen sichtbaren Text. Barrierefrei ist er erst mit einem zugänglichen Namen im Code, der Hilfstechnologien sagt, was er bewirkt.
Read definition: Icon-Button: So geben Sie ihm einen NamenLeerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und beheben