Skip to content

Commit ed3ac22

Browse files
giacomo-petriWilcoFierskengdoj
authored
Update ee13b5 and 1a02b0 rules to clarify that transcript for video content does not need to be visible (#2187)
* Address clarification about non-visible transcription for video-only media * Update video-transcript-1a02b0.md * Update video-transcript-1a02b0.md * Update video-only-transcript-ee13b5.md * Update _rules/video-transcript-1a02b0.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update _rules/video-only-transcript-ee13b5.md Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com> * Update _rules/video-transcript-1a02b0.md Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com> * Update video-only-transcript-ee13b5.md * Update video-transcript-1a02b0.md * Apply suggestions from code review Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com> * Update _rules/video-transcript-1a02b0.md add a blank line * Update _rules/video-transcript-1a02b0.md add a blank line * fixed headings per new format * fix headings per new format --------- Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com>
1 parent b10d1ae commit ed3ac22

2 files changed

Lines changed: 92 additions & 8 deletions

File tree

‎_rules/video-only-transcript-ee13b5.md‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ accessibility_requirements:
1111
failed: not satisfied
1212
passed: further testing needed
1313
inapplicable: further testing needed
14+
wcag20:1.3.1: # Info and Relationships (A)
15+
secondary: This success criterion is **related** to this rule. This is because this criterion applies to a visible transcript.
16+
wcag20:1.2.1: # Audio-only and Video-only (Prerecorded) (A)
17+
secondary: This success criterion is **less strict** than this rule. This is because this criterion does not require a transcript when the audio-only or video-only is a media alternative for text and is clearly labeled as such. Some of the failed examples may satisfy this success criterion.
18+
1419
input_aspects:
1520
- DOM Tree
1621
- CSS Styling
@@ -37,15 +42,16 @@ This rule applies to any [non-streaming](#non-streaming-media-element) `video` e
3742

3843
## Expectation
3944

40-
The visual information of each test target is available through a text transcript that is [visible][], [included in the accessibility tree][], and is either on the page or linked.
45+
The visual information of each test target is available through a text transcript that is [included in the accessibility tree][], and is either on the page or linked.
4146

4247
## Background
4348

4449
A "text transcript" in the context of this rule is defined in WCAG 2 as an [alternative for time based media](https://www.w3.org/TR/WCAG22/#dfn-alternative-for-time-based-media).
4550

4651
### Assumptions
4752

48-
A mechanism is available to start the video and that the video element is not simply used to display the [poster](https://www.w3.org/TR/html5/semantics-embedded-content.html#element-attrdef-video-poster).
53+
- A mechanism is available to start the video and that the video element is not simply used to display the [poster](https://www.w3.org/TR/html5/semantics-embedded-content.html#element-attrdef-video-poster).
54+
- Users who are not visually impaired can comprehend the contents of the video through visual cues and information presented visually.
4955

5056
### Accessibility Support
5157

@@ -62,7 +68,7 @@ There are no accessibility support issues known.
6268

6369
#### Passed Example 1
6470

65-
This `video` element, which has no audio, has a text transcript available on the same page.
71+
This `video` element, which has no audio, has a visible text transcript available on the same page.
6672

6773
```html
6874
<html lang="en">
@@ -90,6 +96,22 @@ This `video` element, which has no audio, has a transcript which conveys informa
9096
</html>
9197
```
9298

99+
#### Passed Example 3
100+
101+
This `video` element, which has no audio, has a non-visible text transcript available on the same page.
102+
103+
```html
104+
<html lang="en">
105+
<video controls>
106+
<source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
107+
<source src="/test-assets/rabbit-video/silent.webm" type="video/webm"></source>
108+
</video>
109+
<p style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">This video shows a giant fat rabbit climbing out of a hole in the ground.
110+
He stretches, yawns, and then starts walking.
111+
Then he stops to scratch his bottom.</p>
112+
</html>
113+
```
114+
93115
### Failed
94116

95117
#### Failed Example 1
@@ -132,7 +154,7 @@ This `video` element, which has no audio, has a text transcript available on the
132154
<source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
133155
<source src="/test-assets/rabbit-video/silent.webm" type="video/webm"></source>
134156
</video>
135-
<p style="text-indent: -9999px;">The above video shows a giant fat rabbit climbing out of a hole in the ground.
157+
<p style="text-indent: -9999px;">This video shows a giant fat rabbit climbing out of a hole in the ground.
136158
He stretches, yawns, and then starts walking.
137159
Then he stops to scratch his bottom.</p>
138160
</html>
@@ -148,7 +170,7 @@ This `video` element, which has no audio, has a text transcript available on the
148170
<source src="/test-assets/rabbit-video/silent.mp4" type="video/mp4"></source>
149171
<source src="/test-assets/rabbit-video/silent.webm" type="video/webm"></source>
150172
</video>
151-
<p aria-hidden="true">The above video shows a giant fat rabbit climbing out of a hole in the ground.
173+
<p aria-hidden="true">This video shows a giant fat rabbit climbing out of a hole in the ground.
152174
He stretches, yawns, and then starts walking.
153175
Then he stops to scratch his bottom.</p>
154176
</html>

‎_rules/video-transcript-1a02b0.md‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ accessibility_requirements:
1616
failed: not satisfied
1717
passed: further testing needed
1818
inapplicable: further testing needed
19+
wcag20:1.3.1: # Info and Relationships (A)
20+
secondary: This success criterion is **related** to this rule. This is because this criterion applies to a visible transcript.
21+
wcag20:1.2.1: # Audio-only and Video-only (Prerecorded) (A)
22+
secondary: This success criterion is **less strict** than this rule. This is because this criterion does not require a transcript when the audio-only or video-only is a media alternative for text and is clearly labeled as such. Some of the failed examples may satisfy this success criterion.
1923
input_aspects:
2024
- DOM Tree
2125
- CSS Styling
@@ -42,15 +46,16 @@ This rule applies to every [non-streaming](#non-streaming-media-element) `video`
4246

4347
## Expectation
4448

45-
The visual information of each test target is available through a text transcript that is [visible][], [included in the accessibility tree][], and is either on the page or linked.
49+
The visual information of each test target is available through a text transcript that is [included in the accessibility tree][], and is either on the page or linked.
4650

4751
**Note:** A "text transcript" in the context of this rule is defined in WCAG 2 as an [alternative for time based media](https://www.w3.org/TR/WCAG22/#dfn-alternative-for-time-based-media).
4852

4953
## Background
5054

5155
### Assumptions
5256

53-
This rule assumes that a mechanism is available to start the video and that the video element is not simply used to display the [poster](https://www.w3.org/TR/html5/semantics-embedded-content.html#element-attrdef-video-poster).
57+
- This rule assumes that a mechanism is available to start the video and that the video element is not simply used to display the [poster](https://www.w3.org/TR/html5/semantics-embedded-content.html#element-attrdef-video-poster).
58+
- Users who are not visually impaired can comprehend the contents of the video through visual cues and information presented visually.
5459

5560
### Accessibility Support
5661

@@ -70,7 +75,7 @@ There are no accessibility support issues known.
7075

7176
#### Passed Example 1
7277

73-
A video element with a text transcript on the same page.
78+
A video element with a visible text transcript on the same page.
7479

7580
```html
7681
<html lang="en">`
@@ -98,6 +103,35 @@ A video element with a link to a text transcript on a different page.
98103
</html>
99104
```
100105

106+
#### Passed Example 3
107+
108+
This `video` element has a non-visible text transcript available on the same page.
109+
110+
```html
111+
<html lang="en">
112+
<video controls>
113+
<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
114+
<source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
115+
</video>
116+
<p style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">The above video shows a giant fat rabbit climbing out of a hole in the ground.
117+
He stretches, yaws, and then starts walking.
118+
Then he stops to scratch his bottom.</p>
119+
</html>
120+
```
121+
122+
#### Passed Example 4
123+
124+
A video element with an associated track element that contains captions for all the audio and a transcript on the page.
125+
126+
```html
127+
<html lang="en">
128+
<video src="/test-assets/perspective-video/perspective-video.mp4" controls>
129+
<track src="/test-assets/perspective-video/perspective-caption.vtt" kind="captions" />
130+
</video>
131+
<p> Web Accessibility Perspectives: Keyboard Accessibility. Not being able to use your computer because your mouse doesn't work, is frustrating. (A computer user's mouse breaks when it falls off the desk.) Many people use only the keyboard to navigate websites. Either through preference or circumstance. (A person wearing a sling on her arm typing with one hand.) </p>
132+
</html>
133+
```
134+
101135
### Failed
102136

103137
#### Failed Example 1
@@ -130,6 +164,34 @@ A video element with a link to an incorrect text transcript on a different page.
130164
</html>
131165
```
132166

167+
#### Failed Example 3
168+
169+
This `video` element has a text transcript available on the same page, but the transcript is not [included in the accessibility tree][].
170+
171+
```html
172+
<html lang="en">
173+
<video controls>
174+
<source src="/test-assets/rabbit-video/video.mp4" type="video/mp4"></source>
175+
<source src="/test-assets/rabbit-video/video.webm" type="video/webm"></source>
176+
</video>
177+
<p aria-hidden="true">The above video shows a giant fat rabbit climbing out of a hole in the ground.
178+
He stretches, yaws, and then starts walking.
179+
Then he stops to scratch his bottom.</p>
180+
</html>
181+
```
182+
183+
#### Failed Example 4
184+
185+
A video element with audio does not have a text transcript.
186+
187+
```html
188+
<html lang="en">
189+
<video src="/test-assets/perspective-video/perspective-video.mp4" controls>
190+
<track src="/test-assets/perspective-video/perspective-caption.vtt" kind="captions" />
191+
</video>
192+
</html>
193+
```
194+
133195
### Inapplicable
134196

135197
#### Inapplicable Example 1

0 commit comments

Comments
 (0)