Praxisleitfaden Doppelte IDs in ARIA
Doppelte ARIA-IDs eindeutig zuordnen
Prüfen Sie, welcher Text hinter einem mehrdeutigen ARIA-Verweis steht.
duplicate-id-ariaWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-duplicate-id-aria.html
Befund einordnen
Ein Verweis trifft auf zwei gleich benannte Ziele
Der erste Absatz nennt die Werkstattregel zur erfundenen Karte. Der zweite erklärt die Scanner-Kalibrierung. Beide besitzen id="fiction-source". Axe meldet diese Kollision als Prüfkandidaten; daraus folgt noch nicht, welcher Text in jeder Nutzungssituation ausgegeben wird.
Warum das relevant ist
Eine mehrdeutige ID gefährdet die Zuordnung zwischen Inhalt und Beschreibung. Wer sich die Karte vorlesen lässt, benötigt den vorgesehenen Hinweis zur Fiktion und keine zufällig ausgewählte Zusatzinformation.
Scanner-Signal
Die Fiktionskarte verweist mit aria-describedby="fiction-source" auf eine ID, die an zwei Absätzen vorkommt.
- Regel
duplicate-id-aria- Referenz
- WCAG 4.1.2
Kritisch fasst die Axe-Stufen critical und serious zusammen.
Diagnose vor der Korrektur
ID fiction-source: 2 Vorkommen
Verweis: .profile-card[aria-describedby="fiction-source"]
Ziele: Werkstattregel und Kalibrierhinweis
duplicate-id-aria: incomplete (Axe-Auswirkung: critical)Mehrere Komponenteninstanzen zusammen prüfen
Wiederholte Karten können ID-Kollisionen erst gemeinsam erzeugen. Prüfen Sie jede betroffene Seite mit ihren tatsächlich gerenderten Instanzen.
- Sammlung mit mehreren Karten× Befund im Beispiel
- Vergleich mit mehreren Karten× Befund im Beispiel
- Einzelkarte mit eindeutigen IDs Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie nach Neuerzeugung der Karten eindeutige IDs und die jeweils beabsichtigte Beschreibung; die manuelle Prüfung bleibt erforderlich.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Absatz soll die Karte beschreiben?
Ordnen Sie jeden Verweis seinem fachlich vorgesehenen Ziel zu, bevor Sie IDs ändern.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Ein bestimmter Text ist die Beschreibung | Hier erklärt die Werkstattregel, dass die erzeugte Karte keine biografische Quelle ist. | Geben Sie diesem Absatz eine eindeutige ID und setzen Sie aria-describedby der Karte auf genau diese ID. |
| Mehrere Texte gehören zur Beschreibung | Eine Komponente braucht tatsächlich mehrere getrennte Zusatzinformationen. | Vergeben Sie für jeden Text eine eigene ID. Tragen Sie die benötigten IDs mit Leerzeichen getrennt in der vorgesehenen Lesereihenfolge ein. |
| Ein Text hat eine andere Aufgabe | Der zweite Absatz dokumentiert hier ausschließlich den eingebauten Kalibrierbefund. | Geben Sie ihm einen eigenen Bezeichner. Nehmen Sie ihn nicht allein wegen der bisherigen ID in die Kartenbeschreibung auf. |
Fundstelle ansehen
Die vollständige Werkbank zeigt den Zusammenhang
Links stehen die Eingaben zur Erzeugung einer fiktiven Karte, rechts das Ergebnis samt Werkstattregel und Kalibrierhinweis. Beide Absätze bleiben im Vergleich sichtbar.
Markiert ist die Werkstattregel unter dem Kartentext. Ihr Bezeichner wird auch am unmittelbar folgenden Kalibrierhinweis verwendet. Das Problem liegt in dieser unsichtbaren Zuordnung und lässt sich am Schriftbild allein nicht erkennen.
Verweise korrigieren
IDs und ARIA-Bezug gemeinsam ändern
Die Werkstattregel erhält fiction-source-text, der Kalibrierhinweis fiction-calibration-note. Der einzige Verweis auf die alte ID wird auf die Werkstattregel umgestellt. Inhalte, Kartengenerator und Darstellung bleiben erhalten.
Fundstelle zuordnen
Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.
Änderung umsetzen
In Komponenten und CMS Korrigieren Sie die ID-Vergabe im erzeugenden Template. Prüfen Sie alle Instanzen auf derselben Seite und führen Sie die zugehörigen ARIA- und Label-Verweise gemeinsam nach.
KorrekturvergleichHTML · relevante Ausschnitte Vorher
<article class="profile-card" aria-describedby="fiction-source"> <!-- Karteninhalt --> <p id="fiction-source">Werkstattregel: Diese Karte ist neu erzeugte Fiktion und keine biografische Quelle.</p> <p id="fiction-source">Doppelter Bezeichner absichtlich für die Scanner-Kalibrierung.</p> </article>Nachher
<article class="profile-card" aria-describedby="fiction-source-text"> <!-- Karteninhalt --> <p id="fiction-source-text">Werkstattregel: Diese Karte ist neu erzeugte Fiktion und keine biografische Quelle.</p> <p id="fiction-calibration-note">Doppelter Bezeichner absichtlich für die Scanner-Kalibrierung.</p> </article>Markierte Zeilen wurden geändert
Änderung nachprüfen
Prüfen Sie das geänderte Element im Nutzungskontext manuell. Der Code allein bestätigt das Ergebnis nicht.
Im Projekt umsetzen
Alle Abhängigkeiten der alten ID erfassen
Eine Umbenennung ist erst vollständig, wenn alle beabsichtigten Beziehungen weiter funktionieren.
- 1
Suchen Sie im gerenderten Dokument nach jedem Vorkommen der betroffenen ID; hier sind es zwei Absätze.
- 2
Ermitteln Sie die Referenzen auf diese ID. In dieser Fundstelle verwendet nur aria-describedby der Karte den alten Wert.
- 3
Prüfen Sie im Projekt auch aria-labelledby, weitere ARIA-Verweise, label[for], headers, Sprunglinks sowie CSS- und JavaScript-Zugriffe auf die umbenannten IDs.
- 4
Vergeben Sie bei wiederholten Komponenten pro Instanz eindeutige, stabile IDs und erzeugen Sie die passenden Referenzen aus derselben Grundlage.
- 5
Prüfen Sie nach dynamischem Aktualisieren erneut, ob die IDs eindeutig bleiben und die Verweise weiterhin das richtige Element erreichen.
Fehlkorrekturen vermeiden
Eindeutig ist noch nicht inhaltlich richtig
Nur den Absatz umbenennen
Bleibt aria-describedby="fiction-source" stehen, zeigt die Karte nach einer Teilkorrektur womöglich nur noch auf den Kalibrierhinweis. Die Anzahl der IDs allein erkennt diese falsche Zuordnung nicht.
Den Verweis entfernen
Die Kollision wird damit nicht fachlich repariert: Der vorgesehene Zusammenhang mit der Werkstattregel geht verloren.
Beide Texte ungeprüft referenzieren
Eine Liste eindeutiger IDs kann technisch gültig sein und dennoch die falsche Beschreibung erzeugen. Entscheidend bleibt die Aufgabe der Texte.
Nur eine Komponenteninstanz prüfen
Beim Einfügen einer zweiten Karte kann eine fest eingetragene ID erneut kollidieren. Prüfen Sie die gemeinsam gerenderte Seite und relevante Zustände.
Eindeutige Beziehung belegt, manuelle Prüfung bleibt
Die erneute Prüfung findet am ausgewählten Absatz keine ID-Kollision. Beide neuen IDs kommen genau einmal vor; der Accessibility-Baum der Karte enthält die vorgesehene Werkstattregel als Beschreibung. Dies bleibt ein Korrekturbeispiel mit manueller Nachprüfung.
Im Beispiel dokumentiert
Korrekturbeispiel · Manuell nachprüfen
Die beiden Absätze besitzen eigene IDs. aria-describedby der Karte verweist eindeutig auf die Werkstattregel; die sichtbaren Inhalte bleiben identisch.
Was Sie zusätzlich beurteilen müssen
Der belegte DOM- und Accessibility-Baum-Zustand ersetzt keinen Screenreader-Test. Andere Fundstellen und die vollständige Erfüllung von WCAG 4.1.2 sind damit nicht nachgewiesen.
Die Kollision erkennen und ihre Wirkung beurteilenPrüfauftrag für Ihre Umsetzung
- Prüfen Sie im veröffentlichten DOM, dass die alte ID und ihre betroffenen Referenzen verschwunden sind und die neuen IDs jeweils eindeutig vorkommen.
- Vergleichen Sie die Beschreibung der Karte im Accessibility-Baum mit dem sichtbaren Werkstattregel-Absatz.
- Lesen Sie die Karte manuell mit einem Screenreader im Kontext. Beurteilen Sie, ob der Fiktionshinweis verständlich zugeordnet ist und der Kalibrierhinweis nicht als Kartenbeschreibung erscheint.
- Erzeugen Sie über das Formular eine neue Karte und wiederholen Sie die Prüfung der Zuordnung.
Diagnose nach der Korrektur
ID fiction-source: 0 Vorkommen
ID fiction-source-text: 1 Vorkommen
ID fiction-calibration-note: 1 Vorkommen
Kartenverweis: fiction-source-text
Accessibility-Baum, Beschreibung: Werkstattregel: Diese Karte ist neu erzeugte Fiktion und keine biografische Quelle.
Axe am Absatz: pass; redaktioneller Status: Korrekturbeispiel, manuelle Prüfung offen.Prüfgrenze verstehen
Die Kollision erkennen und ihre Wirkung beurteilen
Die Regel liefert einen konkreten Ansatzpunkt. Ob der Bezug seinen Zweck erfüllt, braucht Kontext.
Automatisch prüfbar
- Doppelte IDs erkennen, die in ARIA- oder Label-Bezügen verwendet werden.
- Die betroffenen Elemente im gerenderten Dokument zuordnen und nach einer Änderung erneut prüfen.
- Mit gezielten Zusatzprüfungen die eindeutige Referenz und den ausgegebenen Beschreibungstext kontrollieren.
Im Kontext zu entscheiden
- Entscheiden, welcher Text eine Komponente benennen oder beschreiben soll.
- Die Ausgabe und Verständlichkeit im Screenreader im vollständigen Nutzerweg beurteilen.
- Dynamische Zustände und wiederholte Komponenten prüfen, die der einzelne Scan nicht durchläuft.