Barrierefreiheit
Video, Ton und Bewegung: was mitgeliefert werden muss
Ein Video auf der Startseite gilt als moderner Auftritt.
11 Min. Lesezeit
Von Timo Wessels Veröffentlicht am
Ein Video auf der Startseite gilt als moderner Auftritt. Es ist aber auch der Inhalt mit den meisten Voraussetzungen: Wer es nicht hören kann, braucht Text. Wer es nicht sehen kann, braucht eine Beschreibung. Wer es weder hören noch sehen will, braucht einen Schalter, um es anzuhalten.
Dieser Artikel behandelt drei Dinge, die zusammengehören: Video und Ton, automatisch laufende Bewegung wie Karusselle und Animationen, und Blinken.
Die vier Arten von Alternativen
Die Fachliteratur unterscheidet vier Wege, zeitbasierte Inhalte zugänglich zu machen. Sie werden im Alltag oft verwechselt, und die Unterschiede sind praktisch relevant:
Untertitel sind eine synchrone Textwiedergabe des Gesprochenen. Ein englischer Film mit deutschen Untertiteln. Sie helfen auch Menschen, die zwar hören, den Wortlaut aber nicht verstehen — bei undeutlicher Aussprache oder in einer fremden Sprache.
Erweiterte Untertitel (im Englischen captions) sind für gehörlose und schwerhörige Nutzer gedacht und enthalten mehr als die Sprache: relevante Geräusche, Musik, die etwas bedeutet, und die Angabe, wer gerade spricht. „[Tür fällt zu]", „[Sprecherin:]".
Transkripte sind eine vollständige Textfassung. Sie gehen über das Gesprochene hinaus und beschreiben auch wichtige Bild- und Toninhalte: Hintergrundgeräusche, bedeutsame Szenen, Gesten, die für das Verständnis entscheidend sind. Ein Transkript ist ein Dokument, kein eingeblendeter Text.
Audiodeskription ist eine zusätzliche Tonspur, die beschreibt, was zu sehen ist. Für blinde Nutzer der einzige Weg zu rein visuellen Informationen.
Dazu kommt als fünfter Weg die Gebärdensprache — eine eingeblendete Übersetzung. Das ist Stufe AAA und in der Praxis ein Sonderfall für öffentliche Stellen.
(Rheinwerk, Barrierefreie Webseiten, Kap. 7.10)
Was auf welcher Stufe verlangt wird
Die Anforderungen hängen davon ab, was das Video enthält und ob es aufgezeichnet oder live ist:
| Kriterium | Was verlangt wird | Stufe |
|---|---|---|
| 1.2.1 | Textalternative für reine Ton- oder reine Videoinhalte (aufgezeichnet) | A |
| 1.2.2 | Untertitel für aufgezeichnete Videos mit Ton | A |
| 1.2.3 | Text- oder Tonalternative für aufgezeichnete Videos mit Ton | A |
| 1.2.4 | Untertitel für Livesendungen | AA |
| 1.2.5 | Audiodeskription für aufgezeichnete Videos | AA |
| 1.2.6 | Gebärdensprache | AAA |
| 1.2.8 | Vollständige Textalternative | AAA |
Für eine normale Unternehmenswebsite heißt das praktisch: Untertitel sind Stufe A — die unterste Stufe, nicht verhandelbar. Audiodeskription ist Stufe AA.
Bei einem Imagefilm ist die Audiodeskription oft der schwierigere Teil, weil dort viel gezeigt und wenig gesagt wird. Es gibt aber einen einfachen Ausweg, den viele übersehen: Wenn alles, was im Bild passiert, ohnehin auch gesagt wird, ist keine gesonderte Audiodeskription nötig. Das lässt sich beim Drehbuch berücksichtigen — und es ist deutlich billiger, als hinterher eine zweite Tonspur zu produzieren.
Eine Anforderung aus EN 301 549, die selten genannt wird: Untertitel dürfen um höchstens 100 Millisekunden vom Ton abweichen. Untertitel, die hinterherhinken, sind für den Zuschauer ähnlich unangenehm wie ein Ton, der eine Sekunde zu spät kommt. Und für Menschen, die zusätzlich von den Lippen ablesen, sind sie unbrauchbar.
(Rheinwerk, Barrierefreie Webseiten, Kap. 7.12)
Untertitel sind nicht nur für Gehörlose
Das ist das Argument, mit dem ich Kunden tatsächlich überzeuge, und es ist gut belegt: Über 100 empirische Studien zeigen, dass Untertitel Verständnis, Aufmerksamkeit und Erinnerung verbessern — bei allen Zuschauern, nicht nur bei gehörlosen.
Wer besonders profitiert:
- Menschen, die das Video in einer Fremdsprache schauen.
- Kinder und Erwachsene, die lesen lernen.
- Und, das ist der größte Anteil: alle, die das Video ohne Ton schauen. In der Bahn, im Großraumbüro, abends neben einem schlafenden Kind. Auf Mobilgeräten läuft ein erheblicher Teil aller Videos stumm.
Untertitel sind damit einer der wenigen Punkte in diesem Feld, bei denen die Barrierefreiheitsanforderung und das wirtschaftliche Interesse exakt dasselbe verlangen.
Wie du Untertitel bekommst
Drei Wege:
Selbst schreiben oder schreiben lassen. Am genauesten, am aufwendigsten.
Automatische Spracherkennung, dann korrigieren. YouTube erzeugt Untertitel automatisch, und die lassen sich anschließend bearbeiten. Das ist der Weg, den ich für die meisten Kunden empfehle: Die Maschine macht 90 Prozent, du korrigierst Fachbegriffe, Namen und Zeichensetzung. Für ein Fünf-Minuten-Video sind das zwanzig Minuten Arbeit.
Ohne Nachbearbeitung geht es nicht. Automatische Untertitel scheitern zuverlässig an Eigennamen, Fachbegriffen und Dialekt — also genau an den Wörtern, die für dein Unternehmen wichtig sind.
Ein Dienstleister. Für rechtlich heikle oder besonders lange Inhalte.
Technisch liegt die Untertiteldatei meist im WebVTT-Format vor. Eine schlichte Textdatei mit Zeitangaben:
WEBVTT
1
00:00:01.000 --> 00:00:05.000
Willkommen zu unserer Vorstellung der Barrierefreiheitsprüfung.
2
00:00:05.500 --> 00:00:10.000
Wir zeigen Ihnen, wie der Ablauf aussieht.
Eingebunden wird sie über ein <track>-Element im Video:
<video controls>
<source src="firmenfilm.mp4" type="video/mp4">
<track kind="captions" src="untertitel.vtt" srclang="de" label="Deutsch" default>
<track kind="descriptions" src="audiodeskription.vtt" srclang="de" label="Deutsch">
</video>
Moderne Browser blenden die Untertitel dann automatisch ein, der Nutzer schaltet sie in den Bedienelementen des Videos an und aus. Das Aussehen lässt sich per CSS anpassen — achte dabei auf ausreichenden Kontrast zwischen Text und Hintergrund und darauf, dass die Untertitel lang genug stehen bleiben, um gelesen zu werden.
Wenn du dein Video bei YouTube oder Vimeo einbettest, übernimmt der Anbieter diesen Teil. Dann verlagert sich die Frage auf: Ist der Player selbst bedienbar? Das ist nicht selbstverständlich. Prüf insbesondere, ob sich der eingebettete Player vollständig mit der Tastatur bedienen lässt — und ob man wieder aus ihm heraustabben kann.
(Rheinwerk, Barrierefreie Webseiten, Kap. 7.12)
Eingebettete Videos: drei Themen auf einmal
Ein fremdgehostetes Video bringt drei Fragen mit, die man am besten zusammen entscheidet:
Ladezeit. Videodateien sind groß. Ein selbst gehostetes Video braucht einen schnellen Server, sonst ruckelt es — und auf dem Mobilfunknetz ist es dann unbrauchbar. Anbieter wie YouTube und Vimeo liefern über verteilte Server aus und passen die Auflösung automatisch an das Gerät an. Das ist ihr eigentlicher technischer Vorteil.
Bedienbarkeit. Sie liegt beim Anbieter. Was du nicht selbst gebaut hast, kannst du auch nicht selbst reparieren.
Datenschutz. Ein eingebettetes Video baut eine Verbindung zum fremden Server auf, sobald die Seite lädt — mit allem, was dabei übertragen wird. Das braucht eine datenschutzkonforme Einbindung, in der Regel über eine Einwilligung, bevor überhaupt geladen wird. Dazu gibt es einen eigenen Artikel.
Für kurze Videos auf einer kleinen Website ist Selbsthosten oft der einfachere Weg — man spart die Einwilligungsfrage komplett. Bei längeren oder vielen Videos gewinnt der Anbieter.
Bewegung, die von selbst anfängt
Erfolgskriterium 2.2.2 „Pausieren, beenden, ausblenden", Stufe A.
Die Regel greift, wenn alle drei Bedingungen zutreffen: Etwas bewegt, blinkt oder scrollt, es startet automatisch, es dauert länger als fünf Sekunden, und es wird parallel zu anderen Inhalten angezeigt. Dann muss es einen Weg geben, es anzuhalten, zu beenden oder auszublenden.
Was darunterfällt:
- Bildkarusselle auf der Startseite, die automatisch weiterschalten.
- Laufschriften und Nachrichtenticker.
- Animierte Hintergründe und Videoschleifen im Kopfbereich.
- Einblendungen wie „Gerade schauen sich 10 Personen dieses Angebot an".
- Animierte GIFs, die dauerhaft laufen.
Warum das mehr als eine Formalität ist: Bewegung zieht den Blick — evolutionär bedeutet Bewegung Gefahr. Für Menschen mit Aufmerksamkeitsstörungen, mit bestimmten kognitiven Einschränkungen und für alle, die sich beim Lesen leicht ablenken lassen, ist ein automatisch laufendes Karussell neben dem Text eine echte Barriere. Man kann nicht wegschauen.
Die einzige Ausnahme: Die Bewegung ist wesentlicher Teil einer Handlung — etwa ein Countdown beim Online-Banking, der anzeigt, wie lange die Sitzung noch läuft.
Die Lösung bei einem Karussell: eine deutlich sichtbare Pause-Schaltfläche über oder unter dem Karussell, die die automatische Weiterschaltung anhält und dann zu „Abspielen" wechselt. Zusätzlich ist eine Stopp-Schaltfläche sinnvoll, die dauerhaft beendet.
Meine ehrliche Empfehlung dazu: In den meisten Fällen ist der bessere Umbau, das Karussell wegzulassen. Automatisch weiterschaltende Startseiten-Slider gehören zu den Bausteinen mit dem schlechtesten Verhältnis von Aufwand zu Wirkung — sie kosten Ladezeit, machen Arbeit bei der Bedienbarkeit, und die zweite und dritte Folie sieht kaum jemand. Ein einzelnes gutes Bild mit einer klaren Aussage wirkt stärker.
(Rheinwerk, Barrierefreie Webseiten, Kap. 8.1)
Blinken
Erfolgskriterium 2.3.1 „Dreimaliges Blitzen oder unterhalb des Schwellwerts", Stufe A: Nichts auf der Seite darf mehr als dreimal pro Sekunde blitzen — es sei denn, das Blitzen liegt unterhalb der festgelegten Schwellwerte für Fläche und Helligkeit.
Der Grund ist ernst: Blitzendes Licht kann bei Menschen mit photosensitiver Epilepsie einen Anfall auslösen. Die meisten Betroffenen erfahren erst durch den ersten Anfall von ihrer Erkrankung. Das bekannteste Ereignis dazu: 1997 wurden in Japan über 700 Kinder nach einer Zeichentricksendung ins Krankenhaus gebracht, etwa 500 davon mit Anfällen.
Die Schwellwerte für die Ausnahme sind kompliziert — sie rechnen mit Raumwinkeln und Sichtfeldern. Für Bildschirminhalte gilt als Näherung: ein Rechteck von 341 × 256 Pixeln bei einer Auflösung von 1024 × 768 entspricht etwa einem 10-Grad-Sichtfeld.
Weil das praktisch niemand ausrechnet, ist die strengere Fassung auf Stufe AAA (Kriterium 2.3.2) die einfachere und vernünftigere Regel: nicht mehr als dreimal blitzen oder blinken pro Sekunde, unabhängig von Helligkeit und Fläche.
Praktisch: Prüf Videos, Animationen und GIFs darauf, dass nichts schneller als dreimal pro Sekunde blinkt. Wer es genau wissen will, kann das PEAT-Werkzeug der University of Maryland verwenden — es liest allerdings nur das AVI-Format, die Datei muss also umgewandelt werden.
Für die meisten Unternehmenswebsites ist dieser Punkt unkritisch. Relevant wird er bei Werbevideos mit schnellen Schnitten und bei Animationen im Kopfbereich.
(Rheinwerk, Barrierefreie Webseiten, Kap. 7.6)
Wie du das selbst prüfst
Ton aus. Schau dein Video ohne Ton. Verstehst du, worum es geht? Wenn nicht, fehlen Untertitel.
Bild aus. Hör dein Video, ohne hinzusehen. Fehlt dir etwas Wichtiges? Dann brauchst du eine Audiodeskription — oder du änderst den Text so, dass das Gezeigte auch gesagt wird.
Untertitel gegenlesen. Falls automatisch erzeugt: einmal komplett durchlesen. Firmennamen, Produktnamen und Fachbegriffe sind zuverlässig falsch.
Der Tastaturtest am Player. Tab bis zum Video, dann versuchen: abspielen, pausieren, Lautstärke, Untertitel an, wieder heraustabben. Bei eingebetteten Playern scheitert das häufiger als bei selbst gehosteten.
Die Fünf-Sekunden-Frage. Geh deine Startseite durch und schau, was sich bewegt, ohne dass du etwas getan hast. Für jedes davon: Gibt es einen Weg, es anzuhalten?
Der Stoppuhr-Blick auf Animationen. Alles, was schneller als dreimal pro Sekunde wechselt, gehört überprüft.
Was zu tun ist
Untertitel zuerst. Sie sind Stufe A, sie helfen allen, und sie sind mit automatischer Erkennung plus Korrektur in überschaubarer Zeit gemacht.
Ein Transkript dazu, wenn es sich anbietet. Ein Transkript unter dem Video ist zusätzliche Arbeit, hat aber einen Nebeneffekt, der oft unterschätzt wird: Es ist Text, den Suchmaschinen und KI-Systeme lesen können. Der Inhalt deines Videos existiert für sie sonst nicht.
Karusselle abschalten oder mit Pause-Schaltfläche versehen. Ersteres ist meist besser.
Bei automatisch startendem Ton: nicht tun. Es gibt dafür keinen guten Grund, und Browser unterbinden es zunehmend von selbst.
Und beim nächsten Video: Denk die Untertitel beim Dreh mit, nicht danach. Wer das Skript ohnehin schreibt, hat den Untertiteltext schon fast fertig. Und wer beim Schreiben darauf achtet, dass gesagt wird, was gezeigt wird, spart sich die Audiodeskription ganz.
Quellen
- Rheinwerk, Barrierefreie Webseiten, Kap. 7.10 (Zeitbasierte Medien) — die fünf Arten zeitbasierter Medien, die vier Wege der Alternativbereitstellung, die Abgrenzung zwischen Untertiteln, erweiterten Untertiteln und Transkripten mit ihren jeweiligen Inhalten, und der Befund aus über 100 empirischen Studien, dass Untertitel Verständnis, Aufmerksamkeit und Erinnerung bei allen Zuschauern verbessern (Gernsbacher, Video Captions Benefit Everyone).
- Rheinwerk, Barrierefreie Webseiten, Kap. 7.12 (Video) — die vollständige Zuordnung der Erfolgskriterien 1.2.1 bis 1.2.9 zu ihren Konformitätsstufen, die drei Nachteile von Video (Ladezeit, Einbettung, Datenschutz) und der Grund, warum Anbieter wie YouTube und Vimeo technisch im Vorteil sind, die Anforderung aus EN 301 549 Kap. 7 zur Erhaltung der Alternativen bei Formatumwandlung und zur Abweichung von höchstens 100 Millisekunden, die drei Wege zur Erstellung von Untertiteln samt der Notwendigkeit, automatische Erkennung nachzubearbeiten, das WebVTT-Format mit Beispiel, die Einbindung über
<track>, die Hinweise zu Kontrast und Lesezeit der Untertitel, und der Hinweis auf die Lippensynchronität. - Rheinwerk, Barrierefreie Webseiten, Kap. 7.6 (Blitzen und Blinken) — die Unterscheidung zwischen Blitzen und Blinken, photosensitive Epilepsie und das Ereignis von 1997 in Japan mit über 700 betroffenen Kindern, WCAG 2.3.1 mit dem Schwellwert von drei Blitzen pro Sekunde und der Flächennäherung 341 × 256 Pixel bei 1024 × 768, die strengere Fassung 2.3.2 auf Stufe AAA, und das PEAT-Werkzeug samt seiner Beschränkung auf das AVI-Format.
- Rheinwerk, Barrierefreie Webseiten, Kap. 8.1 (Navigation) — WCAG 2.2.2 mit den drei Bedingungen automatischer Start, Dauer über fünf Sekunden und parallele Anzeige, die Beispiele Karussell und Einblendungen, die Begründung über die Wirkung von Bewegung auf die Aufmerksamkeit, die Ausnahme für wesentliche Bewegung am Beispiel eines Sitzungs-Countdowns, und die Lösung über Pause- und Stopp-Schaltflächen.
- Atlas,
accessibility/criteria/— Einordnung der genannten Erfolgskriterien nach Prinzip, Richtlinie und Konformitätsstufe. - Eigene Prüfpraxis — die Empfehlung, Audiodeskription durch ein Drehbuch zu vermeiden, in dem gesagt wird, was gezeigt wird, die Einschätzung zu Selbsthosten gegenüber Einbetten bei kleinen Websites, die Einordnung automatisch laufender Startseiten-Slider, die Prüfschritte Ton-aus und Bild-aus, der Tastaturtest am eingebetteten Player, und der Hinweis auf den Nutzen eines Transkripts für Suchmaschinen und KI-Systeme.