Die Regel aria-required-parent meldet ein Element, dessen ARIA-Rolle nur in einem bestimmten Container existiert – ein tab, eine option, ein menuitem, ein listitem –, das aber nicht darin steht. Hilfstechnik sagt dann einen Eintrag von nichts an: keine Anzahl, keine Position, kein Weg zu den Geschwistern. Die Lösung: die Einträge in die Container-Rolle packen, zu der sie gehören, oder ihre Rollen weglassen.
Was die Regel bedeutet
WAI-ARIA legt für manche Rollen einen „required context role“ fest: den Container, in dem sie stehen müssen. Häufige Paare:
tab→ in einertablistoption→ in einerlistbox(oder einergroupdarin)menuitem,menuitemcheckbox,menuitemradio→ inmenu,menubaroder einergroupdarinlistitem→ in einerlist(oder einem nativen<ul>/<ol>)row→ intable,grid,treegridoder einerrowgroup
Die Regel schlägt an, wenn der nächste Vorfahr mit einer Rolle keiner der erlaubten Container ist. Elemente ohne Rolle dazwischen – einfache <div>s – werden übersprungen. Der Container kann den Eintrag auch über aria-owns an sich binden.
Wen es betrifft
Screenreader-Nutzende. Eine Option in einer listbox wird mit ihrer Position angesagt („2 von 5“) und ist mit den Pfeiltasten erreichbar; eine Option allein ist eine Option von nichts, und die Pfeiltasten-Navigation, die die Rolle verspricht, gibt es nicht. Das ganze Widget wirkt kaputt.
Warum die Prüfung anschlägt
- Rollen auf die Einträge kopiert, während der Container keine hat – ein
<ul>mitrole="menuitem"-Links, aber ohnerole="menu". - Eine Hülle mit eigener Rolle zwischen Container und Einträgen, etwa eine benannte
<section>oderrole="region". - Einträge in einem Portal – die Optionen eines Dropdowns werden ans Ende des
<body>gehängt, weit weg von ihrer listbox. - Vermischte Muster:
role="tab"für eine Gruppe von Buttons, die gar keine Tabs sind. - Vorlagen, in denen der Container bedingt ausgegeben wird, die Einträge aber immer.
So beheben Sie es
Setzen Sie die Einträge in die Container-Rolle, die sie brauchen.
<!-- Vorher: Optionen ohne listbox drumherum -->
<div class="dropdown">
<div role="option" aria-selected="true">Standardversand</div>
<div role="option" aria-selected="false">Expressversand</div>
</div><!-- Nachher: die listbox, die den Optionen ihre Bedeutung gibt -->
<div class="dropdown" role="listbox" aria-label="Versandart">
<div role="option" aria-selected="true">Standardversand</div>
<div role="option" aria-selected="false">Expressversand</div>
</div>Eine listbox braucht außerdem Tastaturbedienung: Fokus auf der listbox oder ihrer aktiven Option, Pfeiltasten zum Wechseln und ein aria-selected, das mitgeführt wird. Für eine einfache Auswahl liefern ein natives <select> oder Radiobuttons all das ohne ARIA.
So prüfen Sie es von Hand
- Wählen Sie in den Entwicklertools den Eintrag im Barrierefreiheitsbaum aus und prüfen Sie die Rolle seines Elternelements.
- Gehen Sie mit einem Screenreader auf einen Eintrag. Sagt er seine Position in der Gruppe an?
- Nutzen Sie die Pfeiltasten. Kommen Sie von Eintrag zu Eintrag, wie das Muster es verspricht?
- Öffnen Sie Dropdowns und Menüs, die ihre Einträge an anderer Stelle der Seite ausgeben, und prüfen Sie sie im geöffneten Zustand.
Zugehöriges WCAG-Kriterium
1.3.1 Info und Beziehungen, Stufe A. Verwandt: 4.1.2 Name, Rolle, Wert, weil eine Rolle, die an ihrer Stelle nicht funktionieren kann, Hilfstechnik etwas Falsches mitteilt.
So meldet Reviseberg diese Regel
Reviseberg führt aria-required-parent auf jeder gecrawlten Seite aus. In der Befundliste steht die Regel mit Schweregrad, WCAG 1.3.1, der Zahl der betroffenen Elemente und Seiten und den Punkten, die ein Fix zurückbringt; im Detail sehen Sie Selektor und HTML-Ausschnitt jedes Eintrags. Mehrere Einträge eines Widgets stammen meist aus einer Komponente – ein Fix dort behebt sie gemeinsam. Optionen, die erst beim Öffnen eines Dropdowns gerendert werden, stehen nicht auf der Seite, die axe prüft: Sie werden weder gefunden noch als bestanden gezählt. Öffnen Sie sie und prüfen Sie von Hand.