Veröffentlichungen Leitfäden Multimedia Gestaltung
Dieser Artikel demonstriert exemplarisch die barrierefreie Umsetzung eines Web-Videos. Es soll eine Untertitelung für Gehörlose/Schwerhörige und eine Audio-Deskription für Blinde und Sehbehinderte enthalten. Eine DGS-Version wird dabei nicht beachtet.
Die Untertitelung wird als(Closed Caption) umgesetzt. Somit können Anwender entscheiden, ob sie sich das Video mit ein- oder ausgeblendeter Untertitelung anschauen möchten.
Auch die Audio-Deskription wird optional sein, die Anwender können also entscheiden, ob sie sie hören möchten oder nicht.
Anhand dieser Beispielumsetzung erlangt der Leser einen Eindruck darüber, mit welchem Aufwand eine Untertitelung und eine Audio-Deskription typischerweise verbunden ist.
Dieser Artikel demonstriert exemplarisch die barrierefreie Umsetzung eines Web-Videos. Es soll eine Untertitelung für Gehörlose/Schwerhörige und eine Audio-Deskription für Blinde und Sehbehinderte enthalten. Eine DGS-Version wird dabei nicht beachtet.
Die Untertitelung wird als(Closed Caption) umgesetzt. Somit können Anwender entscheiden, ob sie sich das Video mit ein- oder ausgeblendeter Untertitelung anschauen möchten.
Auch die Audio-Deskription wird optional sein, die Anwender können also entscheiden, ob sie sie hören möchten oder nicht.
Anhand dieser Beispielumsetzung erlangt der Leser einen Eindruck darüber, mit welchem Aufwand eine Untertitelung und eine Audio-Deskription typischerweise verbunden ist.
Da das Video für eine Präsentation im Internet gedacht ist, sollte das weit verbreitete Flash-Video-Format (Dateiendung .flv) verwendet werden. Es gibt eine Reihe von Argumenten, die dafür sprechen. Dazu gehören:
Adobe-Statistiken gehen von einer mehr als 98%-igen Verbreitung ihres Flash-Plugins aus und auch Javascript ist für die Nutzung von Web2.0-Anwendungen unerlässlich).
Zwar existieren zahlreiche kostenfreie Player zum Abspielen von Flash-Videos, die man auf Webseiten einbinden kann, aber nur wenige berücksichtigen Aspekte der Barrierefreiheit.
In diesem Tutorial wird der von Jeroen Wijering entwickelte JW FLV Player verwendet (siehe auch Formate und Technik).
Der Player bietet die folgenden für diesen Kontext relevanten Besonderheiten:
Im Folgenden wird das generelle Vorgehen zur Erstellung von Untertiteln und Audio-Deskriptionen vorgestellt.
Eine Untertitelung richtet sich primär an Gehörlose und Schwerhörige. Aber auch fremdsprachige Zuschauer oder Betrachter in einer lauten Umgebung können vom Mehrwert einer Untertitelung profitieren. Untertitel enhalten akustische Elemente (gesprochene oder gesungene Sprache, Ereignisse wie das Klingeln eines Telefons und weitere) des Videos in einer optisch lesbaren Alternative. So kann der Inhalt auch ohne Ton nachvollzogen werden.
Für die Untertitelung unterstützt der JW FLV Player sogenannten Timed Text. Dabei handelt es sich um eine von einer W3C-Arbeitsgruppe aktuell entwickelten Spezifikation zur Synchronisation von Text mit anderen Medien wie Video oder Audio.
Timed Text basiert auf einem XML-Dialekt und stellt daher ein interoperatibles Textformat für die diversen proprietären und teilweise zueinander inkompatiblen Untertitel-Formate (zum Beispiel Microsofts "SAMI" oder Apples "Quicktime Text") dar.
Zur Erstellung von Timed Text-Dateien existieren sowohl Werkzeuge, die lokal auf dem Rechner installiert werden müssen (zum Beispiel MAGpie, als auch online, wie beispielsweise das Flash-basierte Tool " Subtitle horse".
Eine Audio-Deskription richtet sich an blinde und sehbehinderte Zuschauer. Sie enthält für das Verständnis des Videos relevante Informationen, die ausschließlich visuell im Video enthalten sind (z.B. Bewegungen (Mimik, Gestik) der Darsteller, in einer akustisch wahrnehmbaren Alternative.
Zur Synchronisierung von Inhalten wurde vom W3C der Standard SMIL (Synchronized Multimedia Integration Language) entwickelt. Leider wird dieser Standard durch den JW FLV Player nur für die Generierung von Playlists unterstützt. Daher muss die Audio-Deskription synchron zum angesehen Video eingesprochen werden.
Für die Aufnahme von Audio existieren zahlreiche kostenfrei erhältliche Programme. Alternativ kann auch der in Windows integrierte Recorder verwendet werden.
Der JW FLV Player unterstützt alle gängigen Audioformate wie wave (.wav), MP3, Ogg Vorbis (.ogg) und zahlreiche weitere. Um die Dateigröße möglichst gering zu halten, sollten Audioformate mit starker Komprimierung wie MP3 oder Ogg Vorbis verwendet werden.
Das Erzeugen einer Player-Instanz folgt dem Schema, das im Tutorial des Projekts zur Einbindung des Flash-Players vorgestellt wird. Es basiert im Wesentlichen auf einer von Geoff Stearns entwickelten Lösung zur Integration von Flash-Elementen in XHTML-Seiten.
Dazu sollten Sie sich zuerst das Skript "swfobject.js" herunterladen und es über das folgende XHTML-Konstrukt in den head>-Bereich Ihrer Seite einbinden.
<!-- Javascript zur Flash-Integration -->
<script type="text/javascript" src="/swfobject.js"></script>
Vergeben Sie im nächsten Schritt dem HTML-Element, dass den Player enthalten soll, eine eindeutige id. Im folgenden Beispiel wird ein div-Container verwendet und ihm die ID "beispiel" zugewiesen.
<div id="beispiel">
Dieser Inhalt wird durch den Flash-Player ersetzt
</div>
Im letzten Schritt zur Integration des Flash-Players in das XHTML-Gerüst, wird ein Objekt instanziiert und dieses mit notwendigen Parametern belegt. Eine Auflistung aller verwendbaren Parameter kann im Wiki des Projekts nachgelesen werden.
<script type="text/javascript">
var instance = new SWFObject('player.swf', 'playerId', '500', '300', '9');
instance.addParam('allowfullscreen', 'true');
instance.addParam('flashvars','file=video.flv&autostart=true');
instance.addVariable('image', 'images/mediaplayer/files/preview.jpg'); //Vorschaubild
instance.write('beispiel');
</script>
Die Instanz wird den benötigten Code erstellen und an der gewünschten Stelle (beispiel) einfügen. Das Objekt wird 500 x 300 Pixel groß sein und auch Flash-Variablen wie etwa das abzuspielende Video und ein Vorschaubild ('image') werden gesetzt.
Im Folgenden sehen Sie als Resultat dieser Umsetzung den in die XHTML-Seite eingebundenen Player, der ein Video abspielt, aber keinerlei Funktionen zur Erhöhung der Zugänglichkeit bietet. Das Beispielvideo ist Bestandteil der Sammlung von Open Source Movies.
Nachdem das Video integriert ist, sollen nun auch eine Untertitelung und eine Audio-Deskription hinzugefügt werden. Damit der Player auch ausschließlich per Tastatur nutzbar ist, soll der Player zuletzt noch über das API ferngesteuert werden.
Für die Untertitelung wird das im Abschnitt über Formate für die Untertitelung vorgestellte Verfahren mittels Timed Text verwendet. Als Werkzeug für die Erzeugung kam das Flash-basierte Tool " Subtitle horse" zum Einsatz.
Sie können sich die für das Video erstellte XML-Datei anschauen. In dieser Umsetzung wurden nur Funktionen zur synchronen Ausgabe des Texts genutzt. Weitergehende Funktionen, die Timed Text bietet, wie etwa eine Formatierung des Untertitel-Texts wurden nicht genutzt. Informationen zu diesen Funktionen sind auf den Seiten der Arbeitsgruppe des W3C zu finden.
Um die Untertitel-Datei in das Video einzubetten, muss sie dem Player bei dessen Aufruf bekannt gemacht werden. Dies geschieht über folgendes Javascript:
<script type="text/javascript">
//Setzt Pfad zur TT-Datei
instance.addVariable('captions', PFAD_ZU_TT_DATEI);
//Bestimmt die Anzeige-Größe des Untertitel-Texts im Video
instance.addVariable('accessibility.fontsize', '15');
</script>
Im Folgenden sehen Sie das vorherige Video mit einem optional zuschaltbaren Untertitel (Player-Bedienelement "CC").
Da der Text in der derzeitigen Fassung lediglich innerhalb des Videos angezeigt wird, können schlecht sehende Zuschauer, den Text nicht ihren Bedürfnissen anpassen. Schöner wäre es, wenn der Text auch innerhalb der HTML-Seite angezeigt würde, damit er durch ein User-Stylesheet den individuellen Bedürfnissen angepasst werden kann.
Tatsächlich bietet der JW FLV Player diese Möglichkeit. Dazu ergänzt man einfach den Aufruf des Players um das folgende Element:
<script type="text/javascript">
//Aktiviert Accessibility Listener und fügt Funktion hinzu
instance.addVariable('accessibility.listener', xhtmlUntertitel');
</script>
Der Accessibility Listener "lauscht" auf Aktivitäten an der Untertitel-Schnittstelle und kann diese an eine frei definierbare Funktion - in diesem Fall xhtmlUntertitel genannt - weiterreichen. Diese Funktion kann den erhaltenen Untertitel-Text per DHTML dynamisch in die HTML-Seite laden.
Im Folgenden wird eine mögliche Umsetzung dieser Funktion in Javascript vorgestellt.
<script type="text/javascript">
function xhtmlUntertitel(txt)
{
document.getElementById('untertitel')
.firstChild.nodeValue = txt;};
</script>
Der Funktion xhtmlUntertitel wird der Untertitel-Text als Parameter "txt" übergeben. Der HTML-Quelltext muss einen Container enthalten, in den die Funktion den Untertitel-Text einbetten kann und der über eine eindeutige ID referenzierbar ist. Um die Bedeutung des zu Beginn leeren Containers zu verdeutlichen, kann er noch mit einer Initialisierung ausgestattet werden.
Eine Beispielumsetzung:
<div id="untertitel" class="untertitel">
<-- Initialisierung -->
Hier erscheint der Untertitel-Text
</div>
Zur Positionierung und Gestaltung des Untertitel-Containers kann CSS verwendet werden. Für dieses Beispiel wurde die im Folgenden vorgestellte Formatierung verwendet:
div.untertitel {
width: 420px;
min-height: 30px;
padding: 5px;
font-size: 1.1em;
font-weight: bold;
font-family: arial;
color: #000;
border: solid 1px #814f36;
background-color: #FFF;
margin: 0 auto;
}
Im Folgenden sehen Sie das vorherige Beispiel-Video mit einer Untertitelung außerhalb des Videos.
Nach der Untertitelung erfolgt nun im nächsten Schritt die Audio-Deskription. Zuvor allerdings muss man bewusst machen, dass gerade Blinde aber auch motorisch eingeschränkte Menschen und "Mausmuffel" auf Webseiten per Tastatur navigieren. Leider ist es zum Beispiel im Firefox nicht möglich, Bedienelemente einer Flash-Anwendung per Tastatur zu bedienen ohne zuvor eben jene Flash-Anwendung durch einen Mausklick darauf zu aktivieren (im Internet Explorer geht es dagegen schon).
Daher ist es zuerst erforderlich über das Application Program Interface (API) des Players eine Tastatur-Bedienung in allen Browsern zu ermöglichen. Das API wird im Entwicklerbereich vorgestellt, für dieses Beispiel reicht der Abschnitt über das Absetzen von Befehlen per "Send".
<div id="tabs">
<ul class="player_controls">
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('PLAY');"> Spielen/pausieren </a>
</li>
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('MUTE');"> Ton an/aus </a>
</li>
<li>
<a href="#player" onclick="document.getElementById('playerID')
.sendEvent('STOP');"> Stop </a>
</li>
<li>
<span>Lautstärke: <input type="text" value="" name="value" id="value" maxlength="3" size="3" onkeyup="document.getElementById('playerID')
.sendEvent('VOLUME', this.value);"/>%
</span>
</li>
</ul>
</div>
Im obigen Beispiel wurden die Befehle für das Abspielen/Pausieren, stumm/laut schalten und das Stoppen des Videos durch einfache Hyperlinks realisiert. Bei der Auswahl eines dieser Links wird ein Javascript-Event ausgelöst und damit an die Player-Instanz über die Methode sendEvent ein Befehl abgesetzt. Das Vorgehen für das Einstellen der Lautstärke verläuft ähnlich, nur das hier statt eines Hyperlinks ein Formular-Element verwendet wird.
Durch CSS soll diese Liste noch in eine ansehnliche Form gebracht werden. Eine beispielhafte Umsetzung wäre die Folgende:
#tabs ul {
margin: 2px auto;
padding: 0;
width: 420px;
line-height: 1.2em;
}
#tabs ul li {
list-style: none;
display: inline;
margin-left: 0;
}
#tabs ul li a:link,
#tabs ul li a:visited,
#tabs ul li span {
border: 1px solid #88503e;
padding: 2px 5px;
background: #FFF;
color: #000;
text-decoration: none;
}
#tabs ul li a:hover,
#tabs ul li a:focus,
#tabs ul li a:active {
background: #88503e;
text-decoration: underline
border-bottom: 0px;
color: #fff;
}
Wird der Player um diese Liste ergänzt, ergibt sich die folgende Gesamtansicht:
Nun, da der Player auch per Tastatur bedient werden kann, soll das Video noch um eine beschreibende Audio-Spur ergänzt werden. Wie bereits erwähnt, unterstützt der Player zahlreiche Audio-Formate. In diesem Beispiel soll eine MP3-Datei verwendet werden.
Zur Aufzeichnung existieren zahlreiche Programme, auch kostenlose sind nach einer Suche im Internet schnell zu finden.
Das Einbinden der beschreibenden zusätzlichen Tonspur erfolgt durch einen kleinen Aufruf bei der Instanziierung des Player-Objekts. Dazu muss der Instanz durch Aufruf der Methode addVariable nur der Pfad zur Audio-Datei, die die Audio-Deskription enthält, bekannt gemacht werden. Zusätzlich kann noch die Lautstärke der Audio-Deskription über einen Parameter prozentual angegeben werden, im folgenden Beispiel wird die Lautstärke auf 80 Prozent begrenzt.
<script type="text/javascript">
//Einbinden der Audio-Deskription
instance.addVariable('audio', PFAD_ZU_AUDIO_FILE);
//Lautstärke der Audio-Deskription in Prozent bestimmen
instance.addVariable('accessibility.volume', '80');
</script>
Zuletzt soll noch kurz der Aufwand zur barrierefreien Gestaltung eines Videos diskutiert werden.
Der Aufwand für die Untertitelung ist als (sehr) gering zu betrachten. Insbesondere wenn dem Video ein (elektronisches) Drehbuch zugrunde liegt, kann sich die Arbeit für die Untertitelung - zumindest für die gesprochene Sprache - auf bloßes Copy and Paste beschränken, da lediglich die Zeitinformationen hinzugefügt werden müssen. Müssen die Texte erst noch elektronisch aufbereitet werden, steigt der Aufwand. Im allgemeinen kann man für die Untertitelung etwa die 3 bis 4-fache Zeit des Videos einplanen.
Anders verhält es sich bei der Audio-Deskription: Da nicht auf bereits elektronisch vorliegendes Material zurückgegriffen werden kann, muss die gesamte Information, die im Video ausschließlich visuell transportiert wird, zuerst identifiziert und dann wiedergegeben werden. Obendrein ist es bei vielen Videos schwierig, Sprechpausen der Darsteller zu finden, die dazu geeignet sind, die Audio-Deskription dazwischn einzubetten.
Generell zeigt sich, dass die Erstellung einer guten Audio-Deskription stark von den Kenntnissen und der Erfahrung des Sprechers/der Sprecherin abhängt, da dabei sehr viele Regeln und Hinweise zu beachten sind.
Der Zeitaufwand für die Audio-Deskription ist daher nicht einmal grob zu quantifizieren, aber er ist um einiges größer als der Aufwand, der für die Untertitelung zu erbringen ist.
Alle im Rahmen dieses Tutorials eingesetzten Scripte und Dateien sind 
in einem Archiv gepackt erhältlich. Dieses Archiv enthält im Einzelnen:
bei longtailvideo.com erhältlich) Internet-Archiv)Beachten Sie für eine lokale Verwendung dieser Beispiele, dass stets eine komplette Webserver-Umgebung bereitstehen muss. Apachefriends.org bieten mit XAMPP ein kostenloses "Rundum-sorglos-Paket" an.
Abschließend wünschen wir Ihnen viel Spaß und Erfolg beim Ausprobieren und wenden Sie sich bei Fragen per Mail an uns!