So bekommst Du Deine Videos barrierefrei

Barrierefreie Videos sind über diverse Normen, Verordnungen und Gesetze nicht nur gesetzlich vorgeschrieben, sondern auch ein Zeichen von Inklusion und Fortschritt. In dieser Anleitung zeigen wir Dir detailliert, wie Du Videos in Deine Website so integrieren kannst, damit alle Menschen darauf zugreifen können. Los geht’s!

Inhaltliche Barrierefreiheit

Untertitel (Captions)

Untertitel sind essenziell, um alle gesprochenen Inhalte zugänglich zu machen. Dabei müssen alle Dialoge, Sprecherwechsel und relevante Kommentare exakt zur richtigen Zeit dargestellt werden. Text und Bild müssen also synchron laufen.

Zusätzlich sollten wichtige, nicht sprachliche Informationen wie Geräusche, Musik oder Toneffekte kurz und prägnant beschrieben werden. Besonders bei Videos mit komplexen Inhalten oder Fachbegriffen empfiehlt es sich, Untertitel auch in Leichter Sprache anzubieten. Das unterstützt Menschen mit kognitiven Einschränkungen.

Für die Implementierung der Untertitel bietet sich das WebVTT-Format (.vtt) an, da es neben dem reinen Text auch Einstellungen wie Timing, Positionierung und Styling (z. B. Farbe, Schriftgröße) ermöglicht.

Closed Captions versus Open Captions

• Closed Captions (CC): Diese Untertitel sind in einer separaten Datei (zum Beispiel im WebVTT-Format) hinterlegt und werden vom Videoplayer bei Bedarf ein- oder ausgeschaltet. Das bedeutet, dass der Nutzer entscheiden kann, ob er die Untertitel sehen möchte oder nicht. Diese Flexibilität ist besonders wichtig für barrierefreie Inhalte, da sie den individuellen Bedürfnissen der Nutzenden entgegenkommt – etwa wenn jemand in einer ruhigen Umgebung den Ton besser hört oder umgekehrt.
• Open Captions (OC): Im Gegensatz dazu werden Open Captions direkt in das Video eingebrannt und sind immer sichtbar. Sie können nicht deaktiviert werden. Obwohl diese Methode den Vorteil hat, dass sie in jeder Situation garantiert angezeigt wird (zum Beispiel, wenn ein Gerät keine Steuerung für Untertitel bietet), fehlt den Nutzenden hier die Möglichkeit, die Untertitel bei Bedarf auszuschalten. Das kann gerade für Menschen, die Untertitel nur gelegentlich benötigen, als störend empfunden werden.

Für barrierefreie Videos empfiehlt sich in der Regel der Einsatz von Closed Captions, da diese eine flexible Anpassung an die individuellen Bedürfnisse ermöglichen. Open Captions können in bestimmten Kontexten sinnvoll sein, etwa bei Videos, die auf Plattformen ohne entsprechende Steuerungsmöglichkeiten eingebettet werden – sollten jedoch immer als Alternative zu einer optional aktivierbaren Untertitel-Funktion angeboten werden.

Untertitel versus Captions

Captions dienen vor allem dazu, auch nicht-sprachliche Informationen wie Soundeffekte, Musik, Sprecherwechsel oder Geräusche darzustellen. Untertitel konzentrieren sich hingegen ausschließlich auf die Wiedergabe des gesprochenen Dialogs, um Personen zu unterstützen, die die Sprache nicht verstehen oder in lauten Umgebungen schauen.

Beispiel-Code

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

Audiodeskription (Audio Description)

Blinde und sehbehinderte Nutzende benötigen eine zusätzliche Audiospur, die visuelle Elemente und Handlungen beschreibt, die für das Verständnis des Inhalts wichtig sind. Die Audiodeskription sollte dabei nicht nur die offensichtlichen visuellen Inhalte umfassen, sondern auch Details wie Gestik, Mimik, Bühnenbilder oder Veränderungen in der Szenengestaltung beschreiben.

Es ist ideal, wenn Nutzende zwischen der normalen Tonspur und der Tonspur mit Audiodeskription wechseln können. Das kann über einen klar gekennzeichneten Button im Player erfolgen. Auch hier ist es sinnvoll, die Audiodeskription in Leichter Sprache anzubieten, um den Zugang für alle zu erleichtern.

Beispiel für die Einbindung

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="descriptions" srclang="de" src="audiodeskription_de.vtt" label="Audiodeskription">
</video>

Wenn Deine Website mehrsprachig ist, müssen auch alle barrierefreien Elemente in den entsprechenden Sprachvarianten angeboten werden. Dies umfasst:

• Mehrsprachige Untertitel und Audiodeskriptionen: Stelle sicher, dass Untertitel, Audiodeskriptionen und Transkripte in allen Sprachen verfügbar sind, in denen Dein Video angeboten wird. Verwende dazu korrekte Sprachangaben in den HTML-Attributen, z. B. srclang=“de“ für Deutsch oder srclang=“en“für Englisch.
• Konsistente Sprachwahl: Ermögliche es den Nutzenden, die gewünschte Sprachversion leicht auszuwählen. Bei eingebetteten Videos sollte die Sprachversion der barrierefreien Elemente (Untertitel, Audiodeskription) mit der Sprache der restlichen Seite übereinstimmen.
• Optimierung für Hilfstechnologien: Richtig gesetzte Sprachattribute unterstützen Screenreader und andere assistive Technologien dabei, die korrekte Sprachversion zu erkennen und darzustellen.

Alternativen zu Video-Inhalten

Abschrift (Transkript)

Ein vollständiges Transkript sollte alle gesprochenen Inhalte, wichtige Geräusche und beschreibende Informationen zu visuellen Elementen enthalten. Gliedere das Transkript in sinnvolle Abschnitte oder Kapitel und versehe es mit Zeitstempeln, damit Nutzende direkt zu einem interessanten Abschnitt springen können. Stelle das Transkript als durchsuchbaren Text bereit, z. B. als HTML-Seite oder als PDF mit zugänglicher Struktur, sodass es von Screenreadern problemlos gelesen werden kann. Auch hier empfiehlt sich eine Version in Leichter Sprache, um den Inhalt für Menschen mit kognitiven Einschränkungen verständlicher zu machen.

Alternative Audio-Versionen

Besonders bei komplexen Inhalten kann es sinnvoll sein, neben der normalen Audio-Tonspur auch eine Version in Leichter Sprache anzubieten und den Nutzenden die Möglichkeit zu geben, zwischen den Tonspuren zu wechseln.

Technische Umsetzung des Videoplayers

HTML5 -Tag und Fallbacks

Das HTML5 <video>-Element ist nativ von den meisten Browsern unterstützt und bietet eine solide Basis für Barrierefreiheit. Sollten jedoch JavaScript deaktiviert oder ältere Browser im Einsatz sein, sollte ein alternativer Inhalt oder ein Download-Link zum Video angeboten werden.

Beispiel für Fallback:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Dein Browser unterstützt dieses Videoformat nicht. Bitte <a href="video.mp4">lade das Video herunter</a>.
</video>

Neben dem Standard-Fallback, wie dem Bereitstellen eines Download-Links, ist es sinnvoll, zusätzliche alternative Zugriffswege anzubieten, um den Inhalt auch dann zugänglich zu machen, wenn das Video nicht geladen werden kann oder der Browser bestimmte Formate nicht unterstützt. Mögliche Maßnahmen sind:

• Textbasierte Inhaltszusammenfassung: Eine kurze, prägnante Zusammenfassung, die die wichtigsten visuellen und auditiven Inhalte des Videos wiedergibt, sodass auch Nutzenden, die das Video nicht ansehen können, den Kerninhalt erfassen.
• Vollständiges Transkript: Bereits im Abschnitt „Alternativen zu Video-Inhalten“ empfohlen, sollte das Transkript nicht nur als Download, sondern auch als direkt durchsuchbarer und zugänglicher Text (z. B. als HTML-Seite) verfügbar sein.
• Alternative Darstellungsformen: Falls technische Einschränkungen bestehen (z. B. deaktiviertes JavaScript), sollte neben dem Download-Link noch ein Hinweis angeboten werden, wie der Inhalt über alternative Wege (z. B. über einen separaten, statischen Inhaltsbereich) abgerufen werden kann.

YouTube, Vimeo und andere

Wenn Du Videos von Drittanbietern wie YouTube, Vimeo oder ähnlichen Plattformen einbettest, ist es wichtig zu prüfen, ob deren Player den barrierefreien Anforderungen genügt. Achte darauf, dass:

• Barrierefreie Funktionen vorhanden sind: Die eingebetteten Videos sollten über Untertitel, und wenn möglich, über Audiodeskriptionen verfügen. Überprüfe, ob die Steuerungselemente (z. B. Play, Pause, Lautstärkeregelung, Vollbildmodus) barrierefrei gestaltet und per Tastatur bedienbar sind.
• Klare Information für Nutzende: Falls die Plattform nicht alle erforderlichen barrierefreien Funktionen bietet, sollte dies deutlich kommuniziert und alternativ eine Möglichkeit angeboten werden, auf den Inhalt zuzugreifen – beispielsweise über das Hosten des Videos auf einem eigenen, barrierefreien Server.
• Konsistenz der Inhalte: Sorge dafür, dass auch bei extern eingebetteten Videos die gleichen barrierefreien Elemente (z. B. Untertitel in Leichter Sprache, Audiodeskription) verfügbar sind wie bei selbst gehosteten Inhalten.

ARIA-Attribute und semantische Elemente

Ergänze den Player mit ARIA-Attributen, um dynamische Inhalte und interaktive Steuerelemente für Screenreader klar zu kennzeichnen. Alle interaktiven Elemente sollten via Tastatur erreichbar sein und einen deutlich sichtbaren Fokusindikator haben, um die Navigation zu erleichtern.

Responsives Design und visuelle Gestaltung

Der Videoplayer sollte sich an verschiedene Bildschirmgrößen anpassen können – von großen Desktop-Monitoren bis zu mobilen Geräten. Steuerungselemente müssen den WCAG-Kontrastanforderungen entsprechen und gut erkennbare Icons sowie Buttons aufweisen, um Nutzenden mit motorischen Einschränkungen die Bedienung zu erleichtern.

Erweiterte Interaktionsmöglichkeiten

Funktionen wie Kapitelauswahl, Anpassung der Wiedergabegeschwindigkeit und Lautstärkeregelung sollten vorhanden sein – alles über eine intuitive, tastaturfreundliche Oberfläche. Vermeide Autoplay oder stelle sicher, dass es leicht zu stoppen ist, damit Nutzende nicht unvorbereitet in den Inhalt hineingezwungen werden.

Kennzeichnung und Bedienbarkeit

Klare Nutzerführung

Alle Steuerelemente des Videoplayers – Play, Pause, Lautstärke, Untertitel aktivieren, Audiodeskription – müssen eindeutig beschriftet und mit ARIA-Labels versehen sein. Bei Interaktionen wie dem Wechsel zwischen Untertiteln oder Tonspuren sollte visuelles und akustisches Feedback gegeben werden, um die Nutzenden über den aktuellen Zustand zu informieren.

Tastaturnavigation

Die Reihenfolge, in der Elemente per Tabulator angesprungen werden, muss logisch und intuitiv sein. Teste die Navigation intensiv, um sicherzustellen, dass keine Steuerungselemente „verloren gehen“. Sorge für ausreichend große und kontrastreiche Fokusindikatoren, damit Nutzende auf einen Blick erkennen, welches Element aktuell ausgewählt ist.

Rechtliche Anforderungen und Normen

Gesetzliche Rahmenbedingungen

In Deutschland regeln die BITV 2.0 und das Barrierefreiheitsstärkungsgesetz (BFSG) die Barrierefreiheit von öffentlichen Websites. Deine Videoeinbindung muss diesen Vorgaben entsprechen. Die WCAG 2.2 (und zukünftig WCAG 3.0) geben weltweit anerkannte Richtlinien vor, die unter anderem für Untertitel, Audiodeskription und Tastaturnavigation relevante Anforderungen enthalten. Für den öffentlichen Sektor in Europa stellt die DIN EN 301 549 die technischen Anforderungen an barrierefreie Informationstechnologie bereit.

Regelmäßige Audits und Updates

Regelmäßige Barrierefreiheitstests mit gängigen Screenreadern wie NVDA, JAWS und VoiceOver sowie mit Tastaturnavigation sind unerlässlich. Automatisierte Tools helfen, potenzielle Fehlerquellen zu identifizieren. Halte alle umgesetzten Maßnahmen und Testergebnisse schriftlich fest, um im Falle von Audits oder behördlichen Prüfungen den Nachweis der Barrierefreiheit erbringen zu können. Stelle sicher, dass alle Entwickelnden und Content-Erstellenden regelmäßig in den aktuellen Standards und Best Practices wie WCAG, BITV und DIN EN 301 549 geschult werden.

Nutzerfreundliche Ergänzungen

Feedback-Mechanismen

Integriere eine einfache Möglichkeit für Nutzende, Feedback zur Barrierefreiheit des Videos zu geben. So kannst Du Schwachstellen identifizieren und kontinuierlich an der Verbesserung arbeiten.

Dokumentation und Hilfestellungen

Biete kurze Erklärungen oder ein Hilfe-Dokument an, das den Nutzenden den Umgang mit dem barrierefreien Videoplayer erläutert. Informiere darüber, wie Untertitel oder Audiodeskriptionen aktiviert werden können. Stelle einen Ansprechpartner oder ein Support-Formular bereit, falls Nutzende technische Schwierigkeiten haben oder Verbesserungsvorschläge einbringen möchten.

Fazit

Ein barrierefreies Video erfordert weit mehr als nur das Einfügen eines <video>-Tags in Deine Website. Es umfasst inhaltliche Maßnahmen wie synchronisierte Untertitel (gerne in Leichter Sprache), Audiodeskriptionen zur Beschreibung visueller Inhalte und vollständige, strukturierte Abschriften inklusive Alternativen in Leichter Sprache.

Technisch ist die Verwendung des HTML5 <video>-Tags mit unterstützenden <track>-Elementen, die Integration von ARIA-Attributen, responsives Design und klare Fallback-Mechanismen notwendig.

Damit die Bedienbarkeit gewährleistet ist, müssen Tastaturnavigation und visuelle Fokusindikatoren berücksichtigt werden.

Regelmäßiges Testen, interne Schulung und eine ausführliche Dokumentation stellen sicher, dass Dein Video für alle Nutzungsgruppen barrierefrei und nutzerfreundlich zugänglich ist und bleibt.