Praxisleitfaden Navigation & Bedienung
Link im Button? Trennen Sie die Aktionen.
Ein Link innerhalb einer Schaltfläche kann für Screenreader unklar bleiben. Sehen Sie, wie der Scanner die Verschachtelung erkennt und wie beide Bedienelemente eigenständig erhalten bleiben.
nested-interactiveWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-nested-interactive.html
Befund einordnen
Zwei Bedienelemente teilen sich einen Button
Scanner-Signal
nested-interactive: .notebook > button:nth-of-type(2) enthält einen fokussierbaren Link.
Technische Einordnung
- Regel
nested-interactive- Referenz
- WCAG 4.1.2
Im Bandenpult der Billard-Übungsseite steht „Bandenpunkt“ innerhalb des Buttons „Effet wählen“. Der Link hat ein eigenes Sprungziel. Axe meldet den umgebenden Button, weil dieser einen fokussierbaren Nachfahren enthält.
Bedeutung im Nutzungskontext
Mit der Tabulatortaste kann ein Ziel erreichbar sein, dessen Rolle oder Name im Screenreader nicht zuverlässig ausgegeben wird. Die optische Trennung durch blauen Linktext beseitigt die Verschachtelung nicht.
Diagnose vor der Korrektur
Button „Effet wählen Bandenpunkt“
└─ Link „Bandenpunkt“ → #bandenpult-title
Axe: no-focusable-content fehlgeschlagenDie gemeinsame Aktionskomponente korrigieren
Verschachtelte Aktionen können aus einem wiederverwendeten Baustein stammen. Prüfen Sie nach dem Umbau auch Varianten mit zusätzlichen Links.
- Bandenübung× Befund im Beispiel
- Stoßübung× Befund im Beispiel
- Übungsübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie das gerenderte HTML und führen Sie jede Aktion getrennt aus.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Funktion gehört zu welchem Element?
Klären Sie vor dem Umbau, ob die verschachtelten Inhalte zwei Aktionen oder nur eine Beschriftung darstellen.
Fundstelle ansehen
Der Link sitzt innerhalb der Schaltflächenkante
Der vollständige Abschnitt „Bandenpult aus dem Vereinsarchiv“ zeigt Überschrift, Einordnung und benachbarte Kontrollen. Die Markierung umfasst den betroffenen Button einschließlich des Links.
„Bandenpunkt“ ist vor der Korrektur Teil des Buttons. Im Nachher-Bild steht der Link rechts daneben. Die Diagnose benennt zusätzlich den entscheidenden Unterschied in der HTML-Struktur.
Struktur korrigieren
Den vorhandenen Link neben den Button verschieben
Der Button bleibt „Effet wählen“. Der Link „Bandenpunkt“ wird sein Geschwister und führt weiterhin zu #bandenpult-title. Die Korrektur verändert die Verschachtelung, nicht das Sprungziel.
In Komponenten und Baukästen Prüfen Sie das gerenderte HTML der äußeren Komponente. Eine Schaltflächen-Komponente darf keinen eigenen Link als Kind aufnehmen. Verwenden Sie einen neutralen Layout-Container für beide.
Vorher
<button>Effet wählen
<a href="#bandenpult-title">Bandenpunkt</a>
</button>Nachher
<button type="button">Effet wählen</button>
<a href="#bandenpult-title">Bandenpunkt</a>Markierte Zeilen wurden geändert
Umsetzung absichern
Die Trennung auch im Verhalten erhalten
Die Beispielkorrektur prüft das Markup. Übertragen Sie den Umbau auf die Ereignisbehandlung Ihrer tatsächlichen Komponente.
- 1
Verschieben Sie bestehende Links mit ihrem Ziel und ihrer Beschriftung; löschen Sie keine benötigte Funktion.
- 2
Binden Sie die Button-Aktion an den Button. Ein Klick auf den benachbarten Link darf sie nicht zusätzlich auslösen.
- 3
Prüfen Sie, ob übergeordnete Komponenten weiterhin eine interaktive Rolle oder eigene Klickbehandlung setzen.
- 4
Kontrollieren Sie Tastaturreihenfolge, sichtbaren Fokus und Abstand der beiden Ziele auch auf schmalen Ansichten.
Fehlkorrekturen vermeiden
Attribute ersetzen keine klare Struktur
Nur Ereignisse stoppen
stopPropagation() kann zusätzliche Klickreaktionen verhindern. Der Link bleibt dennoch im Button verschachtelt.
Den Link aus der Tab-Reihenfolge nehmen
tabindex="-1" trennt die Elemente nicht und erschwert den direkten Tastaturzugang zum Link.
Die innere Aktion verstecken
aria-hidden="true" an einem bedienbaren Link kann dessen Bedeutung für assistive Technik verbergen. Erhalten Sie stattdessen eine eigenständige zugängliche Aktion.
Nur optisch auseinanderziehen
CSS-Positionierung ändert die Eltern-Kind-Beziehung im DOM nicht. Entscheidend ist das gerenderte HTML.
Derselbe Button besteht die erneute Regelprüfung
Vorher meldet Axe einen Verstoß mit der Axe-Auswirkung serious. Nach dem Verschieben des Links besteht derselbe Button nested-interactive. Die zusätzliche Prüfung bestätigt den eigenständigen Link und sein unverändertes Ziel.
So prüfen Sie die Korrektur nach
- Im gerenderten DOM prüfen: Der Button enthält keinen Link mehr, beide haben dasselbe Elternelement.
- nested-interactive nach Veröffentlichung erneut ausführen und die konkrete Fundstelle vergleichen.
- Mit Tastatur und Screenreader beide Aktionen getrennt aufsuchen, benennen lassen und auslösen.
Bestätigt ist die strukturelle Reparatur dieser Fundstelle. Die Kalibrierseite enthält weitere beabsichtigte Fehler; ihre Bedienabläufe und vollständige WCAG-Konformität sind damit nicht nachgewiesen.
Diagnose nach der Korrektur
Button „Effet wählen“: keine fokussierbaren Nachfahren
Link „Bandenpunkt“: benachbart, Ziel #bandenpult-title erhalten
Axe: no-focusable-content bestandenPrüfumfang einordnen
Struktur automatisch prüfen, Bedienung praktisch testen
WCAG 4.1.2 betrifft die programmatisch bestimmbare Bedeutung von Bedienelementen. Diese Regel deckt einen konkreten Strukturfehler ab.
Automatisch prüfbar
- Fokussierbare Nachfahren in den von der Regel erfassten interaktiven Elementen erkennen.
- Den betroffenen äußeren Button im Seitenkontext zuordnen.
- Die Abwesenheit dieses Fehlers am reparierten Button erneut prüfen.
Im Kontext zu entscheiden
- Bewerten, ob beide Aktionen benötigt werden und passend benannt sind.
- Fokus, Screenreader-Ausgabe und tatsächlich ausgelöste Funktionen überprüfen.
- Dynamisch geöffnete Menüs und andere Zustände separat bedienen und prüfen.