Non-Conformance and Conformance Demos for WCAG 2.1 Success Criteria Pertaining to Captions and Audio Description

Captions and Audio Description Non-Conformance and Conformance Examples

List of Success Criteria for Captions and Audio Description Examples

Notes Applicable to All Examples

The examples on this page use the accessibility friendly Able Player. It is deliberately offset to the left to permit the transcript to be viewable to the right of the player.

All examples make use of Pie Chart by Kevin Trotman licensed under Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic and Spear-Cartoon_3520 by Kevin Spear licensed under Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic.

Example 1

Example 2

Example 3

Example 3 audio description transcript

Example 4

Note that for the fourth demo, Able Player should be set to pause the video for audio description. This is under a checkbox under Settings-Descriptions.

Captions and Audio Description Non-Conformance with Non-Technical Explanation

In example 1, the captions are more accurate than auto-generated captions normally are, but require a few corrections to bring them into conformance with Success Criterion 1.2.2.

Audio description appears neither in a transcript nor as an audio track as required by Success Criterion 1.2.3. As an audio track it can be either embedded or present in a seperate file. It is not embedded in example 1. The seperate file can function as an audio track and be used to generate a transcript (e.g., by Able Player), but no such file is present in example 1.

Audio description appearing in a transcript is not sufficient to conform to Success Criterion 1.2.5. Even if example 1 had a transcript, it would not conform. Example 3 has a transcript, but fails for this reason.

Captions and Audio Description Non-Conformance and Conformance HTML Markup and Technical Details

When an HTML5 video element is present, it can be checked for the presence of a track tag, and its associated src, kind, and label attributes. Compare the HTML markup found on beginning on line 51 of this page:

<video id="piechart1" data-able-player preload="metadata" playsinline width="640" height="360" title="Captioning and Audio Description Demo 1">
<source src="12Demo1.mp4" type="video/mp4">
<track src="12Demo1.vtt" kind="captions" label="English">
If you don't see the video, your browser might not support the HTML5 video tag.
</video>

with the HTML markup beginning on line 79 of this page:

<video id="piechart4" data-able-player preload="metadata" playsinline width="640" height="360" title="Captioning and Audio Description Demo 4">
<source src="12Demo4.mp4" type="video/mp4">
<track src="12Demo4c.vtt" kind="captions" label="English">
<track src="12Demo4d.vtt" kind="descriptions" label="English">
If you don't see the video, your browser might not support the HTML5 video tag.
</video>

Even if an HTML5 video element is missing the track tag, it could still have an embedded audio description track (as in example 2 above). Even with the track tag and an audio description .vtt file, the video must be watched to determine the sufficiency of the audio description. This is also true of videos not marked up in HTML5.