Barrierefreiheit

Doppelte IDs im Dokument

Üblicher Schweregrad: mittel · Aufwand: gering

Woran du es erkennst

Dieselbe id wird auf mehreren Elementen verwendet (axe-Regeln duplicate-id, duplicate-id-active, duplicate-id-aria) — meist durch kopierte Komponenten oder mehrfach eingebundene SVG-Sprite-Symbole.

Warum es zählt

IDs sind die Anker für label[for], aria-labelledby und aria-describedby: Zeigen mehrere Elemente auf dieselbe ID (oder umgekehrt), verknüpfen Screenreader Felder mit den falschen Beschreibungen — Formulare werden so unzuverlässig bedienbar, ohne dass es visuell auffällt.

So behebst du es

  1. Suche im gerenderten DOM (nicht nur im Quelltext) nach doppelten IDs — der axe-Befund nennt die betroffenen Selektoren.
  2. Mache IDs in wiederverwendbaren Komponenten eindeutig, z. B. durch ein Instanz-Präfix oder generierte IDs (useId in React, eindeutige Slugs im CMS).
  3. Prüfe inline eingebundene SVGs: Aus <symbol> referenzierte IDs kollidieren, wenn dieselbe Grafik mehrfach direkt (nicht per <use>) eingebettet wird.
  4. Ergänze den axe-Check in der CI, damit doppelte IDs nicht durch Copy-Paste zurückkehren.

Zum Nachlesen