iframe title accessibility
Jeder Rahmen sagt, was in ihm steckt
Karte, Video, Formular: drei Einbettungen brauchen je einen eigenen Namen.
Hör-Test
So klingt der Wechsel in den Rahmen
Dieselbe Einbettung, zweimal angesagt.
Ohne title bleibt der Rahmen namenlos. Erst der Inhalt verrät ihn.
Ein title am iframe benennt den Inhalt vor dem Wechsel.
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Die eingebettete Karte hat keinen Namen Regel frame-title
Ohne title am iframe steht in der Frame-Liste nur „Frame“. Ein title benennt den Inhalt, bevor jemand hineinwechselt.
Prüfen Zwei Rahmen mit demselben Titel Regel frame-title-unique
Tragen zwei Einbettungen denselben title, hilft die Frame-Liste nicht weiter. Jeder Titel nennt seinen eigenen Inhalt.
Kritisch Ein Bedienelement im Rahmen bleibt unerreichbar Regel frame-focusable-content
Ein tabindex="-1" am iframe hält die Tastatur draußen, obwohl darin ein Button liegt. Ohne dieses Attribut geht der Fokus wieder hinein.
Zum Mitnehmen
Die Einbettungen, korrigiert
Ein eigener Titel je Rahmen, kein negativer tabindex.
Korrektur in 2 Schritten ansehen
Jedem Rahmen einen eigenen Titel geben
Der title benennt den Rahmen. Drei verschiedene Titel machen die Einbettungen in der Frame-Liste unterscheidbar.
KorrekturvergleichSchritt 1 · HTML Vorher
<iframe src="/karte-werkstatt"></iframe> <iframe src="/karte-lager" title="Karte"></iframe> <iframe src="/karte-abholung" title="Karte"></iframe>Nachher
<iframe src="/karte-werkstatt" title="Karte: Werkstatt Trave"></iframe> <iframe src="/karte-lager" title="Karte: Ersatzteillager"></iframe> <iframe src="/karte-abholung" title="Karte: Abholstation"></iframe>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Frame-Liste eines Vorleseprogramms. Jeder Eintrag nennt einen anderen Inhalt.
Den negativen tabindex entfernen
Ein tabindex="-1" am Rahmen hält die Tastatur draußen. Ohne dieses Attribut erreicht Tab die Bedienelemente im eingebetteten Formular.
KorrekturvergleichSchritt 2 · HTML Vorher
<iframe title="Terminformular" tabindex="-1" src="/termin"></iframe>Nachher
<iframe title="Terminformular" src="/termin"></iframe>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab durch die Seite. Der Fokus landet jetzt in den Feldern des Formulars.