Doppelte IDs im HTML: finden, verstehen und beheben

Warum das wichtig ist

Die id ist im HTML so etwas wie eine Hausnummer, und vieles verlässt sich darauf, dass sie eindeutig ist. Ein <label for="email"> gehört zu dem Feld mit id="email", ein Sprunglink auf #inhalt zum Element mit id="inhalt", ein aria-describedby zur passenden Fehlermeldung. Gibt es zwei Elemente mit derselben id, nimmt der Browser das erste und übergeht das zweite.

Ein Fall aus der Praxis: Das Newsletter-Formular steht einmal im Footer und einmal in einem Popup, beide mit id="email". Für sehende Besucher sieht alles gut aus. Ein Screenreader-Nutzer im Popup hört am Eingabefeld aber keine Beschriftung, weil das Label auf das Feld im Footer zeigt. Und ein Klick auf das Wort "E-Mail" setzt den Cursor ins falsche Formular.

In WCAG 2.1 stand das als eigenes Kriterium unter 4.1.1 (Parsing). In WCAG 2.2 wurde es gestrichen, weil Screenreader das HTML heute nicht mehr selbst auswerten und sich auf den Browser verlassen. Die europäische Norm EN 301 549 in der Fassung V3.2.1, auf die sich viele Prüfungen in der EU stützen, verweist allerdings noch auf WCAG 2.1. Und unabhängig davon gilt: Wo doppelte IDs Beschriftungen oder Beziehungen kaputt machen, verstößt die Seite gegen 1.3.1 Info und Beziehungen oder 4.1.2 Name, Rolle, Wert.

So prüfst du es selbst

Im kostenlosen Check von checkfrei suchen wir id-Attribute, die mehrfach vorkommen, und zeigen eine Warnung, wenn wir welche finden. Wir lesen dabei das HTML, das dein Server ausliefert. IDs, die erst später per JavaScript entstehen, sehen wir nicht. Für die Suche von Hand gibt es zwei Wege:

• ·In der Browser-Konsole: Seite öffnen, F12 drücken, in den Reiter "Konsole" wechseln, die Zeilen unten einfügen und Enter drücken. Du bekommst eine Liste aller IDs, die mehr als einmal vorkommen. Chrome verlangt beim ersten Einfügen eventuell eine Bestätigung.
• ·Mit dem W3C-Validator unter validator.w3.org/nu: Adresse eingeben, prüfen lassen. Jede doppelte id erscheint dort als "Duplicate ID" mit Zeilennummer.

const ids = [...document.querySelectorAll("[id]")].map((el) => el.id);
console.log([...new Set(ids.filter((id, i) => ids.indexOf(id) !== i))]);

Woher doppelte IDs meistens kommen

• ·Ein Bauteil steht zweimal auf der Seite: das Suchfeld in der Desktop- und in der Mobil-Navigation oder das Formular im Footer und im Popup.
• ·Im Page-Builder wurde ein Abschnitt kopiert, der eine eigene CSS-ID hatte. Die Kopie hat sie mitgenommen.
• ·Direkt ins HTML eingebettete SVG-Symbole. Grafikprogramme vergeben IDs wie a, b oder clip0 für Verläufe und Masken. Steht das Symbol fünfmal auf der Seite, gibt es jede dieser IDs fünfmal. Wird das erste Exemplar ausgeblendet, verschwinden bei den anderen manchmal sogar die Farbverläufe.
• ·Slider und Karussells, die Folien für die Endlosschleife klonen, samt aller IDs darin.

So behebst du es

Jede Kopie bekommt ihren eigenen Namen, und jede Verknüpfung zeigt auf den richtigen. Wo eine id gar nicht gebraucht wird, darf sie auch einfach weg.

<!-- vorher zweimal id="email", jetzt eindeutig -->
<label for="email-footer">E-Mail</label>
<input id="email-footer" type="email" name="email">

<label for="email-popup">E-Mail</label>
<input id="email-popup" type="email" name="email">

import { useId } from "react";

export function EmailFeld() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>E-Mail</label>
      <input id={id} type="email" name="email" />
    </>
  );
}