Zur Übersicht

Selbst gehostete Videos in Elementor barrierefrei einbinden

Wenn ein Video direkt über WordPress bzw. den eigenen Server eingebunden wird, stellt Elementor bei selbst gehosteten Videos keine komfortable Möglichkeit bereit, Untertiteldateien direkt im Widget zu hinterlegen.

Für barrierefreie Videos sollten wir deshalb mindestens auf drei Punkte achten:

Das Video darf nicht automatisch mit Ton starten.
Der Player muss vollständig per Tastatur bedienbar sein.
Gesprochene Inhalte und wichtige Geräusche brauchen Untertitel.

Wenn wichtige Informationen ausschließlich über das Bild vermittelt werden, sollte zusätzlich eine Textbeschreibung angeboten werden.

Ausgangslage

Verwendet wird das normale Elementor-Video-Widget mit:

Quelle: selbst gehostet
MP4-Datei aus der WordPress-Mediathek
kein Autoplay
sichtbare Player-Steuerung

Elementor erzeugt daraus ein normales Video-Element.Eine Untertitelspur über lässt sich im Widget jedoch nicht direkt eintragen.

Untertitel als WebVTT-Datei erstellen

Untertitel werden als Datei mit der Endung .vtt gespeichert.

Beispiel:

WEBVTT

00:00:03.000 --> 00:00:06.500
Der Alltag eines Unternehmers:
Effizienz, Fokus, Kontrolle.

00:00:06.500 --> 00:00:09.500
Zumindest in der Theorie.

00:00:09.500 --> 00:00:11.500
[Telefon klingelt]

Die Datei muss mit folgendem Kopf beginnen:

WEBVTT

Zwischen den einzelnen Untertiteln steht jeweils eine Leerzeile.

Die Zeitangaben folgen diesem Schema:

Stunde:Minute:Sekunde.Millisekunde

Also zum Beispiel:

00:00:14.000 --> 00:00:18.000

Wichtige Regeln für die Untertitel

Gesprochener Text wird möglichst wortgetreu übernommen.

Zusätzlich können wichtige akustische Informationen ergänzt werden:

[Telefon klingelt]

[Musik]

[Tür fällt zu]

[Lachen]

Nur Geräusche aufnehmen, die für das Verständnis des Videos relevant sind.

Untertitel sollten außerdem nicht aus zu langen Textblöcken bestehen. Längere Sätze lieber auf mehrere zeitlich passende Einblendungen aufteilen.

VTT-Datei unter Windows speichern

Windows hängt bei Textdateien gerne automatisch .txt an.

Beim Speichern im Editor deshalb:

Dateiname: "video-de.vtt"
Dateityp: Alle Dateien (*.*)
Codierung: UTF-8

Die Anführungszeichen um den Dateinamen verhindern, dass Windows daraus beispielsweise

video-de.vtt.txt

macht.

VTT-Datei in WordPress hochladen

Die fertige Datei wird über die WordPress-Mediathek hochgeladen.

Anschließend die vollständige URL der Datei kopieren.

Beispiel:

https://www.example.com/wp-content/uploads/2026/08/video-de.vtt

Falls WordPress den Upload von .vtt-Dateien blockiert, muss der MIME-Type einmalig freigegeben werden.

CSS-Klasse beim Elementor-Video vergeben

Beim Elementor-Video-Widget unter

Erweitert → CSS-Klassen

folgende Klasse eintragen:

barrierefreies-video

Ohne Punkt davor.

Untertitelspur per JavaScript einfügen

Da Elementor im Video-Widget keine eigene Eingabe für anbietet, wird die Spur nachträglich per JavaScript ergänzt.

<script>
document.addEventListener('DOMContentLoaded', function () {
    const video = document.querySelector('.barrierefreies-video video');

    if (!video) return;

    const track = document.createElement('track');

    track.kind = 'captions';
    track.label = 'Deutsch';
    track.srclang = 'de';
    track.src = 'https://www.example.com/wp-content/uploads/2026/08/video-de.vtt';

    video.appendChild(track);
});
</script>

Die URL muss durch die tatsächliche Adresse der hochgeladenen VTT-Datei ersetzt werden.

Einbau in Elementor

Das Script kann über

Elementor → Custom Code

eingebunden werden.

Als Position eignet sich:

</body> – End

Dadurch wird das Script erst ausgeführt, nachdem das Video bereits im HTML vorhanden ist.

Untertitel automatisch anzeigen

Falls die Untertitel standardmäßig eingeschaltet sein sollen, kann zusätzlich ergänzt werden:

track.default = true;

Komplettes Beispiel:

<script>
document.addEventListener('DOMContentLoaded', function () {
    const video = document.querySelector('.barrierefreies-video video');

    if (!video) return;

    const track = document.createElement('track');

    track.kind = 'captions';
    track.label = 'Deutsch';
    track.srclang = 'de';
    track.src = 'https://www.example.com/wp-content/uploads/2026/08/video-de.vtt';
    track.default = true;

    video.appendChild(track);
});
</script>

In der Regel ist es angenehmer, die Untertitel nicht automatisch zu aktivieren und die Wahl dem Nutzer zu überlassen.

Mehrere Videos auf derselben Website

Wenn mehrere Videos unterschiedliche Untertiteldateien verwenden, sollte jedes Video eine eigene CSS-Klasse bekommen.

Beispiel:

video-team-brillanz
video-produktdemo
video-interview

Dazu jeweils das passende Script bzw. die passende VTT-Datei verwenden.

Textbeschreibung für visuelle Inhalte

Untertitel ersetzen keine Beschreibung wichtiger visueller Informationen.

Wenn ein Video Inhalte zeigt, die nicht aus Sprechertext und Ton hervorgehen, sollte eine zusätzliche Textbeschreibung vorhanden sein.

Beispiel:

Videobeschreibung anzeigen

Die Beschreibung sollte als normaler HTML-Text ausgegeben werden.

Sie kann beispielsweise enthalten:

wichtige Handlungen
relevante Animationen
eingeblendete Texte
Informationen, die ausschließlich über das Bild vermittelt werden

Popup statt Accordion bei Hintergrundvideos

Liegt das Video in einem Container mit Elementor-Hintergrundvideo, kann ein Accordion Probleme verursachen.

Beim Öffnen wächst der Container in der Höhe. Elementor berechnet Hintergrundvideos dabei unter Umständen nicht sauber neu. Das kann zu weißen Streifen oder falsch skalierten Hintergrundvideos führen.

In diesem Fall hat sich ein Popup als deutlich stabiler erwiesen.

Empfohlener Aufbau:

Video

Button oder Link:
"Videobeschreibung anzeigen"

→ Elementor Popup mit der vollständigen Beschreibung

Das Popup verändert die Höhe des ursprünglichen Containers nicht und hat daher keinen Einfluss auf das Hintergrundvideo.

Barrierefreiheit des Popups prüfen

Das Popup sollte vollständig per Tastatur bedienbar sein.

Prüfen:

Öffnen per Tastatur
Navigation mit Tab
Navigation rückwärts mit Shift + Tab
Schließen mit Esc
Schließen-Button per Tastatur erreichbar

Elementor Pro unterstützt diese Funktionen grundsätzlich, sollte aber trotzdem im Frontend getestet werden.

Player per Tastatur testen

Nach dem Einbau immer die echte Frontend-Seite testen.

Mit der Tastatur sollten mindestens erreichbar sein:

Play und Pause
Lautstärke
Fortschrittsanzeige
Untertitel bzw. CC-Funktion

Nicht nur im Elementor-Editor testen.

Der Editor kann sich bei Videos und Hintergrundvideos anders verhalten als das Frontend.

Wichtige Hinweise

Untertitel allein machen ein Video nicht automatisch vollständig barrierefrei.

Je nach Inhalt können zusätzlich nötig sein:

eine ausführliche Textbeschreibung
eine Audiodeskription
ein vollständiges Transkript

Bei kurzen Image- oder Erklärvideos kann eine gut geschriebene Textbeschreibung oft eine pragmatische Ergänzung sein.

Auch wichtige Texteinblendungen im Video sollten entweder gesprochen, untertitelt oder zusätzlich als HTML-Inhalt verfügbar sein.

Video webtauglich konvertieren

Damit das Video flüssig läuft, am besten mit HandBrake konvertieren. Folgende Einstellungen funktionieren erfahrungsgemäß sehr gut:

H.264 (x264)
RF 22 als Ausgangspunkt
Same as Source
Constant Framerate
AAC 128 kbit/s
und vor allem: Web Optimized.

Kurzfassung

Für selbst gehostete Elementor-Videos verwenden wir nach Möglichkeit folgende Lösung:

kein Autoplay mit Ton
Elementor-Player mit Tastaturbedienung
Untertitel als .vtt-Datei
<track> per JavaScript ergänzen
wichtige visuelle Inhalte zusätzlich als Text beschreiben
bei problematischen Hintergrundvideo-Containern die Beschreibung lieber in einem Popup statt in einem Accordion anzeigen
alles im echten Frontend mit Tastatur testen
vor dem Upload mit HandBrake konvertieren