Barrierefreie Videos: Untertitel und Transkripte

1. Warum Videobarrierefreiheit zwei getrennte Probleme löst

Videobarrierefreiheit wird in der Praxis oft auf eine einzige Maßnahme reduziert: Untertitel hinzufügen, fertig. Tatsächlich adressieren Untertitel und Audiodeskription zwei vollständig unterschiedliche Nutzergruppen mit gegensätzlichen Bedürfnissen. Untertitel machen gesprochene Sprache und wichtige Geräusche für gehörlose und schwerhörige Nutzer lesbar. Audiodeskription macht visuelle Informationen, die nicht durch den Originalton vermittelt werden, für blinde und stark sehbehinderte Nutzer hörbar. Wer nur Untertitel liefert, hat die Hälfte der Barriere gelöst.

Bei einem Produktvideo zeigt sich der Unterschied konkret: Ein Sprecher erklärt ein Feature, während gleichzeitig eine Animation eine Maßtabelle einblendet, die im Ton nicht erwähnt wird. Ein gehörloser Nutzer braucht den gesprochenen Text als Untertitel. Ein blinder Nutzer braucht eine zusätzliche Beschreibung der eingeblendeten Maßtabelle, die in einer Sprechpause eingefügt oder als erweiterte Audiodeskription bereitgestellt wird. Beide Anforderungen sind in WCAG 2.2 unter unterschiedlichen Erfolgskriterien geregelt und müssen getrennt geplant werden, nicht als ein einziges Task in einem Ticket.

2. WCAG-Anforderungen an Video: Was Gesetz und Norm verlangen

WCAG 2.2 verlangt für vorab aufgezeichnete Videos mit Ton mehrere Erfolgskriterien gleichzeitig. Kriterium 1.2.2 (Untertitel, Level A) fordert synchronisierte Untertitel für allen gesprochenen Inhalt und relevante Geräusche. Kriterium 1.2.3 (Audiodeskription oder Medienalternative, Level A) verlangt entweder eine Audiodeskription oder ein vollständiges Transkript, das auch visuelle Informationen beschreibt. Kriterium 1.2.5 (Audiodeskription, Level AA) geht weiter und fordert Audiodeskription als eigenständige Tonspur für alle Videos, unabhängig davon, ob ein Transkript existiert.

Für Unternehmen in Deutschland ist das keine freiwillige Empfehlung mehr: Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet ab dem 28. Juni 2025 Anbieter bestimmter Produkte und Dienstleistungen im elektronischen Geschäftsverkehr, darunter Online-Shops, zur Einhaltung von WCAG 2.1 Level AA. Produktvideos ohne Untertitel und ohne Audiodeskription oder Transkript sind damit ein direkter Compliance-Verstoß, nicht nur ein Usability-Mangel. Wer Videos in einen Magento-Shop einbindet, muss diese Anforderungen von Anfang an im technischen Konzept berücksichtigen, nicht als nachträglichen Fix.

3. WebVTT verstehen: Format, Timing und Cue-Einstellungen

WebVTT (Web Video Text Tracks) ist das Standardformat für zeitgesteuerten Text im Web und wird von allen modernen Browsern nativ unterstützt, ohne zusätzliche JavaScript-Bibliothek. Eine WebVTT-Datei beginnt immer mit der Kopfzeile WEBVTT, gefolgt von einzelnen Cues: einem Zeitstempel-Bereich im Format Stunden:Minuten:Sekunden.Millisekunden und dem zugehörigen Text. Anders als bei reinen Untertiteln für Sprache sollten wichtige nicht-sprachliche Geräusche wie [Klingeln] oder [Applaus] ebenfalls als Cue erfasst werden, weil sie für das Verständnis des Videos relevant sein können.

WebVTT unterstützt zusätzlich Cue-Einstellungen für Position, Ausrichtung und Größe (position, align, size), die bei mehreren gleichzeitig sprechenden Personen eine räumliche Zuordnung ermöglichen. Wichtig für die Lesbarkeit: Ein Cue sollte nicht länger als zwei Zeilen und nicht länger als etwa sieben Sekunden auf dem Bildschirm stehen, da längere Texte die durchschnittliche Lesegeschwindigkeit übersteigen. Die maximale Zeichenanzahl pro Zeile liegt bei rund 37 Zeichen, damit der Text auch auf kleineren Bildschirmen ohne Umbruch lesbar bleibt.

WEBVTT

NOTE
Caption file for product demo video "wireless-headphone-setup.mp4"
Generated and manually reviewed for accuracy

00:00:00.000 --> 00:00:03.500
Welcome to the setup guide for our
wireless over-ear headphones.

00:00:03.600 --> 00:00:07.200
[Chime sound] First, press and hold
the power button for three seconds.

00:00:07.300 --> 00:00:11.000
The LED indicator will flash blue,
signaling pairing mode is active.

00:00:11.100 --> 00:00:15.800 position:50%,line:80% align:center
Open your device's Bluetooth settings
and select "MS Headphone Pro".

00:00:15.900 --> 00:00:19.400
[Confirmation beep] The headphones
are now successfully connected.

4. Das HTML track-Element: Untertitel korrekt einbinden

Das <track>-Element bindet eine WebVTT-Datei als Kindelement des <video>-Tags ein und ist Teil des HTML-Standards, komplett ohne externe Bibliothek. Entscheidend ist das kind-Attribut: kind="captions" markiert Untertitel inklusive relevanter Geräuschbeschreibungen für gehörlose und schwerhörige Nutzer, während kind="subtitles" reine Sprachübersetzung für Nutzer ohne Hörbeeinträchtigung meint, die die gesprochene Sprache nicht verstehen. Diese Unterscheidung wird in der Praxis häufig verwechselt, ist aber semantisch wichtig, weil Screenreader und Bedienhilfen sich daran orientieren.

Mehrere track-Elemente können für verschiedene Sprachen parallel eingebunden werden, unterschieden durch das srclang-Attribut. Das Attribut default markiert eine Spur als automatisch aktiv, was besonders für kind="captions" in der Standardsprache des Shops sinnvoll ist. Wichtig: Der native Video-Player von Chrome, Firefox und Safari zeigt ein Untertitel-Menü automatisch an, sobald mindestens ein track-Element vorhanden ist, ganz ohne zusätzliches JavaScript. Ein eigener Player muss dieses Verhalten nur nachbauen, wenn er das native Video-Element vollständig ersetzt.

<!-- Hyvä phtml: Produktvideo mit mehrsprachigen Untertiteln und Audiodeskription -->
<video
    controls
    preload="metadata"
    width="1280"
    height="720"
    poster="{{$block->getVideoPosterUrl()}}"
    aria-label="{{$block->escapeHtmlAttr($block->getVideoTitle())}}"
>
    <source src="{{$block->getVideoUrl('mp4')}}" type="video/mp4">
    <source src="{{$block->getVideoUrl('webm')}}" type="video/webm">

    <!-- Captions: spoken content plus relevant non-speech sounds -->
    <track
        kind="captions"
        src="{{$block->getVttUrl('de')}}"
        srclang="de"
        label="Deutsch"
        default
    >
    <track
        kind="captions"
        src="{{$block->getVttUrl('en')}}"
        srclang="en"
        label="English"
    >

    <!-- Descriptions: separate WebVTT track for extended audio description text -->
    <track
        kind="descriptions"
        src="{{$block->getDescriptionsVttUrl('de')}}"
        srclang="de"
        label="Audiodeskription"
    >

    <p>Ihr Browser unterstützt das Video-Element nicht.
       <a href="{{$block->getTranscriptUrl()}}">Lesen Sie das vollständige Transkript</a>.</p>
</video>

5. Audiodeskription: Die zweite, oft vergessene Anforderung

Audiodeskription fügt in den natürlichen Sprechpausen des Originaltons zusätzliche gesprochene Beschreibungen relevanter visueller Inhalte ein: Kamerawinkel, eingeblendete Grafiken, Produktdetails, die nur gezeigt, aber nicht erwähnt werden. Es gibt zwei technische Umsetzungswege. Die Standard-Audiodeskription nutzt die vorhandenen Pausen im Originalton und wird als separate Tonspur oder als zweite Videoversion mit eingemischter Beschreibung bereitgestellt. Die erweiterte Audiodeskription pausiert das Video aktiv, wenn die vorhandenen Sprechpausen für eine vollständige Beschreibung nicht ausreichen, was technisch aufwendiger ist, aber bei komplexen visuellen Inhalten notwendig sein kann.

In der Praxis wird Audiodeskription oft fälschlich als optionales Extra behandelt, obwohl WCAG 2.2 Kriterium 1.2.5 auf Level AA sie explizit verlangt. Ein pragmatischer Ansatz für Produktvideos: Ein zweites kind="descriptions"-Track-Element mit WebVTT-Text, der von einer Text-to-Speech-Engine oder einem Screenreader zusätzlich zum Originalton vorgelesen werden kann, sofern der Player dies unterstützt. Alternativ, und WCAG-konform als Ersatz für 1.2.3, reicht ein vollständiges Transkript, das auch die visuellen Inhalte textuell beschreibt, wenn keine eigenständige Audiodeskriptionsspur produziert wird.

6. Transkripte: Text als SEO-Verstärker und Fallback

Ein Transkript ist die textuelle Vollversion eines Videos, inklusive Sprecherkennzeichnung, relevanter Geräusche und Beschreibungen visueller Inhalte. Anders als Untertitel ist ein Transkript nicht zeitgesteuert und wird als eigenständiger, durchsuchbarer Text auf der Seite oder als verlinktes Dokument bereitgestellt. Für Nutzer mit Taubblindheit, die auf Braillezeilen angewiesen sind, ist das Transkript oft die einzige zugängliche Form des Videoinhalts, da weder Untertitel noch Audiodeskription für sie nutzbar sind.

Der SEO-Effekt ist ein häufig übersehener Zusatznutzen: Google kann Videoinhalte nicht direkt verstehen, aber ein vollständiges Transkript auf derselben Seite liefert Suchmaschinen indexierbaren, semantisch reichen Text, der zusätzliche Keywords und Long-Tail-Suchanfragen abdeckt. Ein Produktvideo mit Transkript rankt häufig für Suchanfragen, die im gesprochenen Text vorkommen, aber im umgebenden Seitentext fehlen. Technisch reicht ein einfacher, semantisch korrekt ausgezeichneter Textblock unterhalb des Videos, idealerweise mit Zeitstempel-Ankern, die beim Klick zur passenden Videostelle springen.

<!-- Transcript block below the video, semantically marked up and deep-linkable -->
<section aria-labelledby="transcript-heading" class="prose">
    <h3 id="transcript-heading">Transkript: Kopfhörer einrichten</h3>
    <p>
        <a href="#t=0">[00:00]</a> Willkommen zur Einrichtungsanleitung für unsere
        kabellosen Over-Ear-Kopfhörer.
    </p>
    <p>
        <a href="#t=4">[00:04]</a> Halten Sie den Ein-Ausschalter drei Sekunden
        gedrückt, bis Sie einen Signalton hören.
    </p>
    <p>
        <a href="#t=8">[00:08]</a> Die LED-Anzeige blinkt blau. Das signalisiert,
        dass der Kopplungsmodus aktiv ist.
    </p>
    <p>
        <a href="#t=12">[00:12]</a> Öffnen Sie die Bluetooth-Einstellungen Ihres
        Geräts und wählen Sie "MS Headphone Pro" aus der Liste.
    </p>
</section>

7. Praktischer Workflow: Produktvideo bis zum barrierefreien Upload

Ein wiederholbarer Workflow verhindert, dass Barrierefreiheit bei jedem neuen Produktvideo als Sonderaufgabe neu erfunden wird. Schritt eins: Das Rohvideo wird mit einem Transkriptionswerkzeug automatisch vertextet, etwa mit Whisper oder einem Cloud-Dienst, gefolgt von einer manuellen Korrektur durch eine Person, die das Produkt kennt. Automatische Spracherkennung liegt bei klarer Studioqualität oft bei über 90 Prozent Genauigkeit, scheitert aber zuverlässig an Produktnamen, Fachbegriffen und Akzenten, weshalb die manuelle Prüfung nicht optional ist.

Schritt zwei: Aus dem korrigierten Text wird eine WebVTT-Datei erzeugt, entweder durch Export aus dem Transkriptionstool oder durch ein eigenes Skript, das Zeitstempel aus der Sprachanalyse in Cues umwandelt. Schritt drei: Ein zweiter Durchgang durch das Video identifiziert Stellen mit relevanten visuellen Informationen ohne Entsprechung im Ton, aus denen die Audiodeskriptions-Cues oder die Transkript-Ergänzungen entstehen. Schritt vier: Beide Dateien, WebVTT-Untertitel und das vollständige Transkript, werden zusammen mit dem Video im Magento-Backend als Medien-Assets abgelegt und über das track-Element beziehungsweise einen Transkript-Block verlinkt. Ein Video ohne diese vier Schritte gilt in einem barrierefreien Entwicklungsprozess als nicht abnahmefähig.

{
  "video_asset": {
    "sku": "MS-HEADPHONE-PRO",
    "source_file": "wireless-headphone-setup.mp4",
    "duration_seconds": 24,
    "captions": [
      { "lang": "de", "file": "wireless-headphone-setup.de.vtt", "kind": "captions", "reviewed": true },
      { "lang": "en", "file": "wireless-headphone-setup.en.vtt", "kind": "captions", "reviewed": true }
    ],
    "descriptions": [
      { "lang": "de", "file": "wireless-headphone-setup.desc.de.vtt", "kind": "descriptions", "reviewed": true }
    ],
    "transcript": {
      "file": "wireless-headphone-setup.transcript.de.html",
      "includes_visual_descriptions": true
    },
    "workflow_status": "reviewed_and_published"
  }
}

8. Umsetzung im Hyvä-Theme: Player, Alpine.js und Layout-XML

Im Hyvä-Theme bleibt das native <video>-Element die richtige Basis, statt eine schwere JavaScript-Player-Bibliothek nachzuladen, die die Vorteile des kleinen Hyvä-JS-Bundles wieder zunichtemacht. Ein schlankes Alpine.js-Snippet reicht aus, um zusätzliche Bedienelemente wie einen Umschalter für die Audiodeskriptionsspur oder einen Sprungpunkt zum Transkript bereitzustellen, ohne den nativen Untertitel-Mechanismus des Browsers zu ersetzen. Wichtig ist, kind="captions" und kind="descriptions" niemals per JavaScript zu simulieren, wenn der native Mechanismus dieselbe Funktion bereits liefert, weil das unnötige Fehlerquellen und Screenreader-Inkompatibilitäten schafft.

Die WebVTT-Dateien und das Transkript werden am besten über ein eigenes ViewModel bereitgestellt, das die Medien-URLs aus dem Produktdatensatz liest, statt sie im Template hart zu kodieren. Über Layout-XML lässt sich der Video-Block gezielt auf Produktseiten mit hinterlegtem Demo-Video einblenden, während Produkte ohne Video den Block gar nicht erst rendern. Das verhindert leere video-Tags ohne track-Elemente, die sonst versehentlich als unvollständige Barrierefreiheits-Implementierung im Code verbleiben.

// Alpine.js component: toggle audio description track and jump to transcript
// without replacing the browser's native caption handling
function accessibleVideoPlayer() {
  return {
    descriptionsEnabled: false,

    init() {
      this.video = this.$refs.videoEl;
    },

    toggleDescriptions() {
      this.descriptionsEnabled = !this.descriptionsEnabled;
      const track = [...this.video.textTracks].find(t => t.kind === 'descriptions');
      if (track) {
        track.mode = this.descriptionsEnabled ? 'showing' : 'disabled';
      }
    },

    jumpToTranscript(seconds) {
      // Deep-link from transcript timestamp into the video
      this.video.currentTime = seconds;
      this.video.play();
    }
  };
}

9. Untertitel, Audiodeskription und Transkript im Vergleich

Die drei Bausteine barrierefreier Videos lösen unterschiedliche Probleme, werden aber in der Praxis oft verwechselt oder als austauschbar behandelt. Die folgende Übersicht zeigt, welcher Baustein für welche Zielgruppe verpflichtend ist und welches Format dabei zum Einsatz kommt.

Der wiederkehrende Fehler in allen Zeilen der Tabelle ist derselbe: Ein Team implementiert nur den Baustein, der am einfachsten automatisiert werden kann, meist die automatische Untertitel-Generierung, und hält das Thema damit für erledigt. Für echte WCAG-Konformität und für ein tatsächlich nutzbares Produktvideo braucht es alle vier oberen Bausteine gemeinsam, nicht isoliert.

10. Zusammenfassung

Barrierefreie Videos lösen ein Problem, das ohne bewusste Planung fast immer nur zur Hälfte gelöst wird. Untertitel via WebVTT und dem HTML track-Element machen gesprochene Inhalte für gehörlose und schwerhörige Nutzer lesbar, sind nativ im Browser unterstützt und benötigen keine zusätzliche JavaScript-Bibliothek. Audiodeskription ist die häufig vergessene zweite Hälfte und macht visuelle Informationen für blinde Nutzer hörbar, entweder als eigene Tonspur oder als kind="descriptions"-Track. Transkripte ergänzen beides als durchsuchbarer, SEO-relevanter Text und sind für taubblinde Nutzer oft der einzige zugängliche Zugang zum Videoinhalt.

Der entscheidende Hebel liegt in einem wiederholbaren Produktionsworkflow: automatische Transkription mit manueller Korrektur, WebVTT-Export, ein zweiter Durchgang für visuelle Beschreibungen, und die saubere Einbindung über das native track-Element im Hyvä-Theme. Seit dem Barrierefreiheitsstärkungsgesetz ist das keine Kür mehr, sondern für Online-Shops in Deutschland eine rechtliche Pflicht mit WCAG 2.1 Level AA als Maßstab.

11. FAQ: Barrierefreie Videos, Untertitel und Transkripte