Accessible iframe
Drei Rahmen, drei Namen
Karte, Video, Formular: jeder eingebettete Rahmen braucht einen eigenen Titel.
Rahmen verstehen
Ein Dokument im Dokument
Der äußere Rahmen braucht einen Namen. Karte, Player oder Formular im Inneren bleiben eine eigene Website mit eigenen Pflichten.
- ADer Rahmenname ist das Türschild.Das
title-Attribut sagt, was hinter der Rahmengrenze liegt. - BDie eingebettete Seite bleibt ein Dokument.Sie braucht einen eigenen Dokumenttitel, Sprache und sinnvolle Struktur.
- CDer Ersatzweg liegt im äußeren Dokument.Adresse und Direktlink helfen auch, wenn die Karte nicht nutzbar ist.
<iframe title="Anfahrtskarte zum Museum">Drei Einbettungen, drei Prüfbereiche
Anfahrtskarte
- Rahmenname
- Anfahrtskarte zum Museum
- Im Embed
- Zoom, Verschieben und Orte per Tastatur.
- Daneben
- Adresse und erreichbarer Direktlink.
Videoplayer
- Rahmenname
- Video: Rundgang durch das Museum
- Im Embed
- Beschriftete Steuerung und Untertitel.
- Daneben
- Transkript oder gleichwertige Alternative.
Buchungsformular
- Rahmenname
- Tickets buchen
- Im Embed
- Labels, Fehlertexte und Fokusführung.
- Daneben
- Formular als eigene Seite öffnen.
title, Größe, Berechtigungen und ErsatzwegEin korrekter Rahmentitel repariert keine Barriere im eingebetteten Inhalt. Ist der fremde Dienst nicht bedienbar, brauchen Sie eine zugängliche Alternative oder einen anderen Anbieter.
So prüfen Sie es
- Lassen Sie sich die Liste der Rahmen vorlesen. Jeder Name muss kurz, beschreibend und auf dieser Seite unterscheidbar sein.
- Drücken Sie Tab und Umschalt + Tab. Bei einem interaktiven Embed muss der Fokus hinein- und wieder herausgelangen. Entfernen Sie dafür
tabindex="-1"amiframe. - Prüfen Sie das innere Dokument separat. Der Titel des Rahmens sagt nichts über Labels, Fokusreihenfolge oder Untertitel darin aus.
Aus dem Prüfbericht
Drei Rahmen, drei Befunde
Kritisch Der Rahmen hat keinen Titel Regel frame-title
Ohne title sagt ein Vorleseprogramm nur „Rahmen“. Der Titel nennt den Inhalt: „Anfahrtskarte“.
Prüfen Zwei Rahmen heißen gleich Regel frame-title-unique
„Eingebetteter Inhalt“ zweimal unterscheidet nichts. Jeder Rahmen bekommt einen eigenen Titel.
Kritisch Der Rahmen ist aus der Tab-Reihenfolge Regel frame-focusable-content
tabindex="-1" am iframe nimmt das Formular darin für Tastaturen weg. Das Attribut entfernen.
Zum Mitnehmen
Die Einbettungen, korrigiert
Ein title pro Rahmen, kein tabindex am iframe.
Korrektur in 2 Schritten ansehen
Jedem Rahmen einen eigenen Titel geben
Der title wird als Name des Rahmens vorgelesen. Er nennt den Inhalt, nicht die Technik.
KorrekturvergleichSchritt 1 · HTML Vorher
<iframe src="https://karten.example/museum"></iframe> <iframe src="https://video.example/rundgang" title="Eingebetteter Inhalt"></iframe> <iframe src="/buchen" title="Eingebetteter Inhalt"></iframe>Nachher
<iframe src="https://karten.example/museum" title="Anfahrtskarte"></iframe> <iframe src="https://video.example/rundgang" title="Video: Rundgang"></iframe> <iframe src="/buchen" title="Tickets buchen"></iframe>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm listet drei Rahmen mit drei verschiedenen Namen.
Den Rahmen in der Tab-Reihenfolge lassen
tabindex="-1" am iframe sperrt alles darin für die Tastatur. Der Rahmen braucht kein tabindex.
KorrekturvergleichSchritt 2 · HTML Vorher
<iframe src="/buchen" title="Tickets buchen" tabindex="-1"></iframe>Nachher
<iframe src="/buchen" title="Tickets buchen"></iframe>Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab bis zum Buchungsformular. Der Fokus erreicht die Felder im Rahmen.