Barrierefreiheit

Interaktive Elemente ineinander verschachtelt

Üblicher Schweregrad: hoch · Aufwand: mittel

Woran du es erkennst

Ein Button oder Link liegt innerhalb eines anderen interaktiven Elements (axe-Regel nested-interactive) — typisch bei klickbaren Karten, die selbst noch Buttons enthalten.

Warum es zählt

Verschachtelte Controls verwirren Tastatur- und Screenreader-Nutzer: Der Fokus landet auf Elementen, die sich gegenseitig überlagern, ein Klick löst womöglich beide Aktionen aus, und Screenreader kündigen nur das äußere Element an — die inneren werden unsichtbar oder unerreichbar.

So behebst du es

  1. Löse die Verschachtelung auf: Baue klickbare Karten so, dass ein einzelner gestreckter Link (stretched-link) oder ein Button die Karte klickbar macht, statt <a> um <button> zu legen.
  2. Wenn die ganze Karte UND einzelne Aktionen darin klickbar sein sollen, nutze das Pattern „ein echter Link + separate Buttons daneben", nicht DOM-Verschachtelung.
  3. Prüfe nach dem Umbau mit der Tastatur, ob jedes Control einzeln fokussierbar ist und genau eine Aktion auslöst.

Zum Nachlesen