Praxisleitfaden Titel für eingebettete Inhalte
Eingebettete Frames beschriften
Benennen Sie den Frame-Inhalt, damit Screenreader-Nutzer das passende Fenster erkennen.
frame-titleWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-frame-title.html
Befund einordnen
Dem Pegelfenster fehlt ein zugänglicher Name
Scanner-Signal
Am Element .frame-row iframe:first-child fehlt ein title-Attribut; auch eine ARIA-Beschriftung ist nicht vorhanden.
Technische Einordnung
- Regel
frame-title- Referenz
- WCAG 4.1.2
Das Flussarchiv zeigt drei eingebettete Fenster. Im ersten steht „Pegelansicht ohne Rahmentitel“. Dieser Absatz gehört zum inneren Dokument und benennt den äußeren iframe nicht.
Bedeutung im Nutzungskontext
Wer mit einem Screenreader zwischen Frames navigiert, kann die Pegelansicht ohne Namen nicht gezielt auswählen, bevor er ihren Inhalt erkundet.
Diagnose am ersten Pegelfenster
title: fehlt
aria-label: fehlt
aria-labelledby: fehlt
frame-title: Verstoß (Axe-Auswirkung: serious)Jede Verwendung des Bausteins benennen
Der Titel muss den jeweiligen eingebetteten Inhalt benennen. Ein gemeinsamer Baustein braucht passende Werte je Verwendung.
- Flussarchiv× Befund im Beispiel
- Stationsarchiv× Befund im Beispiel
- Kartenübersicht Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie den äußeren iframe-Titel und vergleichen Sie ihn mit dem geladenen Inhalt.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Welcher Titel beschreibt dieses Fenster?
Öffnen Sie den eingebetteten Inhalt und benennen Sie seine konkrete Aufgabe.
Fundstelle ansehen
Das vollständige Flussarchiv als Beleg
Der Ausschnitt enthält die Überschrift „Alte Pegelbilder und Eingabekarten“, alle drei Fenster und die zugehörigen Eingabefelder. Markiert ist allein die erste Pegelansicht.
Der lesbare Text innerhalb des linken Fensters vermittelt seinen Inhalt visuell. Für die Benennung des umgebenden Frames fehlt jedoch das Attribut. Diese unsichtbare Lücke belegt die HTML-Diagnose.
Titel ergänzen
Den äußeren iframe benennen
Ergänzen Sie title am vorhandenen iframe. Im Beispiel bleibt der eingebettete Absatz unverändert; die Korrektur betrifft den Namen des Fensters.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
title="Pegelansicht der Kinzig"
Im CMS oder Einbettungsbaustein Tragen Sie den Inhaltstitel im Feld für den iframe-Titel ein. Prüfen Sie nach dem Speichern im gerenderten HTML, ob der Baustein ihn tatsächlich als title am iframe ausgibt.
Vollständigen Code vergleichen
Vorher
<iframe
srcdoc="<p>Pegelansicht ohne Rahmentitel</p>">
</iframe>Nachher
<iframe
title="Pegelansicht der Kinzig"
srcdoc="<p>Pegelansicht ohne Rahmentitel</p>">
</iframe>Markierte Zeilen wurden geändert
Umsetzung absichern
Den Titel aus dem Inhalt ableiten
Der Titel soll die Auswahl des Fensters ermöglichen.
- 1
Prüfen Sie den geladenen Inhalt, bevor Sie den Titel formulieren: Hier ist es die Pegelansicht im Kinzig-Archiv.
- 2
Halten Sie den Namen kurz und konkret; „Frame“ oder „Inhalt“ nennt lediglich die technische Hülle.
- 3
Pflegen Sie den Titel dort, wo der iframe erzeugt wird, damit ein erneutes Rendern die Korrektur erhält.
- 4
Prüfen Sie den Namen nach Inhaltswechseln und in den angebotenen Sprachversionen.
Fehlversuche vermeiden
Ein sichtbarer Text genügt hier nicht
Nur den Absatz im Fenster ändern
Der Text im inneren Dokument benennt den äußeren iframe nicht automatisch. Setzen Sie den Titel an der Einbettung.
name statt title setzen
name dient der technischen Adressierung des Fensters. Es ersetzt den für Nutzer bestimmten Titel nicht.
Den Dokumenttitel verwechseln
Das title-Element innerhalb des eingebetteten Dokuments und das title-Attribut am iframe haben unterschiedliche Aufgaben. Prüfen Sie beide getrennt.
Alle Fenster gleich nennen
Die beiden Nachbarfenster heißen im Beispiel beide „Doppelte Pegelkarte“. Deren Unterscheidbarkeit wird durch die Korrektur am ersten Fenster nicht verbessert.
Der erste Frame besteht den erneuten Test
Axe bestätigt am unveränderten ersten iframe ein nicht leeres title-Attribut. Der gezielte frame-title-Verstoß ist behoben; die Bildpixel vor und nach der Attributänderung sind identisch.
So prüfen Sie die Korrektur nach
- Öffnen Sie die veröffentlichte Seite und kontrollieren Sie title="Pegelansicht der Kinzig" am ersten Frame.
- Wiederholen Sie frame-title und prüfen Sie das Ergebnis an genau dieser Fundstelle.
- Rufen Sie die Frame-Navigation Ihres Screenreaders auf und beurteilen Sie, ob der Name die Auswahl der Pegelansicht ermöglicht.
Das Ergebnis gilt für frame-title am ersten Pegelfenster. Die übrigen Befunde des Archivs und die Zugänglichkeit der eingebetteten Dokumente sind damit nicht geprüft.
Nachgewiesene Änderung im DOM
title: „Pegelansicht der Kinzig“
Axe-Prüfung non-empty-title: bestanden
frame-title am ersten iframe: bestanden
Sichtbarer Fensterinhalt: unverändertPrüfumfang kennen
Der Name ist ein eigener Prüfpunkt
Ein benannter Frame erleichtert die Orientierung; sein Inhalt benötigt weitere Prüfungen.
Automatisch prüfbar
- Einen fehlenden zugänglichen Namen am iframe erkennen
- Den betroffenen Frame mit Selektor und Kontextbild zuordnen
- Die Namensprüfung nach der Korrektur am selben Element wiederholen
Im Kontext zu entscheiden
- Bewerten, ob „Pegelansicht der Kinzig“ den tatsächlich geladenen Inhalt passend beschreibt
- Die Unterscheidbarkeit der Fenster in der Screenreader-Navigation beurteilen
- Bedienung und Inhalt der eingebetteten Dokumente gesondert prüfen