Praxisleitfaden Tastaturzugang zu Einbettungen
Inhalte im iframe per Tastatur erreichen
Erkennen Sie übersprungene Einbettungen und öffnen Sie ihren regulären Fokusweg.
frame-focusable-contentWCAG 2.1.1
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-frame-focusable-content.html
Befund einordnen
Sichtbar, aber mit Tab nicht erreichbar
Die Lesesaalansicht zeigt mehrere Dokumentfenster. Im ersten liegt die Schaltfläche „Seite umblättern“. Ihr natives button-Element ist fokussierbar; das negative tabindex des umgebenden iframe verhindert jedoch den Eintritt über die Tab-Reihenfolge.
Warum das relevant ist
Menschen, die ausschließlich mit der Tastatur navigieren, überspringen dadurch das Bedienelement. Eine sichtbare Schaltfläche und ein vorhandener Rahmentitel lösen diesen Zugangsfehler nicht.
Scanner-Signal
Der erste iframe in .kerber-rahmen hat tabindex="-1" und enthält einen fokussierbaren Button.
- Regel
frame-focusable-content- Referenz
- WCAG 2.1.1
Kritisch fasst die Axe-Stufen critical und serious zusammen.
Diagnose am Original
iframe: tabindex="-1"
srcdoc: <button>Seite umblättern</button>
Tab ab „Vermerk hinzufügen“: innerer Button wird übersprungen
frame-focusable-content: Verstoß (Axe-Auswirkung: serious)Einbettungen aus derselben Vorlage nachprüfen
Ein Embed-Baustein kann denselben Fokusfehler weitergeben. Prüfen Sie jede verwendete Einbettung mit ihrem tatsächlich geladenen Inhalt.
- Abschrift× Befund im Beispiel
- Register× Befund im Beispiel
- Lesesaalübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenTesten Sie Eintritt, Austritt und Bedienung der jeweiligen Rahmeninhalte.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welche Aufgabe hat das Dokumentfenster?
Prüfen Sie den geladenen Rahmeninhalt einschließlich seiner Interaktionszustände, bevor Sie die Fokussteuerung ändern.
Die Lehrskizze fasst den geprüften Chromium-Fokusweg zusammen. Sie beschreibt Erreichbarkeit; die Umblätterfunktion ist im Beispiel nicht implementiert.
Ausgangsbeispiel
- Vermerk hinzufügenMit Tastatur erreichbar
- Seite umblättern im iframeMit Tastatur nicht erreichbar
Korrekturbeispiel
- Vermerk hinzufügenMit Tastatur erreichbar
- Seite umblättern im iframeMit Tastatur erreichbar
Schematische Fokusfolge · kein Tastaturtest dieser Website.
Passende Umsetzung auswählen
Fundstelle ansehen
Die Abschrift im vollständigen Lesesaal-Ausschnitt
Der Beleg zeigt Überschrift, Erläuterung, alle vier Dokumentfenster und die anschließenden Registerverweise. Markiert ist ausschließlich das erste Fenster mit „Seite umblättern“.
Die Schaltfläche ist klar sichtbar. Dass die Tab-Reihenfolge sie überspringt, lässt sich aus einem Screenshot allein nicht ablesen: Der Diagnoseblock beschreibt deshalb den zusätzlich geprüften Fokusweg.
Einbettung korrigieren
Das negative tabindex am iframe entfernen
Die Korrektur entfernt nur tabindex="-1" am vorhandenen Rahmen. Der eingebettete Button und sein srcdoc-Inhalt bleiben erhalten. Der Browser kann den Fokus wieder regulär in das Dokument weitergeben.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Entfällt
tabindex="-1"
In Ihrer Vorlage Prüfen Sie den iframe-Code im CMS, Embed-Block oder in der Komponente. Entfernen Sie dort den negativen tabindex-Wert und kontrollieren Sie nach Veröffentlichung das tatsächlich gerenderte Element.
Vollständigen Code vergleichen
Vorher
<iframe title="Nicht erreichbare Abschrift"
tabindex="-1"
srcdoc="<button>Seite umblättern</button>">
</iframe>Nachher
<iframe title="Nicht erreichbare Abschrift"
srcdoc="<button>Seite umblättern</button>">
</iframe>Markierte Zeilen wurden geändert
Fokusweg umsetzen
Außenrahmen und Innenleben zusammen prüfen
Ein korrekt eingebetteter Rahmen ist die Voraussetzung für den Einstieg. Die Bedienung seiner Inhalte bleibt eine eigene Aufgabe.
- 1
Suchen Sie die Stelle, die den iframe erzeugt. Ein späteres Skript darf das entfernte tabindex nicht erneut setzen.
- 2
Behalten Sie native Buttons, Links und Formularfelder im Rahmen bei. Ein tabindex am äußeren Rahmen ersetzt deren Bedienbarkeit nicht.
- 3
Prüfen Sie den Weg von einem vorherigen Bedienelement in den iframe und anschließend wieder aus ihm heraus.
- 4
Testen Sie nachgeladene Ansichten, Dialoge und Formulare der Einbettung: Der erste sichtbare Zustand deckt sie nicht ab.
Fehlkorrekturen vermeiden
Was den Tastaturzugang weiterhin blockiert
Nur den inneren Button fokussierbar machen
Der Button im Beispiel ist bereits nativ fokussierbar. Ein weiteres tabindex an ihm behebt die Sperre des äußeren Rahmens nicht.
Nur einen title ergänzen
Der Rahmen hat bereits einen Titel. Ein zugänglicher Name beschreibt die Einbettung, verändert aber nicht ihre Tab-Reihenfolge.
Den Button entfernen oder deaktivieren
Dadurch könnte der Regelbefund verschwinden, die angebotene Handlung wäre aber verloren. Die Korrektur muss den Zugang zur benötigten Funktion erhalten.
Programmgesteuerten Fokus als Nachweis verwenden
Ein erfolgreicher focus()-Aufruf beweist nicht, dass Nutzer mit Tab eintreten können. Beginnen Sie den Test außerhalb des Rahmens und navigieren Sie mit den Tasten.
Der Fokus erreicht jetzt den inneren Button
Im Chromium-Test gelangt Tab von „Vermerk hinzufügen“ zum Button „Seite umblättern“. Umschalt+Tab führt zurück; erneutes Tab führt hinein und das folgende Tab wieder hinaus. Der Rahmeninhalt bleibt erhalten.
Axe meldet die Regel nach der Korrektur als nicht anwendbar, weil kein Rahmen mit negativem tabindex mehr vorliegt. Das ist kein Axe-Pass am Button. Das Beispiel prüft dessen Erreichbarkeit; sein srcdoc enthält keine implementierte Umblätterfunktion.
Beobachtetes Ergebnis
iframe: tabindex entfernt; srcdoc unverändert
Tab: „Seite umblättern“ erhält Fokus
Umschalt+Tab: zurück zu „Vermerk hinzufügen“
Weiteres Tab: Einbettung lässt sich verlassen
Axe: keine Verletzung, Regel nicht anwendbarPrüfumfang verstehen
Regelbefund und vollständige Bedienung unterscheiden
Der Scan identifiziert die technische Sperre. Für einen nutzbaren eingebetteten Dienst müssen Sie auch seine tatsächlichen Abläufe prüfen.
Automatisch prüfbar
- Negative tabindex-Werte an Rahmen mit fokussierbarem Inhalt erkennen.
- Die betroffene Einbettung im Seitenkontext zuordnen und nach der Änderung erneut untersuchen.
- In einem gezielten Browsertest den tatsächlichen Fokuswechsel zu einem bekannten inneren Element beobachten.
Im Kontext zu entscheiden
- Die Funktionen innerhalb der Einbettung per Tastatur ausführen und ihre Ergebnisse prüfen.
- Sichtbaren Fokus, sinnvolle Reihenfolge und Rückkehr in allen relevanten Zuständen beurteilen.
- Externe oder beim Scan nicht geladene Inhalte gesondert untersuchen; fehlende Befunde belegen dort keine Zugänglichkeit.