Praxisleitfaden Textalternativen für Einbettungen

Eingebettete Objekte verständlich benennen

Erkennen Sie namenlose Einbettungen und prüfen Sie die passende Textalternative.

object-altWCAG 1.1.1

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Markierter Befund · Kritisch · WCAG 1.1.1Stadtillustration ohne zugänglichen Namen

Befund verstehen

Die sichtbare Stadtansicht bleibt unbenannt

Das Stadtrundgang-Register zeigt eine eingebettete Illustration mit Türmen und Wasserlauf. Das object besitzt weder aria-label noch aria-labelledby oder title. Überschrift und Begleittext erklären den Abschnitt sichtbar, sind aber nicht als Name mit dem Objekt verbunden.

Warum das relevant ist

Menschen, die mit einem Screenreader zwischen eingebetteten Inhalten navigieren, erhalten an diesem Objekt keine eindeutige Bezeichnung. Seine Aufgabe ist damit schwerer zu erkennen.

Befund im BeispielErkannter Befund

Scanner-Signal

object-alt meldet .town-object-illustration ohne zugänglichen Namen.

Regel
object-alt
Referenz
WCAG 1.1.1
Diagnose vor der Korrektur
Element: .town-object-illustration
Sichtbarer Inhalt: Stadtansicht mit Türmen und Wasserlauf
aria-label: fehlt
aria-labelledby: fehlt
title: fehlt
object-alt: Verstoß

Was muss die Alternative vermitteln?

Bestimmen Sie zuerst, welche Information oder Bedienung die Einbettung bereitstellt.

Lehrskizze · keine ScanneraufnahmeGleiche Darstellung, andere zugängliche Ebene

Die Lehrskizze trennt sichtbare Illustration und zugängliche Benennung. Das Objekt sieht vor und nach der Reparatur gleich aus; erst aria-label gibt ihm einen Namen.

Ausgangsbeispiel
Sichtbare Darstellung · objectStadtansicht mit Türmen und Wasserlauf
Zugängliche EbeneKein Name verbunden
aria-label verbindet den Namen
Korrekturbeispiel
Sichtbare Darstellung · objectStadtansicht mit Türmen und Wasserlauf
Zugängliche EbeneStilisierte Stadtansicht von Bräunlingen mit Türmen und Wasserlauf
Passende Umsetzung auswählen
  • Kurzer, eindeutiger Inhalt

    Das Objekt lässt sich durch eine knappe Beschreibung sinnvoll identifizieren.

    Passende Umsetzung

    Benennen Sie es am object-Element. Im Beispiel beschreibt der Name Stadt, Motiv und den sichtbaren Wasserlauf.

  • Vorhandene sichtbare Beschriftung

    Ein benachbarter Text benennt genau dieses Objekt.

    Passende Umsetzung

    Verbinden Sie ihn über seine eindeutige ID mit aria-labelledby. Eine allgemeine Abschnittsüberschrift genügt dafür inhaltlich nicht immer.

  • Komplexes Dokument oder Anwendung

    Die Einbettung enthält Daten, längere Erklärungen oder bedienbare Funktionen.

    Passende Umsetzung

    Ergänzen Sie den kurzen Namen um einen zugänglichen Inhalt oder eine gleichwertige Alternative. Ein Name allein ersetzt weder Dokumentstruktur noch Bedienbarkeit.

Fundstelle zuordnen

Die Einbettung ist sofort erkennbar

Der Ausschnitt zeigt die sichtbare Stadtillustration zusammen mit ihrer Überschrift und der kurzen Beschreibung. Die Markierung liegt direkt auf dem geladenen object, nicht auf einem leeren Platzhalter.

Der BefundStadtillustration ohne zugänglichen Namen

Die Türme und der Wasserlauf sind für sehende Personen unmittelbar verständlich. Im Accessibility Tree fehlt dem äußeren object trotzdem ein Name. Genau diese unsichtbare Lücke weist der Befund nach.

Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 1.1.1Stadtillustration ohne zugänglichen Namen

Einbettung korrigieren

Den Namen direkt am Objekt ergänzen

Ergänzen Sie aria-label am vorhandenen object. Der Name fasst Motiv und Kontext der sichtbaren Illustration knapp zusammen. Die SVG-Datenquelle bleibt unverändert; im Codepaar ist die Daten-URL nur zur Lesbarkeit gekürzt.

Was sich im Code ändert

Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.

Kommt hinzu
aria-label="Stilisierte Stadtansicht von Bräunlingen mit Türmen und Wasserlauf"

Im CMS oder Template Prüfen Sie den erzeugten Einbettungscode. Ein Dateititel in der Medienverwaltung hilft nur, wenn das Template ihn als zugängliche Beschriftung am object ausgibt.

Vollständigen Code vergleichen
KorrekturvergleichHTML · Daten-URL gekürzt

Vorher

<object class="town-object-illustration"
  type="image/svg+xml"
  data="data:image/svg+xml,…"></object>

Nachher

<object class="town-object-illustration"
  type="image/svg+xml"
  data="data:image/svg+xml,…"
  aria-label="Stilisierte Stadtansicht von Bräunlingen mit Türmen und Wasserlauf"></object>

Markierte Zeilen wurden geändert

Umsetzung absichern

Beschriftung und eingebetteten Inhalt gemeinsam prüfen

Eine verlässliche Einbettung braucht mehr als ein ausgefülltes Attribut.

  1. 1

    Benennen Sie den konkreten Gegenstand oder Zweck. „Objekt“ und ein technischer Dateiname unterscheiden mehrere Einbettungen kaum.

  2. 2

    Verwenden Sie bei aria-labelledby eine vorhandene, eindeutige ID mit nicht leerem Text.

  3. 3

    Prüfen Sie, ob die Einbettung selbst lädt und mit der vorgesehenen assistiven Technik zugänglich bleibt.

  4. 4

    Bieten Sie bei umfangreichen Dokumenten eine zugängliche Fassung an. Halten Sie deren Inhalt mit der eingebetteten Version synchron.

  5. 5

    Testen Sie einen ergänzten Fallback auch bei nicht geladenem Medium: Inhalt zwischen den object-Tags wird gewöhnlich erst dann angezeigt.

Fehlversuche vermeiden

Was den Befund nicht zuverlässig behebt

alt vom Bild übernehmen

Das alt-Attribut ist nicht der passende Beschriftungsweg für object. Verwenden Sie einen unterstützten Namen, etwa aria-label oder aria-labelledby.

Nur Fallback-Text einsetzen

Text zwischen den object-Tags kann bei nicht geladenem Medium helfen. Er ersetzt den von object-alt geprüften Namen des geladenen Objekts nicht.

Inhalt pauschal als dekorativ markieren

role="none" oder role="presentation" kann den Regeltest passieren. Für eine informative Registerkarte wäre das keine passende Reparatur.

Den Namen mit vollständigem Zugang verwechseln

Ein benanntes PDF oder interaktives Objekt kann weiterhin unlesbar oder unbedienbar sein. Prüfen Sie die eingebettete Ressource gesondert.

Der Name ist vorhanden, der Regelbefund behoben

Am selben object meldet Axe nach der Ergänzung einen bestandenen object-alt-Test. Der geprüfte Name beschreibt die sichtbaren Türme und den Wasserlauf. Die Illustration bleibt unverändert.

So prüfen Sie die Korrektur nach

  • Kontrollieren Sie aria-label im ausgelieferten HTML der veröffentlichten Seite.
  • Führen Sie object-alt erneut aus und ordnen Sie das Ergebnis demselben Objekt zu.
  • Prüfen Sie mit einem Screenreader, ob der Name beim Erreichen der Einbettung verständlich ausgegeben wird.
  • Öffnen und bedienen Sie den eingebetteten Inhalt sowie eine angebotene Alternative.

Bestätigt ist die Reparatur dieser Benennung. Die Aufnahme belegt weder das Laden der eingebetteten Registerkarte noch vollständige Barrierefreiheit des Registerabschnitts.

Beispiel im Prüfbericht Gelöst
GelöstTextalternative am Objekt ergänztobject-alt besteht am selben Element. Die Zugänglichkeit des eingebetteten SVG benötigt eine separate Prüfung.
Diagnose nach der Korrektur
Element: .town-object-illustration
aria-label: Stilisierte Stadtansicht von Bräunlingen mit Türmen und Wasserlauf
object-alt: bestanden
Darstellung: unverändert
Zugänglichkeit des eingebetteten SVG: separat prüfen

Prüfgrenzen kennen

Automatisch finden, im Nutzungskontext bewerten

Der Scanner untersucht die technische Beschriftung des object im gerenderten Dokument.

Automatisch prüfbar

  • Ein object ohne unterstützte Textalternative erkennen
  • Die betroffene Einbettung über Selektor und Ausschnitt zuordnen
  • Die Beschriftung nach einer Änderung erneut prüfen

Im Kontext zu entscheiden

  • Bewerten, ob der Name Zweck und Inhalt treffend beschreibt
  • Ladeverhalten, Screenreader-Ausgabe und Tastaturbedienung der Einbettung prüfen
  • Gleichwertigkeit und Erreichbarkeit einer ausführlichen Alternative beurteilen

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Der Website-Check ist bereit.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.