Praxisleitfaden ARIA & Semantik
ARIA-Elemente richtig einordnen
Ordnen Sie verwaiste Optionen ihrer Liste zu und prüfen Sie die Beziehung.
aria-required-parentWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-required-parent.html
Befund verstehen
Die Option steht außerhalb ihrer Auswahl
Scanner-Signal
aria-required-parent meldet [role="option"] im Rasterklang-Register: Der erforderliche ARIA-Kontext fehlt.
Technische Einordnung
- Regel
aria-required-parent- Referenz
- WCAG 1.3.1
Im Rohimport heißt eine Zeile „Luftklang ohne Auswahlliste“ und trägt role="option". Die Listbox „Instrumentengruppe“ steht als eigene Zeile direkt darüber und endet vor der Option. Sichtbare Nähe stellt die im Code fehlende Zugehörigkeit nicht her.
Bedeutung im Nutzungskontext
Assistive Technik erhält damit eine Auswahloption ohne den zugehörigen Auswahlkontext. Die Beziehung zwischen Luftklang und Instrumentengruppe ist nicht zuverlässig aus der Rollenstruktur erkennbar.
Struktur vor der Korrektur
Instrumentengruppe: listbox mit dem Text „Nur eine lose Gruppenbezeichnung“
Luftklang: option neben der listbox
Axe: Required ARIA parents role not present: group, listboxWelche Beziehung soll das Element haben?
Prüfen Sie zuerst, ob die Rolle zur tatsächlichen Aufgabe passt.
Fundstelle ansehen
Gleiche Zeilen, unterschiedliche Zuordnung
Der Ausschnitt zeigt den vollständigen Rohimport mit Überschrift, allen Importzeilen und dem Zielabsatz. Die Markierung lokalisiert „Luftklang ohne Auswahlliste“; die fehlende Verschachtelung selbst ist im Bild nicht sichtbar.
Die Zeile darüber ist bereits die Listbox „Instrumentengruppe“. „Luftklang“ folgt als Geschwisterelement außerhalb dieser Listbox. Der Screenshot zeigt die betroffene Zeile, die Diagnose erklärt die unsichtbare Grenze.
Zuordnung korrigieren
Die Option in die Listbox verschieben
Die Korrektur verschiebt das vorhandene div mit role="option" in die vorhandene Listbox. Text, Rolle und sichtbare Position bleiben erhalten. Das Beispiel korrigiert gezielt die Elternbeziehung.
In der Komponente Ändern Sie die Verschachtelung im Template, das die Instrumentengruppe ausgibt. Die Struktur muss auch nach dynamischem Nachladen und erneutem Rendern bestehen bleiben. Auswahlzustand und Tastaturbedienung benötigen eine eigene Prüfung.
Vorher
<div role="listbox" aria-label="Instrumentengruppe">
Nur eine lose Gruppenbezeichnung
</div>
<div role="option" aria-label="Luftklang">Luftklang ohne Auswahlliste</div>Nachher
<div role="listbox" aria-label="Instrumentengruppe">
Nur eine lose Gruppenbezeichnung
<div role="option" aria-label="Luftklang">Luftklang ohne Auswahlliste</div>
</div>Markierte Zeilen wurden geändert
Umsetzung absichern
Die Beziehung im gerenderten DOM prüfen
Entscheidend ist die ausgegebene Struktur, nicht die optische Gruppierung im Entwurf.
- 1
Suchen Sie die gemeldete Option im Browser und prüfen Sie ihre übergeordneten Elemente.
- 2
Vergleichen Sie deren Rollen mit dem erforderlichen Kontext der konkreten ARIA-Rolle.
- 3
Prüfen Sie bei Portalen oder ausgelagerten Popups, ob die Ausgabe die beabsichtigte Zuordnung auflöst.
- 4
Wenn die Instrumentengruppe weitere Einträge führen soll, benötigt jeder davon ebenfalls die passende Semantik und Bedienung; das ist nicht Teil der gezeigten Einzelkorrektur.
Fehlversuche vermeiden
Was die fehlende Beziehung nicht ersetzt
Nur optisch einrücken
Abstände, Rahmen und gemeinsame Hintergrundfarben verändern die Rollenstruktur nicht. Im Beispiel liegen beide Zeilen schon vor der Reparatur direkt untereinander.
Nur einen Namen ergänzen
Die Option trägt bereits aria-label="Luftklang". Ein weiterer Name ordnet sie keiner Listbox zu.
Den ganzen Abschnitt zur Listbox erklären
Überschrift und Importzeilen sind keine Auswahloptionen. Korrigieren Sie die tatsächliche Instrumentengruppe, statt dem kompletten Registerblock eine falsche Rolle zu geben.
Den Strukturtest mit Bedienbarkeit gleichsetzen
Eine bestandene Elternprüfung ergänzt weder Tastatursteuerung noch Auswahlzustände. Der unvollständige Importblock bleibt außerhalb dieses Befunds ungeprüft.
Die Elternbeziehung besteht den Re-Test
Axe meldet am selben option-Element nach dem Verschieben einen Pass für aria-required-parent. Die positive Zusatzprüfung bestätigt die direkte Elternrolle listbox, deren Namen „Instrumentengruppe“ und den erhaltenen Zeilentext.
Der Nachweis gilt nur für diese Elternbeziehung. Er bestätigt weder eine vollständig bedienbare Listbox noch die Barrierefreiheit der gesamten Seite.
Struktur nach der Korrektur
Instrumentengruppe: listbox
Nur eine lose Gruppenbezeichnung
Luftklang: option innerhalb der listbox
Axe: Required ARIA parent role present
Bildinhalt vor/nach der Änderung: identischPrüfumfang kennen
Rollenstruktur automatisch, Auswahlverhalten ergänzend prüfen
Der automatische Befund grenzt eine fehlende strukturelle Beziehung ein.
Automatisch prüfbar
- Erkennen, dass der untersuchten option der erforderliche Rollen-Kontext fehlt.
- Die betroffene Zeile mit Selektor und Seitenkontext zuordnen.
- Nach der Änderung dieselbe Elternbeziehung erneut bewerten.
Im Kontext zu entscheiden
- Beurteilen, ob die Zeile tatsächlich eine auswählbare Option sein soll.
- Fokusführung, Tastatursteuerung und die Ausgabe von Auswahlzuständen testen.
- Dynamische Zustände und weitere Befunde der Komponente prüfen.