Zum Inhalt springen
Pandus
de Sprache ändern
Menü

WCAG-A/AA-Anforderung Priorität: Schwerwiegend

Tastaturnutzer erreichen eingebettete Inhalte nicht

Ein eingebetteter Rahmen (iframe) enthält Links, Schaltflächen oder Formularfelder, ist aber selbst auf tabindex="-1" gesetzt und damit aus der Tastaturreihenfolge entfernt.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Wer mit der Tab-Taste navigiert, überspringt den gesamten Rahmen. Enthält er ein Kartenzahlungsformular, eine Lieferkarte, einen Buchungskalender oder einen Chat, ist er für diese Menschen nicht nutzbar – und die Bestellung lässt sich womöglich nicht abschließen.

Wen es betrifft

  • Menschen, die nur mit der Tastatur navigieren
  • Menschen mit motorischen Einschränkungen
  • Screenreader-Nutzer

So beheben Sie es

Entfernen Sie tabindex="-1" von jedem <iframe> oder <frame> mit interaktivem Inhalt, damit der Tastaturfokus hineingelangen kann. Ist der Rahmen rein dekorativ oder doppelt vorhanden, verbergen Sie ihn korrekt (zum Beispiel mit aria-hidden und ohne fokussierbare Inhalte darin). Bei Einbettungen von Drittanbietern prüfen Sie den Einbettungscode oder fragen Sie den Anbieter.

Bei Shopify

Meist Einbettungscode oder eine App, die ihrem iframe tabindex="-1" gibt (Video, Bewertungen, Chat, Zahlung). Entfernen Sie es aus Ihrem eigenen Einbettungscode; iframes von Apps muss der App-Entwickler korrigieren.

Bei Shoptet (CZ)

Meist Einbettungscodes oder Widgets, die über eigenen Code eingefügt wurden. Entfernen Sie tabindex="-1" aus Ihrem Einbettungscode; Widget-Anbieter müssen ihre eigenen Rahmen ggf. selbst korrigieren.

Bei PrestaShop

Meist Module, die Videos, Karten oder Zahlungsformulare per iframe einbetten. Entfernen Sie tabindex="-1" in den .tpl-Templates des Moduls oder Themes; Module von Drittanbietern melden Sie deren Entwickler.

Bei WooCommerce

Meist Page-Builder, Slider oder Plugins (Video, Karten, Zahlung, Chat), die einem iframe tabindex="-1" geben. Prüfen Sie die Widget- oder Plugin-Einstellungen und melden Sie es dem Plugin-Entwickler.

Standards

Standards
StandardAbschnitt
WCAG 2.2 2.1.1 (A) Keyboard
WCAG 2.1 2.1.1 (A) Keyboard
WCAG 2.0 2.1.1 (A) Keyboard
EN 301 549 4.1.1 9.2.1.1
EN 301 549 3.2.1 9.2.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.2.1.1

Automatische Prüfung: axe-core-Regel frame-focusable-content. dequeuniversity.com, github.com, www.w3.org

Ähnliche Prüfungen

Alle Regeln, die wir prüfen