Doppelte IDs

Was wir prüfen

Wir sammeln alle id-Attribute auf der Startseite und zählen, wie viele Werte mehr als einmal vorkommen.

• Ein oder zwei doppelte IDs: Hinweis.
• Drei oder mehr: Warnung.

Im Bericht siehst Du bis zu zehn der betroffenen IDs.

Warum das wichtig ist

Eine ID ist die eindeutige Kennung eines Elements auf der Seite. Verschiedene Funktionen verlassen sich darauf, dass es sie nur einmal gibt:

• Sprunglinks: Ein Link auf #kontakt springt zum Element mit id="kontakt". Gibt es zwei, landet man beim ersten, vielleicht im versteckten Smartphone-Menü statt beim Kontaktformular.
• Formulare: Eine Feldbeschriftung ist über die ID mit ihrem Feld verbunden. Bei doppelten IDs aktiviert ein Klick auf «E-Mail» das falsche Feld, und Vorlesesoftware liest die falsche Beschriftung vor.
• Skripte: Akkordeons, Tabs, Slider und Pop-ups suchen ihre Elemente oft per ID. Bei Doppelungen reagiert das falsche Element oder gar keines.
• Barrierefreiheit: Viele ARIA-Verknüpfungen, etwa «dieses Feld wird durch jenen Text beschrieben», beruhen auf IDs.

Typische Ursachen sind Elemente, die für Desktop und Smartphone doppelt vorhanden sind (zwei Menüs, zwei Logos, zwei Suchfelder), mehrfach eingebundene Widgets und Page-Builder, die beim Duplizieren eines Abschnitts die ID mitkopieren.

So behebst Du es

IDs eindeutig machen

Jede ID darf pro Seite nur einmal vorkommen. Bei Elementen, die für Desktop und Smartphone doppelt vorhanden sind:

<!-- statt zweimal id="suche" -->
<form id="suche-desktop">…</form>
<form id="suche-mobil">…</form>

Klassen statt IDs für Gestaltung

Wird eine ID nur zum Gestalten verwendet, ersetze sie durch eine Klasse. Klassen dürfen beliebig oft vorkommen.

Page-Builder

In Elementor, Divi und ähnlichen Buildern kannst Du Abschnitten und Widgets eine «CSS-ID» geben. Prüfe nach dem Duplizieren eines Abschnitts, ob die ID mitkopiert wurde, und vergib eine neue.

Plugins und Widgets

Wird dasselbe Widget, etwa ein Newsletter-Formular, zweimal auf der Seite eingebunden, erzeugt es oft zweimal dieselben IDs. Manche Plugins haben eine Einstellung dafür, sonst hilft nur, das Widget einmal zu verwenden.

So prüfst Du es selbst

Öffne die Entwicklertools (F12), wechsle zur Konsole und gib ein:

Object.entries([...document.querySelectorAll('[id]')].reduce((a, e) => (a[e.id] = (a[e.id] || 0) + 1, a), {})).filter(([, n]) => n > 1)

Die Liste zeigt jede doppelte ID mit ihrer Anzahl.

Häufige Fragen

Merkt man doppelte IDs auf der Seite?

Meist nicht direkt. Sie fallen erst auf, wenn ein Sprunglink an die falsche Stelle führt, ein Klick auf eine Feldbeschriftung das falsche Feld aktiviert oder ein Akkordeon das falsche Element öffnet.

Was ist der Unterschied zwischen ID und Klasse?

Eine ID ist wie eine Hausnummer: Sie darf pro Seite nur einmal vorkommen. Eine Klasse ist wie eine Strassenbezeichnung: Sie darf beliebig oft vorkommen und dient zum Gestalten mehrerer gleichartiger Elemente.