Tipps zur Erstellung barrierefreier Videos

Barrierefreiheit ist ein wichtiger Bestandteil der Inklusion und bedeutet, dass Informationen und Inhalte für alle zugänglich sein sollten. Wenn es um Videos geht, gibt es einige Dinge zu beachten, um sicherzustellen, dass sie von allen Menschen, einschließlich Menschen mit Behinderungen, leicht zugänglich sind. Hier sind einige bewährte Tipps zur Erstellung barrierefreier Videos, die die Barrierefreiheit von Videos verbessern.

Video-Kamera nimmt gerade ein Interview auf. Der Hintergrund ist unscharf.
Bild von StockSnap über die Plattform Pixabay

Einbinden von Videos

Wenn es darum geht, Videos barrierefrei zu gestalten, gibt es einige Dinge zu beachten, um sicherzustellen, dass sie von allen Menschen, einschließlich Menschen mit Behinderungen, leicht zugänglich sind. Hier sind einige Best Practices:

  1. Untertitel hinzufügen: Die Verwendung von Untertiteln ist eine der wichtigsten Maßnahmen zur Verbesserung der Barrierefreiheit von Videos. Sie ermöglichen es Menschen mit Hörbehinderungen, den Inhalt des Videos zu verstehen. Es ist auch hilfreich für Menschen, die das Video in einer lauten Umgebung ansehen oder die Sprache nicht gut verstehen.
  2. Transkripte bereitstellen: Ein Transkript ist eine schriftliche Version des gesprochenen Inhalts des Videos. Es kann von Menschen mit Hörbehinderungen genutzt werden, die keine Untertitel lesen können, und es kann auch als zusätzliche Informationsquelle für alle Zuschauer dienen. Transkripte sollten, genau wie bei der Einbindung von Audio-Dateien, in der Regel als Textdatei neben dem Video bereitgestellt werden.
  3. Audiodeskription hinzufügen: Audiodeskriptionen sind gesprochene Beschreibungen von visuellen Inhalten in einem Video und ermöglichen es blinden oder sehbehinderten Zuschauern, das Geschehen auf dem Bildschirm zu verstehen. Die Beschreibungen werden in den Pausen im Dialog eingesetzt und müssen daher sorgfältig getimt werden.
  4. Videos mit einfachen visuellen Elementen gestalten: Vermeide es, komplexe visuelle Elemente wie schnell wechselnde Bilder oder flackernde Lichter zu verwenden, da sie für Menschen mit bestimmten Arten von Sehbehinderungen schwer zu verarbeiten sein können.
  5. Videos auf einer barrierefreien Plattform bereitstellen: Stelle sicher, dass das Video auf einer Plattform bereitgestellt wird, die barrierefrei ist und es ermöglicht, Untertitel und Audiodeskriptionen hinzuzufügen. Es ist auch wichtig, sicherzustellen, dass die Plattform einfach zu navigieren ist und eine intuitive Benutzeroberfläche hat.
  6. Barrierefreiheit in den Produktionsprozess einbeziehen: Um sicherzustellen, dass Videos von Anfang an barrierefrei sind, sollten Barrierefreiheitsaspekte in den gesamten Produktionsprozess integriert werden. Das bedeutet, dass von der Konzeption und Planung des Videos bis hin zur Umsetzung und Bereitstellung auf einer Plattform barrierefreie Aspekte berücksichtigt werden sollten.

Automatische Abspielen von Videos unbedingt vermeiden

Das automatische Abspielen von Videos kann ein Problem für die Barrierefreiheit darstellen. Es kann Menschen mit Sehbehinderungen oder Hörbehinderungen ausschließen oder stören, die möglicherweise Schwierigkeiten haben, das Video ohne die entsprechenden Hilfsmittel oder Untertitel zu verstehen. Außerdem kann es auch andere Benutzer stören, die nicht unbedingt das Video abspielen möchten oder nicht in der Lage sind, das Video auszuschalten, insbesondere wenn der Ton laut oder störend ist. Es ist daher empfehlenswert, das automatische Abspielen von Videos zu vermeiden und stattdessen dem Benutzer die Kontrolle zu geben, ob er das Video abspielen möchte oder nicht.

Durch die Umsetzung dieser Best Practices kannst Du sicherstellen, dass Deine Videos für alle zugänglich sind, einschließlich Menschen mit Behinderungen. Es ist wichtig, daran zu denken, dass Barrierefreiheit ein wesentlicher Bestandteil der Inklusion ist und dass es uns allen zugute kommt, wenn Informationen und Inhalte für alle zugänglich sind.

Untertitel (captioning)

Es gibt zwei Arten von Untertiteln für Videos oder Fernsehsendungen, das sogenannte "open" und "closed" Captioning. Bei "open" Captioning werden die Untertitel direkt in das Video eingebettet und können nicht deaktiviert werden. Bei "closed" Captioning können die Zuschauer die Untertitel ein- oder ausschalten, je nach Bedarf. Im Detail:

Open Captioning

Open Captioning bezieht sich auf Untertitel, die fest in das Video eingebettet sind und standardmäßig für jeden Betrachter sichtbar sind. Dies bedeutet, dass jeder Zuschauer die Untertitel sehen kann, unabhängig davon, ob er hörgeschädigt ist oder nicht. Der Vorteil von Open Captioning ist, dass es für die meisten Betrachter sehr einfach zu nutzen ist und keine besonderen Kenntnisse oder Tools erforderlich sind. Ein Nachteil ist jedoch, dass es für einige Zuschauer möglicherweise störend sein kann, die Untertitel ständig zu sehen, insbesondere wenn sie nicht hörgeschädigt sind.

Closed Captioning

Closed Captioning bezieht sich auf Untertitel, die für den Betrachter optional sind und ein- oder ausgeschaltet werden können. Closed Captions sind in einer separaten Datei enthalten, die mit dem Video synchronisiert ist. Ein Vorteil von Closed Captioning ist, dass es für diejenigen Betrachter, die die Untertitel benötigen, sehr nützlich ist, aber für diejenigen, die sie nicht benötigen, nicht störend ist. Ein Nachteil ist jedoch, dass es für einige Zuschauer möglicherweise schwierig ist, herauszufinden, wie sie die Untertitel aktivieren oder deaktivieren können.

Insgesamt gibt es also Vor- und Nachteile für beide Ansätze, und es hängt von den Bedürfnissen und Präferenzen der Zielgruppe ab, welcher Ansatz am besten geeignet ist. Um sicherzustellen, dass Videos für alle Betrachter zugänglich sind, ist es jedoch wichtig, zumindest eine der beiden Optionen anzubieten.

Code-Beispiele

Hier sind einige Code-Beispiele, die Dir helfen können, Videos barrierefrei in Deine Webseite zu integrieren:

  1. HTML5-Video-Tag mit Untertiteln und Bildunterschriften:

    <video controls>
      <source src="video.mp4" type="video/mp4">
      <track label="English" kind="subtitles" srclang="en" src="captions.vtt" default>
      <track label="Deutsch" kind="captions" srclang="de" src="captions.vtt">
      <track label="Deutsch (Untertitel für Gehörlose)" kind="captions" srclang="de" src="captions-for-deaf.vtt" >
      <track label="Beschreibung" kind="description" src="description.vtt">
    </video>

    Dieses Code-Beispiel zeigt ein HTML5-Video-Tag mit Untertiteln und Bildunterschriften. Die source-Tags stellen sicher, dass das Video in verschiedenen Formaten und Größen verfügbar ist und von jedem Browser wiedergegeben werden kann. Die track-Tags fügen Untertitel, Bildunterschriften und Beschreibungen hinzu, die von Screenreadern gelesen werden können.

  2. Video-Tag mit Verweis auf barrierefreie Version des Videos:

    <video controls>
      <source src="video.mp4" type="video/mp4">
      <a href="accessible-version.html">Barrierefreie Version des Videos</a>
    </video>

    Dieses Code-Beispiel zeigt ein Video-Tag mit einem Verweis auf eine barrierefreie Version des Videos. Falls das Video nicht barrierefrei ist, können Nutzer auf die barrierefreie Version zugreifen, um das Video mit Bildbeschreibungen oder Untertiteln zu sehen.

  3. Verwendung von ARIA-Attributen zur Verbesserung der Barrierefreiheit:

    <div role="application" aria-label="Video Player" tabindex="0">
      <video controls aria-labelledby="video-title">
        <source src="video.mp4" type="video/mp4">
      </video>
      <h2 id="video-title">Titel des Videos</h2>
    </div>

    Dieses Code-Beispiel zeigt die Verwendung von ARIA-Attributen, um die Barrierefreiheit eines Videos zu verbessern. Das role="application"-Attribut gibt an, dass das Video als Anwendung behandelt werden soll, das aria-label-Attribut beschreibt den Zweck des Video Players und das tabindex="0"-Attribut ermöglicht es Nutzern, den Video Player mit der Tastatur zu steuern. Der aria-labelledby-Attribut verweist auf den Titel des Videos, der als h2-Element über dem Video-Tag platziert ist.

Blog-Übersicht

Weitere Artikel