Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Ein barrierefreier? Online Video Player

Dieser Artikel ist veraltet.
Die Demoseite verwendet HTML5 Video, und kein Flash!

Ein pragmatischer Ansatz

In Webseiten eingebettete Flash Video Player gibt es wie Sand am Meer. Und manchmal machen Videos auf Webseiten sogar Sinn.

Flash hat für diesen Zweck gegenüber allen anderen Formaten einige Vorteile. Der wichtigste ist wohl die plattformübergreifende Verbreitung von Flash (Adobe selbst spricht von mehr als 98%). Darüber hinaus lassen sich die meisten Formate beim Konvertieren zu Flash nochmals komprimieren. Ein wichtiger Aspekt, auch in Zeiten von DSL.

Aber wie sieht es mit der Barrierefreiheit aus?

Ich will mich in diesem Zusammenhang auf 2 wesentliche Aspekte der Barrierefreiheit beschränken:

  1. Kann der Player ohne Maus, also ausschließlich mit der Tastatur bedient werden?
  2. Kann der Player auch mit einem Screen Reader bedient werden (Ja. Blinde Menschen können mit den Inhalten von Videos auch etwas anfangen. Sie sehen sogar fern.)

Die Vorarbeiten:

  1. Aus dem Video (mpeg, avi o. ä.) einen Flash Film im *.flv Format erstellen.
  2. Ein Container *.swf mit Steuerung (Start - Stop - Pause) erstellen.
    Diese beiden Schritte erledigen entsprechende Programme, z. B. von Adobe (früher Macromedia). Oder preiswerte und leichter zu erlernende Tools wie z. B. Flash Video Studio 2.0
  3. Das *.swf in die Webseite einbinden: der erste Schritt zu einem barrierefreien Player.

Das war es auch schon.

Jetzt zur Praxis

Ein solchermaßen erstellter Player kann in der Regel mit der Tastatur bedient werden. Und wenn der Ersteller des Containers oder das entsprechende Tool das vorgesehen hat - was selten genug der Fall ist - dann kann man sogar mit einem Screen Reader die Beschriftung der jeweiligen Schalter lesen.

Zumeist jedoch ist das Flash für Screen Reader Nutzer gänzlich unsichtbar. Erklärung hierfür weiter unten.

Oder aber alle Buttons sind einheitlich mit dem Vorgabewert "Schalter" beschriftet; nicht sehr hilfreich.

Auch die von meinem Tool "Video Studio" erstellten Container *.swf haben leider die vorgenannten Probleme. Deshalb benutze ich Video Studio nur zum Konvertieren nach *.flv, und benutze den Container von Zanmantou.

Der Zanmantou Flash Player kann mit einer Konfigurationsdatei im xml Format sehr komfortabel konfiguriert werden. Dazu auf der nächsten Seite mehr.

So weit, so gut. In Gecko basierten Browsern (Firefox, Mozilla, Netscape) passiert nun leider etwas ganz Unangenehmes: Der Tastaturfocus bleibt im Flash hängen, weiteres Navigieren auf der Seite mit der Tastatur ist nicht mehr möglich. Im Web findet man gegen dieses Verhalten den Hinweis, dem <object> Tag den style="-moz-user-focus:ignore;" zuzuweisen. Das ist die brutale Methode, nach dem Motto: "Wer nicht mehr raus kommt, darf erst gar nicht rein!". und hilft uns nicht weiter.

Also:
Den Flash Film, das Container *.swf, "von aussen" per Javascript steuern. Mit Flash Action Scripting und einer passenden Javascript API (Zanmantoo) ist das möglich.

Nachdem jetzt die Geckos bedient sind, zum Internet Explorer:
Der hat, wie nicht anders zu erwarten, eine Besonderheit:
"Klicken Sie hier um dieses Steuerelement zu aktivieren"
Häufig sehen Screen Reader Nutzer diesen Hinweis entweder gar nicht, oder sie können nicht "klicken zum Aktivieren". Und bleiben wieder einmal draußen.
Aber pfiffigerweise liefert Microsoft selbst die Anleitung, wie man das von ihnen geschaffene Problem wieder beheben kann.

Das Ergebnis

Was haben wir erreicht?

  • Bedienbarkeit nur mit der Tastatur in allen modernen Browsern
  • Weitestgehende Zugänglichkeit mit Screen Readern
    Getestet wurde der Player u. a. mit:
    • Jaws 7.1/WinXP SP 2 IE6 und Firefox 2.0
    • Jaws 8/Vista
    • Window Eyes
    • WebFormator 2.3/WinXP SP2 IE6 und 7
    • Dolphin Hal 7/WinXP IE6 und Firefox
    • Dolphin Hal 8/Vista
    • Blindows 3/WinXP IE6 und Firefox
  • Völlige Gestaltungsfreiheit bei den Buttons:
    • als Text, auch lokalisierbar mittels externer Sprachdatei
    • als Grafik mit entsprechendem Alt-Text
    • alle Gestaltungsmöglichkeiten per CSS, auch Style Switching
  • Der Zustand der Buttons (focus, hover, active) kann per CSS sichtbar gemacht werden.
  • beliebiges Standbild vor dem Start des Videos als Hintergrundbild
  • Einschränkung:
    Der Player benötigt ein Flash Plugin ab Version 8.
    Und aktiviertes Javascript.
    Damit ist diese Lösung nicht barrierefrei im Sinne der WAI oder BITV.
    Anmerkung: WCAG 2.0 wird aktuelle technische Entwicklungen berücksichtigen, und von dieser Einschränkung Abstand nehmen.

Feedback

Ich freue mich über Kritik, Anregungen und Hinweise auf Fehler in meinem Blog