-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvideo.html
More file actions
148 lines (134 loc) · 9.41 KB
/
video.html
File metadata and controls
148 lines (134 loc) · 9.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Accessibility</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body, html {
margin: 0;
top: 0;
}
h1 {
text-align: center;
margin-top: 0; /* Removes the push from the top */
}
h2 {
text-align: center;
}
body {
background-color: #CFCFCF;
}
.wrapper {
width: 60%;
margin-left: auto;
margin-right: auto;
padding: 10px;
background-color: #FFF;
}
.video-wrapper {
width: 80%;
height: auto;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Video Accessibility</h1>
<h2>Players</h2>
<p>The following video players were built with the intent of being accessible:</p>
<ul>
<li><a href="https://ableplayer.github.io/ableplayer/ ">Able Player</a></li>
<li><a href="https://www.accessibilityoz.com/ozplayer/ ">OzPlayer</a></li>
<li><a href="https://github.com/sampotts/plyr ">Plyr</a></li>
</ul>
<p>When considering any commercial video player, clients must ask platform vendors for a statement of conformance with applicable WCAG and/or Section 508 standards. This will help better understand the risks involved with potential use.</p>
<h2>Terms</h2>
<h3>Captions</h3>
<p>Captions are intended for individuals who are deaf or hard of hearing however they have applications that benefit everyone. The example I like to give with clients is that televisions in loud areas like bars or airports typically have captions on to allow people to get information despite the noisy environment. Captions can either be open or closed.</p>
<ul>
<li>Closed captions can have their visibility toggled by users. This is typically done via a [CC] button within player controls.</li>
<li>Open captions are always visible and can't be disabled. They are part of the video.</li>
</ul>
<p>I've been with organizations that have used <a href="https://www.3playmedia.com/">3Play Media</a> for captioning and live transcription and have been impressed with their services.</p>
<h3>Subtitles</h3>
<p>Subtitles are a translation of the audio into another language. As with Captions, these can also be Open or Closed. These are not an accessibility feature as they are intended to translate rather than interpret.</p>
<h3>Audio Description</h3>
<p>Audio Description is an audible narration that describes significant visual aspects of the content. The audio description never interrupts dialog and instead spoken within gaps of dialog. The following video is an excellent example of audio description:</p>
<div class="video-wrapper" style="display: flex; justify-content: center;">
<iframe width="560" height="315" src="https://www.youtube.com/embed/peDy2st2XpQ?si=G2qGzDZKkDfWiLpI" title="Self-Driving Car Test: Steve Mahan (Audio Described)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<h3>Self-described Videos</h3>
<p>Self-described videos are those where the information is all conveyed or explained through both the audio and video. This can either be done by narration or it can be part of the dialog.</p>
<ul>
<li>Narration example: The end of an advertisement video visually displays a website address. The audio track includes a narrator announcing "Go to the address www . some address . com for more information".</li>
<li>Dialog example: A tutorial video where the instructor verbally describes each step as they are performing them.</li>
</ul>
<h3>Transcript</h3>
<p>A transcript is a textual alternative to the multimedia content. Transcripts include the spoken dialog as well as descriptions of non-speech information such as sound effects or laughter. Not only is the dialog displayed but it also identifies the speaker each time the speaker changes to ensure users can identify who is speaking.</p>
<ul>
<li><a href="https://www.npr.org/transcripts/121986560">Example Transcript - NPR Interview with Tracy Morgan</a></li>
</ul>
<h2>Applicable Standards</h2>
<h3>WCAG 2.2</h3>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html">SC 1.2.1 Audio-only and Video-only (Prerecorded)(Level A)</a></li>
<ul>
<li>For prerecorded audio-<strong>only</strong> or video-<strong>only</strong> content</li>
<ul>
<li><strong>Audio-only</strong> content must provide an equivalent to auditory information. An audio-only podcast, for example, could include a text transcript of the dialog.</li>
<li><strong>Video-only</strong> content must provide an alternative that presents an equivalent of the visual information. A short tutorial video with no dialog, for example, must provide a separate audio track or a textual description of the video content.</li>
</ul>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html">SC 1.2.2 Captions (Prerecorded)(Level A)</a></li>
<ul>
<li>All prerecorded audio must provide captions for users who are deaf or hard of hearing.</li>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html">SC 1.2.3 Audio Description or Media Alternative (Prerecorded)(Level A)</a></li>
<ul>
<li>An audio description track <strong>OR</strong> a media alternative must be provided for multimedia. If a video is self-described, an audio description is not necessary.</li>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html">SC 1.2.4 Captions (Live)(Level AA)</a></li>
<ul>
<li>All live audio content in synchronized media must provide captions.</li>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html">SC 1.2.5 Audio Description (Prerecorded)(Level AA)</a></li>
<ul>
<li>A synchronized spoken description of visual content must be provided with videos. <strong>Note:</strong> This is not necessary if the video is self-described wherein the information conveyed visually is also conveyed in the dialog or other audio.<li>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html">SC 1.4.2 Audio Control (Level A)</a></li>
<ul>
<li>Any audio that plays automatically for more than 3 seconds must provide a metho to pause or stop the audio or a method to control the audio volume separate from the system volume. Basically, you must give the user an option to disable the audio. <strong>Note:</strong> It's never a good idea to auto-play audio. It can be disruptive and distracting and may interfere with assistive technology. For example, a user navigating with a screen reader may not be able to hear how to stop or pause the audio because the audio track may be conflicting with their screen reader output.</li>
</ul>
<li><a href="https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html">SC 2.2.2 Pause, Stop, Hide (Level A)</a></li>
<ul>
<li>Blinking, scrolling, or auto-updating content that (1) starts automatically, (2) lasts more than 5 seconds, and (3) is presented with other content must provide a method for the user to pause, stop, or hide the information. Continuous movement can be distracting to those with cognitive disabilities and attention deficits.</li>
</ul>
</ul>
<h3>Section 508</h3>
<p>The Revised 508 Standards adhere to WCAG level AA conformance. -<a href="https://www.section508.gov/develop/applicability-conformance/">Source</a></p>
<h2>What do I check for?</h2>
<ul>
<li>Does the multimedia play automatically? ❌</li>
<li>Does the player include controls for playback? Are they accessible with the mouse AND keyboard? Do they provide accessible names and roles? ✅</li>
<li>Are there captions for the audio? ✅</li>
<li>Is all the information conveyed visually also conveyed through the audio? ✅</li>
<li>If the information presented visually is NOT conveyed as a self-described video, is there narration or an audio description track for the missing information? ❌</li>
<li>Is a transcript required?</li>
<ul>
<li>For <strong>audio-only</strong> content such as podcasts: <strong>Yes</strong></li>
<li>For <strong>video-only</strong> content with no audio: <strong>Yes OR an audio description</strong></li>
<li>For <strong>multimedia</strong> with video and audio content: <strong>No if other requirements are met</strong></li>
<ul>
<li>If I come across a video and I'm able to gather the same information from audio and video and the content includes captions (that are accurate), I won't require a transcript. That said, a transcript is <i>always</i> going to be beneficial to many users for different reasons. For example, users can style the text with custom stylesheets and parse the information at their own speed when it's represented in text.</li>
</ul>
</ul>
</ul>
<footer>
<a href="http://robertjmccaffery.com/examples.html">Back to Examples</a> | <a href="http://robertjmccaffery.com/">Home</a>
</footer>
</div>
</body>
</html>