← Alle Regeln

Tastatur

Bedienelemente nicht ineinander verschachteln

• Regel: nested-interactive
• Schweregrad: Schwerwiegend
• WCAG-Stufe A

Warum das wichtig ist

Ein Link in einer Schaltfläche oder eine Schaltfläche in einem Link ergibt zwei Ziele an einer Stelle. Screenreader sagen nur eines davon an, und welches, ist nicht vorhersehbar.

So beheben Sie es

1. Setzen Sie die Bedienelemente nebeneinander statt ineinander.
2. Soll eine ganze Karte klickbar sein, nehmen Sie einen Link und ziehen ihn per CSS über die Karte.
3. Prüfen Sie eigene Bedienelemente auf Nachfahren, die nativ noch fokussierbar sind.

Im Markup

<button>
  Details <a href="/terms">terms</a>
</button>

<button>Details</button>
<a href="/terms">terms</a>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

• 4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu nested-interactive (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.