Die Regel nested-interactive meldet ein Bedienelement, das ein weiteres fokussierbares Bedienelement enthält – einen Link in einem Button, einen Button in einem Element mit role="button". Hilfstechnik behandelt das äußere Element als eine Einheit und sieht nicht hinein, also wird das innere falsch oder gar nicht angesagt. Die Lösung: die Bedienelemente nebeneinander statt ineinander setzen.
Was die Regel bedeutet
Manche Rollen – button, link, checkbox, tab, menuitem, option und weitere – haben in WAI-ARIA „presentational children“: Alles darin wird zu ihrem Namen plattgedrückt. Ein Link in einem Button ist für einen Screenreader daher kein Link. Sein Text wird Teil des Button-Namens, und der Link selbst lässt sich beim Lesen weder erreichen noch auslösen. Tastatur-Nutzende landen per Tab vielleicht trotzdem darauf – und hören etwas, das keinen Sinn ergibt.
HTML sagt dasselbe von der anderen Seite: Ein <button> oder <a> darf keine interaktiven Inhalte enthalten. Browser reparieren solches Markup unterschiedlich, deshalb ist das Ergebnis unvorhersehbar.
Wen es betrifft
Screenreader-Nutzende, die ein Bedienelement hören, wo zwei sind, und das innere nicht erreichen. Menschen mit Sprachsteuerung, die den sichtbaren Linktext sagen und den Button drumherum auslösen. Tastatur-Nutzende, die auf zwei Tab-Halte treffen, die dasselbe tun – oder Verschiedenes, ohne dass man es unterscheiden kann.
Warum die Prüfung anschlägt
- Klickbare Karten als
<div role="button">oder<a>mit einem „Mehr“-Link oder „Merken“-Button darin. - Buttons mit Icon-Links, etwa ein „Herunterladen“-Button um ein
<a href>. - Akkordeon-Köpfe mit
role="button", die einen Hilfe-Link enthalten. - Tabellenzeilen oder Listeneinträge, die zu Bedienelementen gemacht wurden, obwohl sie Links enthalten.
- Komponentenbibliotheken, die in einen Button-Slot alles hineinlassen.
So beheben Sie es
Machen Sie ein Element zum Bedienelement und setzen Sie andere daneben, nicht hinein.
<!-- Vorher: ein Merken-Button in einer klickbaren Karte -->
<div class="produkt-karte" role="button" tabindex="0">
<h2>Schreibtischlampe</h2>
<p>49,00 €</p>
<button type="button" aria-label="Schreibtischlampe merken">♡</button>
</div><!-- Nachher: Der Titel ist der Link, der Merken-Button steht daneben -->
<div class="produkt-karte">
<h2><a href="/produkte/schreibtischlampe/">Schreibtischlampe</a></h2>
<p>49,00 €</p>
<button type="button" aria-label="Schreibtischlampe merken">♡</button>
</div>Soll die ganze Karte klickbar bleiben, ziehen Sie den Link mit einem positionierten ::after über die Karte und heben den Button mit position: relative; z-index: 1 darüber. Die Karte sieht gleich aus und klickt sich gleich – nur das Markup ist nicht mehr verschachtelt.
So prüfen Sie es von Hand
- Gehen Sie mit Tab durch die Komponente. Treffen Sie auf zwei Halte für ein sichtbares Element oder auf einen Halt innerhalb eines anderen?
- Lesen Sie die Komponente mit einem Screenreader und den Pfeiltasten. Lässt sich das innere Element allein erreichen und auslösen?
- Sehen Sie in den Barrierefreiheitsbaum: Enthält der Name des äußeren Elements den Text des inneren, ist das das typische Zeichen.
- Klicken Sie jeden Teil der Karte mit der Maus an und prüfen Sie, ob er tut, was er verspricht.
Zugehöriges WCAG-Kriterium
4.1.2 Name, Rolle, Wert, Stufe A. Verwandt: 2.1.1 Tastatur, weil das innere Element unerreichbar sein kann, und 2.5.3 Beschriftung im Namen für Sprachsteuerung.
So meldet Reviseberg diese Regel
Reviseberg führt nested-interactive auf jeder gecrawlten Seite aus. In der Befundliste steht die Regel mit Schweregrad, WCAG 4.1.2, der Zahl der betroffenen Elemente und Seiten und den Punkten, die ein Fix zurückbringt; im Detail sehen Sie Selektor und HTML-Ausschnitt des äußeren Elements. Karten und Teaser wiederholen sich auf Übersichtsseiten, daher ist die Zahl der Vorkommen oft hoch – und ein Fix an der Komponente behebt sie alle.