Barrierefreie Videos in HTML: So geht’s richtig!

Lesezeit: ca. 4 Minuten

Barrierefreie Videos in HTML: So bindest du sie richtig ein!

Videos sind ein großartiges Medium zur Wissensvermittlung – doch oft sind sie nicht für alle Nutzer zugänglich. Menschen mit Hör- oder Sehbehinderungen benötigen spezielle Anpassungen, um Inhalte vollständig erfassen zu können. In diesem Beitrag erfährst du, wie du barrierefreie Videos in HTML einbindest und gleichzeitig SEO-Vorteile nutzt.

Warum barrierefreie Videos wichtig sind

Eine inklusive Webgestaltung sorgt nicht nur für eine bessere Nutzererfahrung, sondern verbessert auch dein Google-Ranking. Barrierefreie Inhalte werden von Suchmaschinen bevorzugt, da sie mehr Nutzern zugänglich sind.

Grundelemente eines barrierefreien Videos

Ein HTML-Video sollte folgende Elemente enthalten:

✅ Steuerungselemente (controls) für einfache Bedienung

✅ Untertitel (track kind=“subtitles“) für gehörlose Nutzer

✅ Audiodeskription (track kind=“descriptions“) für blinde oder sehbehinderte Nutzer

✅ Alternativtext oder Download-Option für Geräte ohne Videounterstützung

HTML-Code für ein barrierefreies Video

<video controls width="800" aria-labelledby="video-title">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    
    <track src="untertitel-de.vtt" kind="subtitles" srclang="de" label="Deutsch" default>
    <track src="untertitel-en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="audiodeskription-de.vtt" kind="descriptions" srclang="de" label="Audiodeskription Deutsch">
    
    Ihr Browser unterstützt das Video-Element nicht.  
    <a href="video.mp4" download>Hier Video herunterladen.</a>
</video>

<p id="video-title">Erklärvideo zur barrierefreien Webgestaltung</p>

SEO-Tipps für Videos

1️⃣ Verwende beschreibende Dateinamen:

Statt video123.mp4 → barrierefreie-webgestaltung.mp4

2️⃣ Nutze strukturierte Daten (Schema Markup)

JSON-LD hilft Google, dein Video besser zu verstehen.

3️⃣ Erstelle eine Video-Transkription:

Suchmaschinen können gesprochene Inhalte nicht direkt analysieren – ein Transkript verbessert die Sichtbarkeit.

4️⃣ Optimierte Ladezeiten:

Komprimiere Videos, um die Performance zu verbessern.

Fazit: Barrierefreiheit bringt Vorteile für alle

Mit wenigen Anpassungen machst du deine Videos nicht nur inklusiv, sondern verbesserst auch dein SEO-Ranking. Setze auf Untertitel, Audiodeskriptionen und alternative Inhalte – so erreichst du mehr Nutzer und steigerst die Benutzerfreundlichkeit deiner Website.

Ergänzungen und Hinweise

Wenn der Untertitel bereits fest im Video eingebrannt (Hardcoded) ist und nicht als separate Datei über <track> geladen wird, kannst du dies im HTML angeben, damit Nutzer (z. B. Screenreader oder Browser-Plugins) wissen, dass Untertitel bereits vorhanden sind.

Möglichkeiten, dies anzugeben:

1. ARIA-Label mit Hinweis auf Untertitel

Du kannst mit aria-label angeben, dass das Video bereits eingebrannte Untertitel enthält:

<video controls width="800" aria-label="Dieses Video enthält eingebrannte Untertitel">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

🔹 Vorteil: Screenreader geben diese Information aus, wenn Nutzer das Video abspielen.

2. Textliche Ergänzung für alle Nutzer

Falls du auch sehende Nutzer informieren willst, kannst du unter dem Video einen Hinweis in Textform platzieren:

<p>Dieses Video enthält eingebrannte Untertitel.</p>

3. kind=“captions“ bei <track> (Falls es Soft-Subs gibt)

Falls du neben den eingebrannten Untertiteln doch noch optionale, zuschaltbare Untertitel anbietest, kannst du den <track>-Typ auf “captions” setzen:

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

🔹 Unterschied zu “subtitles”:

• „subtitles“ = Zusätzliche Informationen (Übersetzungen, Ergänzungen)

• „captions“ = Für gehörlose Nutzer, enthält auch Geräuschbeschreibungen

Empfehlung für SEO & Barrierefreiheit

Wenn der Untertitel nur im Video sichtbar ist, solltest du zusätzlich eine Transkription als reinen Text auf der Seite bereitstellen. Das hilft Suchmaschinen und verbessert die Barrierefreiheit.

Beispiel für eine Transkription:

<details>
    <summary>Video-Transkript anzeigen</summary>
    <p>[00:00] Willkommen zu unserem barrierefreien Video.</p>
    <p>[00:05] In diesem Video zeigen wir Ihnen, wie Sie HTML-Videos mit Untertiteln einbinden.</p>
</details>

Fazit

Wenn dein Video eingebrannte Untertitel enthält, verwende:

✔ aria-label=“Dieses Video enthält eingebrannte Untertitel“

✔ Eine sichtbare Textinfo für alle Nutzer

✔ Optional eine Transkription für SEO und Barrierefreiheit

Das aria-label mit dem Hinweis auf eingebrannte Untertitel spielt für die offizielle Barrierefreiheitsbewertung (WCAG, BITV, etc.) keine Rolle, da es von Screenreadern zwar vorgelesen wird, aber keinen echten barrierefreien Mehrwert bietet.

Warum?

1️⃣ Screenreader können eingebrannte Untertitel nicht auslesen → Nur echte <track>-Untertitel sind für sie nutzbar.

2️⃣ WCAG verlangt zugänglichen Text, nicht nur visuelle Elemente → Eingebrannte Untertitel sind nicht durchsuchbar, nicht anpassbar (z. B. größere Schrift) und können nicht automatisch übersetzt werden.

3️⃣ Nutzer mit Hörbehinderung brauchen zuschaltbare Untertitel → Das wird nur durch <track kind=“subtitles“> oder ein externes Transkript erfüllt.