Videos barrierefrei in Contao einbinden

'Philipp Seibt'
Philipp Seibt
Videos barrierefrei in Contao einbinden

Videos barrierefrei in Contao einbinden – so gelingt es mit Untertiteln, Transkripten und Audiodeskriptionen ganz einfach.

Videos sind ein starkes Kommunikationsmittel – aber nur, wenn sie für alle zugänglich sind. Menschen mit Hör- oder Sehbehinderung, Nutzer:innen mit Screenreadern oder auch Personen, die unterwegs kein Audio hören können, profitieren von barrierefreien Videos.
In diesem Beitrag erfährst du, wie du Videos in Contao barrierefrei einbindest, Untertitel korrekt erstellst und worauf du bei der Umsetzung achten musst – Schritt für Schritt.

1. Was bedeutet „barrierefreie Videos“?

Barrierefreie Videos in Contao einbinden

Barrierefreie Videos sorgen dafür, dass alle Menschen – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen – Video-Inhalte verstehen und bedienen können.
Das betrifft z. B. Menschen mit Hörbeeinträchtigung, Sehbehinderung, motorischen Einschränkungen oder auch Nutzer:innen, die gerade ohne Ton oder auf mobilen Geräten unterwegs sind.

Damit ein Video barrierefrei oder zumindest barrierearm ist, müssen mehrere Aspekte zusammenspielen:

1.1 Untertitel (Captions)

Was ist das?
Untertitel geben das gesprochene Wort als Text wieder – synchron zum Bild. Sie helfen gehörlosen oder schwerhörigen Personen, den Inhalt vollständig zu erfassen.

Wichtig: Es gibt zwei Arten von Untertiteln:

  • Dialog-Untertitel: Nur das gesprochene Wort.
  • Voll-Untertitel (Captions): Enthalten zusätzlich Geräusche, Musikhinweise oder Sprecherangaben. (Z. B. „[Musik spielt]“, „[Applaus]“)

Technische Umsetzung (HTML5)
Ein Video kann über das <track>-Element Untertitel einbinden. Das sieht z. B. so aus:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="untertitel-de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
</video>
  • src = Pfad zur Untertitel-Datei (meist .vtt)
  • kind="subtitles" = Art der Textspur
  • srclang="de" = Sprache
  • label="Deutsch" = Anzeigename im Player
  • default = wird automatisch aktiviert

👉 In Contao:
Ab Contao 5.6 gibt es im Video-Inhaltselement ein Feld, um eine VTT-Datei direkt auszuwählen. Diese wird beim Rendern automatisch als <track>-Tag eingebunden.
In älteren Versionen (< 5.6) muss man das Template des Video-Elements anpassen (z. B. player.html5.twig) und das <track>-Tag manuell ergänzen. Das ist aber technisch gut machbar (siehe weiter unten im Beitrag).

1.2 Audiodeskription (AD)

Was ist das?
Die Audiodeskription ist eine zusätzliche Tonspur, die beschreibt, was im Bild passiert – z. B. „Anna öffnet den Brief und schaut überrascht“.
Das hilft blinden oder sehbehinderten Personen, die visuellen Inhalte nachzuvollziehen.

Technisch:

  • Als zweite Tonspur oder als separate Video-/Audio-Datei einbindbar.
  • Im HTML5-Video könnte eine AD ebenfalls über <track kind="descriptions"> referenziert werden.
    Allerdings unterstützen nur wenige Player diese Funktion nativ.
  • Praktisch wird häufig ein separates Video mit AD angeboten oder die AD wird über einen Umschalter im Player realisiert (z. B. mit dem barrierefreien Player „Plyr“ oder „Able Player“).

👉 In Contao:
Der Standard-Video-Player von Contao kann aktuell keine zweite Tonspur einbinden.

Empfehlung:

  • Entweder zwei Versionen des Videos anbieten („mit AD“ / „ohne AD“)
  • oder im Video-Beschreibungstext darauf hinweisen („Eine Version mit Audiodeskription finden Sie hier: …“).

Pflicht oder Empfehlung?
Eine Audiodeskription ist nicht in jedem Fall vorgeschrieben, sondern insbesondere für Videos mit wichtigen visuellen Inhalten, die nicht durch den Ton erklärt werden (z. B. Gestik, eingeblendete Texte, Szenen ohne Sprache). Wenn dein Video rein erklärend ist und der Ton alles beschreibt, reicht meist der Ton selbst – ergänze das ggf. im Transkript.

Beispiel-Video:
Ein Beispiel-Video auf YouTube mit Audiodeskription:
Web Accessibility Perspectives: Text to Speech - Audio Described Version

1.3 Transkript (Volltext)

Was ist das?
Ein Transkript ist der vollständige Textinhalt eines Videos. Es enthält alle gesprochenen Inhalte und bei Bedarf wichtige visuelle Informationen (z. B. „Grafik zeigt steigenden Pfeil“).

Warum wichtig:

  • Blinde Nutzer:innen können es mit Screenreadern lesen.
  • Auch Suchmaschinen erfassen das Transkript → SEO-Vorteil.
  • Es dient als Alternative, wenn keine Untertitel oder AD vorhanden sind.

👉 In Contao:
Ein Transkript kann einfach als Textblock, Accordion oder Download (z. B. PDF oder TXT) unterhalb des Videos eingebunden werden.

Für gute Nutzerführung:
💡 „Zum Transkript des Videos“ (als Sprunglink oder Button unter dem Player)

Pflicht oder Empfehlung?
Ein Transkript ist keine gesetzliche Pflicht, aber eine empfohlene Alternative zur Audiodeskription und hilfreich für alle, die lieber lesen oder den Ton nicht hören können. Außerdem verbessert es die Auffindbarkeit in Suchmaschinen (SEO). Wenn du also kein Video mit AD anbietest, solltest du ein Transkript bereitstellen, um den Inhalt barriereärmer zu machen.

1.4. Steuerelemente & Bedienbarkeit

Was ist das Problem?
Ein Video-Player muss für alle bedienbar sein – auch per Tastatur oder Screenreader.

Zu beachten:

  • Der Player muss über Tab- und Enter-Tasten steuerbar sein.
  • Buttons brauchen sinnvolle Labels (z. B. „Play“, „Pause“ statt nur Icons).
  • Der Fokus darf beim Abspielen nicht verloren gehen.

⚠️ In Contao solltest du keine der folgenden Checkboxen aktivieren:

  • „Steuerelemente verbergen“ → verhindert, dass Nutzer:innen das Video steuern können
  • „In einer Schleife abspielen“ → kann bei Screenreadern zu Dauerschleifen führen
  • „Inline abspielen (kein Vollbildmodus)“ → erschwert die Bedienung
  • „Audioausgabe stummschalten“ → kann für gehörlose Nutzer:innen irreführend wirken
  • „Autoplay“ → Wenn ein Video automatisch startet, ist das für Screenreader-Nutzer:innen und Menschen mit kognitiven Einschränkungen sehr störend.

👉 In Contao:
Contao nutzt den nativen HTML5-Player des Browsers.
Dieser ist in den meisten modernen Browsern tastatur- und screenreader-freundlich

1.5. Titel (Figcaption)

Was ist das?
Ein <figcaption> ist die Beschriftung unter einem Video.
Es erklärt kurz, was das Video zeigt – ähnlich wie ein Alternativtext bei einem Bild.

Beispiel:

<figure>
  <video controls src="beispiel.mp4"></video>
  <figcaption>Erklärvideo: So funktioniert das neue Kontaktformular in Contao</figcaption>
</figure>

👉 In Contao:
Das Video-Inhaltselement enthält das Feld „Untertitel“ – das ist genau dafür gedacht!
Bitte füllt dieses Feld immer aus, auch wenn es nur ein kurzer Beschreibungssatz ist.
Das verbessert die Barrierefreiheit und Nutzerfreundlichkeit erheblich.

2. Untertitel (VTT-Dateien) erstellen – Schritt für Schritt

Untertitel (VTT-Dateien) für barrierefreie Videos erstellen

Untertitel sind das Herzstück barrierefreier Videos.
Sie machen gesprochene Inhalte für Menschen mit Hörbeeinträchtigungen zugänglich, helfen beim Verständnis in lauter Umgebung und verbessern gleichzeitig euer SEO, weil Suchmaschinen den Untertiteltext lesen können.

Was ist eine VTT-Datei eigentlich?

VTT steht für Web Video Text Tracks.
Es handelt sich um ein reines Textformat, das von modernen Browsern verstanden wird und über das HTML5-Element <track> mit einem Video verknüpft werden kann.

Beispiel:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="untertitel-de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
</video>

👉 Das <track>-Element sagt dem Browser:
„Lade diese Textdatei und zeige sie als Untertitelspur an.“

Eine VTT-Datei enthält:

  • eine Kopfzeile WEBVTT
  • Zeitangaben, wann welcher Text angezeigt wird
  • den eigentlichen Untertiteltext

Beispiel einer einfachen VTT-Datei:

WEBVTT

00:00:02.000 --> 00:00:05.000
Hallo und herzlich willkommen zu unserem Video!

00:00:05.500 --> 00:00:08.000
Heute zeigen wir dir, wie du Videos barrierefrei machst.

💡 Hinweis:
Die Datei darf keine zusätzlichen Zeichen vor WEBVTT enthalten – sonst wird sie von Browsern nicht erkannt.
Auch die Leerzeilen zwischen den Untertiteln sind Pflicht.

Wie Contao mit VTT-Dateien umgeht

Ab Contao Version 5.6 kann man im Inhaltselement „Video“ direkt eine VTT-Datei als Untertitelspur auswählen. Contao bindet sie dann automatisch als <track>-Tag ins HTML ein.

In älteren Versionen (≤ 5.5) gibt es diese Option noch nicht – dort muss das Template des Video-Elements angepasst werden, z. B. durch Einfügen eines <track>-Tags im Twig- oder HTML5-Template.

Das bedeutet:
👉 Wenn ihr eine aktuelle Contao-Version verwendet, müsst ihr keinen Code anpassen – nur die Datei auswählen.
👉 Wenn ihr eine ältere Version nutzt, erkläre ich euch später, wie man das Template manuell erweitert.

Option 1: YouTube automatische Untertitel nutzen

Das ist die schnellste und kostengünstigste Methode, um Untertitel zu erstellen, vor allem wenn das Video ohnehin bei YouTube liegt oder dort kurzzeitig hochgeladen werden darf.

Schritt 1: Video privat auf YouTube hochladen

  • YouTube öffnen → YouTube Studio
  • Auf „Video hochladen“ klicken
  • Datei auswählen (MP4 oder ähnliches Format)
  • Titel und Beschreibung eingeben
  • Wichtig: Sichtbarkeit auf „Privat“ oder „Nicht gelistet“ stellen
    → So ist das Video nur für euch erreichbar
  • Upload abschließen und kurz warten, bis YouTube das Video verarbeitet hat

Schritt 2: Automatische Untertitel überprüfen

  • YouTube Studio → Inhalte → Video auswählen
  • Tab „Untertitel“ öffnen
  • Nach wenigen Minuten erscheinen automatisch erzeugte Untertitel
  • Auf die jeweilige Sprache klicken und „Bearbeiten“ wählen
  • Alle Texte sorgfältig prüfen:
    • Fachbegriffe
    • Eigennamen
    • Zahlen, Datumsangaben
    • Satzzeichen und Groß-/Kleinschreibung

💡 Tipp:
YouTube versteht Interpunktion oft nicht richtig – korrigiert Kommas und Punkte, damit der Text beim Lesen flüssig bleibt.

Schritt 3: Untertitel als VTT-Datei herunterladen

  • Im Untertitel-Tab → Sprache auswählen
  • Rechts auf drei Punkte (⋮) klicken
  • Herunterladen“ → Format .vtt wählen
  • Datei speichern und sinnvoll benennen (z. B. video-de.vtt)

Schritt 4: VTT-Datei überprüfen

Nach dem Download öffnet ihr die Datei mit einem einfachen Texteditor.
Sie sollte in etwa so aussehen:

WEBVTT
Kind: captions
Language: de

00:00:00.000 --> 00:00:03.000
Willkommen in unserer Kita!

00:00:03.500 --> 00:00:07.000
Hier können Kinder spielen, lernen und entdecken.

00:00:07.500 --> 00:00:10.000
Wir bieten kreative und bewegte Aktivitäten.

00:00:10.500 --> 00:00:13.000
Gemeinsam wachsen, lachen und lernen!

Hinweis:
Je nach Export oder Software kann die VTT-Datei etwas anders aussehen, z. B. mit zusätzlichen Zeitmarkierungen für einzelne Silben oder Wörtern und doppelten Zeilen. Das passiert, wenn die Untertitel nicht nur als ganze Sätze, sondern auch für feine Timing-Effekte (wie Karaoke- oder Highlight-Effekte) gespeichert werden. Außerdem steuern Angaben wie align:start oder position:0% die Position der Untertitel auf dem Bildschirm.

Option 2: Automatische Transkriptions-Tools

Amberscript

  • Erstellt automatische Untertitel mit sehr guten Ergebnissen (ca. 85–90 % Genauigkeit)
  • Benutzerfreundliche Bearbeitung direkt im Browser
  • Direkter Export als VTT-Datei möglich
  • Kostenpflichtig, dafür hochwertig

VEED.io

  • Kostenlose Untertitel-Generierung
  • Videos bis 50 MB in der kostenlosen Version
  • Anpassung von Stil, Farben und Position der Untertitel möglich
  • Direkter Export als VTT-Datei

Hinweis: Alle automatisch erstellten Untertitel sollten überprüft und korrigiert werden, besonders bei Fachbegriffen oder Eigennamen, um die Genauigkeit sicherzustellen.

Option 3: Untertitel manuell erstellen

  • Öffnet die Video-Datei in einem Texteditor oder speziellen Untertitel-Programmen wie Aegisub oder Subtitle Edit.
  • Schreibt den Text zeitlich genau unter Angabe von Start- und Endzeit, z. B.:
WEBVTT
Kind: captions
Language: de

00:00:00.000 --> 00:00:03.000
Willkommen in unserer Kita!

00:00:03.500 --> 00:00:07.000
Hier können Kinder spielen, lernen und entdecken.
  • Achtet darauf, doppelte Zeilen zu vermeiden und die Lesbarkeit zu gewährleisten.
  • Positionierung kann über Attribute wie align:start position:0% angepasst werden (z. B. linksbündig am unteren Bildschirmrand).
  • Vorteil: maximale Genauigkeit, besonders bei Namen, Fachbegriffen oder komplizierten Sätzen.
  • Nach Fertigstellung als .vtt speichern – direkt verwendbar in Video-Playern oder Online-Plattformen.

Hinweis: Diese Methode dauert länger, bietet aber die beste Kontrolle über Inhalt, Timing und Darstellung.

3. Umsetzung der Barrierefreiheit von Videos in Contao

Umsetzung der Barrierefreiheit von Videos in Contao

Damit Videos barrierefrei in Contao eingebunden werden können, sollten folgende Punkte je nach Version beachtet werden. Je nach eingesetzter Contao-Version gibt es unterschiedliche Möglichkeiten, Untertitel (VTT-Dateien) und barrierefreie Bedienelemente zu integrieren.

3.1 Contao 5.6 und höher

Seit Contao Version 5.6 steht im Video-Inhaltselement ein eigenes Feld „Text-Spur-Dateien“ zur Verfügung.
Hier kannst du direkt deine .vtt-Datei hochladen und mit dem Video verknüpfen.

So geht’s:

  • Inhaltselement „Video“ öffnen
  • Unter dem Bereich „Text-Spuren“ das Feld „Text-Spur-Dateien“ finden
  • Dort die .vtt-Datei auswählen oder hochladen
  • Seite speichern und Video testen – Untertitel lassen sich nun im Player aktivieren

3.2 Versionübergreifende Einstellungen (alle Contao-Versionen)

Einige Einstellungen gelten unabhängig von der Contao-Version und sind wichtig für die Barrierefreiheit:

Untertitel (Figcaption):

  • Beschreibender Text unter dem Video – erscheint im <figcaption>-Tag.
  • Empfehlung: Kurz und prägnant angeben, worum es im Video geht.

Autoplay:

  • Startet das Video automatisch beim Laden der Seite.
  • Empfehlung: Deaktivieren! Nutzer:innen sollen selbst entscheiden, wann sie ein Video abspielen.

Steuerelemente verbergen:

  • Entfernt die Bedienelemente (Play, Pause etc.).
  • Empfehlung: Deaktivieren! Bedienelemente müssen sichtbar und tastaturbedienbar sein.

Diese Einstellungen findest du direkt im Inhaltselement „Video“ im Backend.

3.3 Anleitung: VTT-Feld manuell hinzufügen (< Contao 5.6)

In älteren Contao-Versionen (z. B. 4.13 oder 5.3) gibt es noch kein Feld für „Text-Spur-Dateien“.
Du kannst die Funktion aber selbst nachrüsten, indem du ein zusätzliches Feld im DCA anlegst und das Template erweiterst.

1. DCA anpassen

contao/dca/tl_content.php

<?php
use Contao\CoreBundle\DataContainer\PaletteManipulator;

PaletteManipulator::create()
    ->addLegend('texttrack_legend', 'player_legend', PaletteManipulator::POSITION_BEFORE)
    ->addField('textTrackSRC', 'texttrack_legend', PaletteManipulator::POSITION_APPEND)
    ->applyToPalette('player', 'tl_content')
;

$GLOBALS['TL_DCA']['tl_content']['fields']['textTrackSRC'] = [
    'inputType' => 'fileTree',
    'eval' => ['multiple'=>true, 'fieldType'=>'checkbox', 'filesOnly'=>true, 'extensions'=>'vtt', 'isSortable'=>true],
    'sql'  => "blob NULL"
];

2. Sprachdateien ergänzen

contao/languages/de/tl_content.php

<?php
$GLOBALS['TL_LANG']['tl_content']['texttrack_legend'] = 'Text-Spuren';
$GLOBALS['TL_LANG']['tl_content']['textTrackSRC'] = [
    'Text-Spur-Dateien',
    'Die oberste .vtt-Datei wird als Standardspur geladen. Zusätzliche Einstellungen können innerhalb der .vtt-Datei vorgenommen werden.'
];

3. Template anpassen

templates/content_element/player.html.twig

{% extends "@Contao/content_element/player.html.twig" %}

{% block media %}
    <{{ figure.media.type }}{{ figure.media.attributes }}>
    {% for source_attributes in figure.media.sources %}
        {% do csp_source('media-src', source_attributes.src) %}
        <source{{ source_attributes }}>
    {% endfor %}

    {% set track = data.textTrackSRC|deserialize[0]|file('path') %}
    {% if track %}
        <track src="{{ track }}" kind="captions" srclang="de" label="Deutsch">
    {% endif %}

    </{{ figure.media.type }}>
{% endblock %}

4. Twig-Filter für Datei-Pfad hinzufügen

src/Twig/FileExtension.php

Dieser Twig-Filter konvertiert die UUID aus der Datenbank in einen Dateipfad, sodass Contao die .vtt-Datei im Template korrekt einbinden kann.

<?php
declare(strict_types=1);

namespace App\Twig;

use Contao\CoreBundle\Framework\ContaoFramework;
use Contao\FilesModel;
use Twig\Extension\AbstractExtension;
use Twig\TwigFilter;

class FileExtension extends AbstractExtension
{
    public function __construct(private readonly ContaoFramework $framework)
    {
    }

    public function getFilters(): array
    {
        return [
            new TwigFilter('file', [$this, 'getFile']),
        ];
    }

    public function getFile(?string $uuid, string|null $attribute = null): string|int|array|float
    {
        if (null === $uuid) {
            return '';
        }

        $filesAdapter = $this->framework->getAdapter(FilesModel::class);
        $filesModel = $filesAdapter->findByUuid($uuid);

        if (null === $filesModel) {
            return '';
        }

        return match ($attribute) {
            'path' => $filesModel->path
        };
    }
}

✅ Ergebnis

Nach diesen Schritten kannst du auch in älteren Contao-Versionen .vtt-Untertitel verwenden.
Die Einbindung erfolgt über das <track>-Element, und im Frontend erscheint automatisch die Auswahl für Untertitel im Player.

💡 Tipp für Redakteur:innen

  • Immer prüfen, ob Untertitel und Figcaption ausgefüllt sind.
  • Kein Autoplay aktivieren.
  • Untertitel-Funktion im Frontend testen (z. B. Chrome, Firefox, Safari).
  • In der Barrierefreiheitserklärung erwähnen, wenn Videos nicht vollständig barrierefrei sind.

4. Barrierefreiheitserklärung – was muss zu Videos rein?

Barrierefreiheitserklärung – was muss zu Videos rein?

Wenn du Videos auf deiner Website einbindest, solltest du in deiner Erklärung zur Barrierefreiheit immer angeben,

  • ob und welche Videos vollständig barrierefrei sind (z. B. mit Untertiteln, Transkript oder Audiodeskription),
  • falls nicht: welche Einschränkungen bestehen (z. B. „Audiodeskription derzeit nicht verfügbar“),
  • und optional, bis wann du planst, fehlende Funktionen nachzurüsten.

💡 Hinweis:
Formulierungen in der Barrierefreiheitserklärung sollten immer juristisch geprüft oder an die Vorgaben der jeweiligen Behörde angepasst werden.

🟢 Beispieltext – wenn Videos barrierefrei sind:

Alle auf dieser Website eingebundenen Videos sind barrierefrei gestaltet. Sie verfügen über Untertitel und Transkripte, die den gesamten gesprochenen Inhalt wiedergeben. Die Videoplayer sind vollständig mit der Tastatur bedienbar. Audiodeskriptionen sind enthalten, wenn visuelle Informationen für das Verständnis wesentlich sind.

🟠 Beispieltext – wenn Videos noch nicht vollständig barrierefrei sind:

Alle auf dieser Website lokal eingebundenen Videos können derzeit nicht in vollem Umfang barrierefrei genutzt werden.

- Untertitel stehen aktuell nicht für alle Videos zur Verfügung.
- Audiodeskriptionen werden derzeit nicht bereitgestellt.
- Sämtliche lokal eingebundenen Videos sind davon betroffen.

Die verwendeten Videoplayer sind jedoch vollständig mit der Tastatur bedienbar. Wir arbeiten daran, unsere Videoinhalte schrittweise besser zugänglich zu machen. Wenn Sie auf Barrieren stoßen oder Unterstützung benötigen, wenden Sie sich bitte an die im Abschnitt „Rückmeldung“ genannten Stellen.

pdir Benutzer Tipp

Profi-Tipp: Du hast Fragen zum Thema "Barrierefreie Videos in Contao"? Wir beraten dich gern, kostenlos und unverbindlich!.

Häufige Fragen und Antworten zum Thema barrierefreie Videos

Ein barrierefreies Video ist so gestaltet, dass alle Menschen – auch mit Seh-, Hör- oder motorischen Einschränkungen – die Inhalte verstehen und bedienen können. Dazu gehören Untertitel, Audiodeskription, ein Transkript, tastaturbedienbare Steuerelemente und eine klare Beschriftung (Figcaption). Ziel ist, dass niemand vom Inhalt ausgeschlossen wird.

Untertitel ermöglichen gehörlosen oder schwerhörigen Menschen, einem Video zu folgen. Gleichzeitig helfen sie auch Nutzer*innen, die ohne Ton schauen (z. B. mobil).
Suchmaschinen können Untertitel-Texte lesen – dadurch verbessert sich das SEO-Ranking, weil Google den Inhalt des Videos besser versteht.

Eine VTT-Datei („Web Video Text Tracks“) ist eine reine Textdatei, die Untertitel oder Transkripte zeitlich zum Video synchronisiert. Sie wird über das HTML5-Tag <track> eingebunden.

Beispiel:

<track src="untertitel-de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>

Browser erkennen dieses Format nativ – es ist der Standard für barrierefreie Untertitel im Web.

Ab Contao 5.6 gibt es im Inhaltselement „Video“ ein Feld für Textspuren. Dort kann direkt eine .vtt-Datei hochgeladen und verknüpft werden.
In älteren Versionen muss das Template erweitert und der <track>-Tag manuell hinzugefügt werden.
Contao bindet die Untertitel dann automatisch barrierekonform ein.

Es gibt drei Hauptmethoden:

  • Automatisch über YouTube (kostenlos, aber Korrektur nötig)
  • Transkriptions-Tools wie Amberscript oder VEED.io (gute Genauigkeit, VTT-Export)
  • Manuell mit Programmen wie Aegisub oder Subtitle Edit (höchste Präzision, mehr Aufwand)

Alle Varianten liefern .vtt-Dateien, die direkt in Contao genutzt werden können.

Eine Checkliste hilft:

  • Untertitel vorhanden (getestet in Player)
  • Kein Autoplay aktiviert
  • Player per Tastatur steuerbar
  • Figcaption oder Beschreibung vorhanden
  • Transkript verfügbar oder verlinkt
  • Optional: Eine Version mit Audiodeskription anbieten oder darauf hinweisen.

Ja, aber mit Einschränkungen.
Wenn du ein YouTube-Video einbindest, kannst du im YouTube-Studio Untertitel aktivieren und exportieren.

Für echte Barrierefreiheit solltest du prüfen:

  • Untertitel vorhanden und korrekt
  • Steuerelemente sichtbar und bedienbar
  • Keine Werbung oder Autoplay aktiviert

Alternativ: Das Video lokal hosten und mit <video> + <track> einbinden – das ist DSGVO-freundlicher und barriereärmer.

Die Audiodeskription (AD) beschreibt wichtige visuelle Elemente für blinde oder sehbehinderte Personen.
Technisch kann sie als zweite Tonspur oder als eigenes Video mit AD angeboten werden.
Da Contao derzeit keine zweite Tonspur unterstützt, ist der beste Weg:
👉 Zwei Versionen des Videos bereitstellen („mit AD“ / „ohne AD“)
oder im Beschreibungstext darauf hinweisen, wo die AD-Version verfügbar ist.

Barrierefreie Videos verbessern:

  • Zugänglichkeit: Mehr Menschen können Inhalte nutzen
  • SEO: Untertitel und Transkripte liefern Google Textinhalte
  • Nutzererlebnis: Videos werden besser verstanden, auch ohne Ton
  • Rechtssicherheit: Erfüllung der Anforderungen des BFSG (ab 2025)

Damit stärken barrierefreie Videos gleichzeitig Reichweite, Reputation und Compliance.

Das BFSG verpflichtet ab 28. Juni 2025 alle Anbieter digitaler Dienstleistungen, ihre Inhalte barrierefrei zu gestalten. Dazu gehören auch Videos auf Websites oder Plattformen.

Wesentliche Anforderungen:

  • Untertitel oder Transkript für gesprochene Inhalte
  • Tastaturbedienbarkeit
  • Keine automatisch startenden Medien
  • Verständliche Beschriftungen

Wer diese Anforderungen frühzeitig umsetzt, erfüllt gesetzliche Standards und verbessert gleichzeitig die User Experience.

Zurück

Ähnliche Beiträge

*******************

Liebe Leser,
Menschen sind nicht ausschließlich Frauen, Männer, weiblich, männlich, divers – Menschen können vielfältiger sein! Wir möchten euch ALLE als Menschen ansprechen, egal von welchem Geschlecht oder welcher Kultur. Sprachlich ist es schwierig, euch alle „richtig“ anzusprechen. Daher verwenden wir – auch für eine bessere Lesbarkeit – bei Personenbezeichnungen meist die männliche Form, wie Dienstleister oder Partner. Aber eins ist uns wichtig: Keiner soll sich ausgeschlossen fühlen.

Zudem sind wir Verfechter des DU #gernperdu und gestalten so unsere tägliche Kommunikation etwas lockerer und persönlicher. Auch hier gilt: Wir bringen allen die gleiche Wertschätzung entgegen.

*******************