Videos

Reines HTML5 <video>

→ Beispiel: index.html

Source Code:

<video id='video1' width="420"  height="315" poster='media/wwa.jpg' controls>
	<source src='media/wwa.mp4' type="video/mp4">
	<source src='media/wwa.ogv' type="video/ogg">
	<source src='media/wwa.m4v' type="video/webm">
</video>

Zu beachten:

Der Videofilm muss per Tastatur bedienbar sein.

Falls es das Video-Material hergibt, müsste ein barrierefreier Player weitere Features unterstützen:

Untertitel:
Audiodeskription:
Gebärdensprache:
Transkiption:
Kapitelauswahl:
Gesprochener Text als Untertitel im Film, wie im Kinoein Sprecher beschreibt im normalen Tonkanal, was im Bild zu sehen istGebärdensprache-Übersetzer in separatem FensterText in sep. Fenster, der synchron das gesamte Video beschreibt, d.h. Bild und Tonfalls Video-Metadaten vorhanden
 

Able Player

Barrierefreier Player:

→ Demo: ableplayer.html

Source Code:

Head:

<script src="js/modernizr.custom.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script src="js/ableplayer/ableplayer.min.js" type="text/javascript"></script>
<link  href="js/ableplayer/styles/ableplayer.min.css" type="text/css" rel="stylesheet">

Body:

<video id="video1" data-able-player data-translation-path="ableplayer/translations/ preload="auto" width="420" height="315" poster="media/wwa.jpg">
	<source data-desc-src="media/wwa_described.mp4" data-sign-src="media/wwa_sign.mp4" src='media/wwa.mp4' type='video/mp4'>
	<source data-desc-src="media/wwa_described.webm" data-sign-src="media/wwa_sign.webm" src='media/wwa.m4v' type='video/webm'>
	<track kind='captions' src='media/wwa_captions_de.vtt' srclang='de' label='Deutsch'>
	<track kind='captions' src='media/wwa_captions_en.vtt' srclang='en' label='English'>
	<track kind='captions' src='media/wwa_captions_es.vtt' srclang='es' label='Espanol'>
	<track kind='chapters' src='media/wwa_chapters_de.vtt' srclang='de' label='Deutsch'>
	<track kind='chapters' src='media/wwa_chapters_en.vtt' srclang='en' label='English'>
	<track kind='chapters' src='media/wwa_chapters_es.vtt' srclang='es' label='Espanol'>
	<track kind='descriptions' src='media/wwa_description_de.vtt' srclang='de' label='Deutsch'>
	<track kind='descriptions' src='media/wwa_description_en.vtt' srclang='en' label='English'>
	<track kind='descriptions' src='media/wwa_description_es.vtt' srclang='es' label='Espanol'>
</video>
 

A guide to using subtitles, captions and transcripts for accessibility [https://bighack.org/subtitles-closed-captions-transcripts-and-accessibility/]

 
 

Barrierefreies Web