# Doppelte ID: Warum sie Barrierefreiheit noch stört

Source: https://allyway.ai/de/glossary/doppelte-id

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](https://www.w3.org/WAI/WCAG22/Understanding/parsing.html) 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 |

> **Note:** > **Referenzierte IDs zuerst**
> Eine doppelte id an zwei rein dekorativen `div`-Elementen ist Aufräumarbeit. Eine doppelte id, auf die ein Label oder ARIA-Attribut zeigt, ist eine echte Barriere – beheben Sie diese zuerst. Prüfungen nach WCAG 2.0 oder 2.1 oder nach Normen, die darauf verweisen, wie der [EN 301 549](https://allyway.ai/de/regulations/en-301-549), können 4.1.1 weiterhin gesondert aufführen.

## Praxisbeispiele

```html title="Beispiel"
<!-- 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](https://allyway.ai/de/glossary/fehlendes-formular-label). Bezieht ein [Icon-Button](https://allyway.ai/de/glossary/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.

**Do:** Do

ids aus einem eindeutigen Präfix pro Komponenteninstanz bilden (`newsletter-email`, `produkt-42-titel`) und jedem wiederholten Widget eigene ids geben.

**Don't:** Don't

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

Q: Ist eine doppelte ID ein WCAG-Verstoß?
A: 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.

Q: Warum wurde 4.1.1 Parsing gestrichen?
A: 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.

Q: Was passiert, wenn zwei Elemente dieselbe ID haben?
A: 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.

Q: Wie finde ich doppelte IDs auf meiner Website?
A: Prüfen Sie zuerst Formulare und wiederholte Komponenten, denn dort wirken sich Doppelungen aus. Der [kostenlose WCAG-Scanner](https://allyway.ai/de/free-wcag-accessibility-scanner-for-websites) zeigt zusätzlich die Label- und Namensfehler, die daraus entstehen – gemessen an [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2).