Praxisleitfaden ARIA-Rollen im Zusammenhang
Fehlende ARIA-Kindelemente ergänzen
Erkennen Sie fehlende Rollenbeziehungen und prüfen Sie die korrigierte Struktur.
aria-required-childrenWCAG 1.3.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-aria-required-children.html
Befund einordnen
Eine Auswahlliste ohne erkennbare Option
Im Kartenleser steht „Brief aus Iowa“ innerhalb einer Listbox. Der Text liegt jedoch in einem einfachen span. Die Rolle des Containers kündigt eine Auswahlliste an; ihr Eintrag ist für assistive Technik nicht als Option ausgezeichnet.
Warum das relevant ist
Menschen mit Screenreader können die sichtbare Karte dadurch nicht verlässlich als Eintrag dieser Auswahl erfassen. Die Beschriftung „Kartenstapel“ benennt nur den Container und ersetzt die fehlende Rollenbeziehung nicht.
Scanner-Signal
aria-required-children: Der Kartenstapel mit role="listbox" enthält keine zugehörige option.
- Regel
aria-required-children- Referenz
- WCAG 1.3.1
Kritisch fasst die Axe-Stufen critical und serious zusammen.
Struktur vor der Korrektur
[role="listbox"] → span „Brief aus Iowa“
Erforderliche Kindrolle option fehlt.
aria-required-children: Verstoß (Axe-Auswirkung: critical) · WCAG 1.3.1Listboxeinträge nach Änderungen erneut prüfen
Eine gemeinsame Vorlage erzeugt Einträge für mehrere Auswahllisten. Prüfen Sie Kindrollen auch nach Filtern und Nachladen.
- Kartenauswahl× Befund im Beispiel
- Archivauswahl× Befund im Beispiel
- Native Auswahl Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie erforderliche Kindrollen in allen betroffenen Auswahlzuständen; testen Sie die Bedienung zusätzlich.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Struktur braucht der Inhalt?
Prüfen Sie zuerst, ob die angekündigte Rolle zur tatsächlichen Aufgabe des Containers passt.
Die Lehrskizze zeigt die tatsächlich geprüfte Beziehung: Eine listbox benötigt zugehörige option-Elemente. Räumliche Nähe oder ein beschrifteter Container erzeugen diese Beziehung nicht.
- Brief aus Iowaspan · keine Optionsrolle
- Brief aus Iowarole="option" · aria-selected="false"
Passende Umsetzung auswählen
Fundstelle betrachten
Der vollständige Kartenleser im Beispiel
Der Ausschnitt enthält die Überschrift, die Erläuterung und beide sichtbaren Kartenzeilen. Markiert ist die Listbox mit „Brief aus Iowa“. Die darunter stehende „Zweite Karte“ liegt außerhalb dieses Containers.
Die räumliche Nähe der beiden Zeilen stellt keine technische Zugehörigkeit her. Im markierten Kartenstapel fehlt die Rolle seines eigenen Eintrags. Die separate Option darunter betrifft zusätzlich die Regel aria-required-parent.
Struktur korrigieren
Den vorhandenen Eintrag als Option auszeichnen
Für dieses Beispiel bleibt die angekündigte Listbox erhalten. Ihr vorhandener Eintrag bekommt role="option" und einen expliziten, nicht ausgewählten Zustand. Die Änderung betrifft die Semantik; Text und Darstellung bleiben gleich.
In der Komponente Ändern Sie das Template, das die Listbox-Einträge erzeugt. Der Code zeigt die strukturelle Reparatur; eine vollständige Listbox benötigt zusätzlich funktionierende Fokus- und Auswahllogik.
Vorher
<div role="listbox" aria-label="Kartenstapel">
<span>Brief aus Iowa</span>
</div>Nachher
<div role="listbox" aria-label="Kartenstapel">
<span role="option" aria-selected="false">
Brief aus Iowa
</span>
</div>Markierte Zeilen wurden geändert
Implementierung absichern
Die Beziehung muss beim Rendern erhalten bleiben
Kontrollieren Sie die fertige Oberfläche, einschließlich nachgeladener und gefilterter Einträge.
- 1
Prüfen Sie im Accessibility-Baum, dass „Brief aus Iowa“ als Option unter „Kartenstapel“ erscheint.
- 2
Lassen Sie die option-Rolle am tatsächlichen Eintrag entstehen, auch wenn Komponenten zusätzliche Wrapper erzeugen.
- 3
Halten Sie den Auswahlzustand mit der sichtbaren Auswahl synchron; aria-selected="false" ist hier der Ausgangszustand.
- 4
Testen Sie Fokus und Auswahl mit der Tastatur. Das Ergänzen einer Rolle erzeugt keine Ereignisbehandlung.
Fehlversuche vermeiden
Warum Beschriftung und Nähe nicht ausreichen
Nur ein aria-label hinzufügen
Der Kartenstapel hat bereits einen Namen. Ein zusätzlicher Name macht aus seinem span noch keine Option.
Die benachbarte Option mitzählen
„Zweite Karte“ steht außerhalb der Listbox. Ein nahe platzierter Eintrag wird dadurch nicht zu ihrem Kind.
ARIA als fertiges Widget behandeln
role="option" beschreibt die Bedeutung. Fokuswechsel, Auswahl und Rückmeldung müssen weiterhin implementiert und getestet werden.
Eine falsche Rolle weiter ausbauen
Wenn Karten nur gelesen werden, führt eine zusätzliche Optionsrolle in die falsche Richtung. Korrigieren Sie dann die Inhaltsstruktur entsprechend der tatsächlichen Funktion.
Die Kindrolle wird jetzt erkannt
Axe bestätigt nach der Änderung am selben Kartenstapel die erforderliche Kindrolle. Die geprüfte Listbox besteht aria-required-children; der sichtbare Ausschnitt ist pixelgleich.
So prüfen Sie die Korrektur nach
- Die veröffentlichte Listbox öffnen und die option-Rolle an „Brief aus Iowa“ kontrollieren.
- aria-required-children erneut ausführen und das Ergebnis genau diesem Container zuordnen.
- Mit Tastatur und Screenreader prüfen, ob Name, Eintrag, Fokus und Auswahlzustand verständlich zusammenwirken.
Der Pass gilt ausschließlich für die erforderlichen Kindelemente dieser Listbox. Weder ihr vollständiges Bedienverhalten noch die übrigen Befunde des Kartenlesers sind damit bestätigt.
Struktur nach der Korrektur
[role="listbox"] → [role="option"] „Brief aus Iowa“
aria-selected="false"
Axe: aria-required-children bestanden am selben Container.
Tastaturbedienung und Auswahl gesondert prüfen.Prüfumfang verstehen
Struktur automatisch prüfen, Bedienung praktisch testen
Die Regel kontrolliert erforderliche Kindrollen im gerenderten Zustand. Ob die Komponente ihre Aufgabe erfüllt, verlangt weitere Prüfung.
Automatisch prüfbar
- Fehlende erforderliche Kindrollen am untersuchten ARIA-Container erkennen.
- Den betroffenen Container mit Selektor und Seitenausschnitt zuordnen.
- Nach der Strukturänderung dieselbe Regel an derselben Fundstelle wiederholen.
Im Kontext zu entscheiden
- Entscheiden, ob eine Listbox die passende Funktion für den Kartenstapel ist.
- Fokusführung, Tastaturauswahl und verständliche Screenreader-Ausgabe prüfen.
- Lade-, Filter- und Leerzustände sowie weitere Komponenten untersuchen.