Media – Audio and Video only (Pre-recorded)
Audio-only content does not have video. Without a proper text transcript, it is not accessible to users with hearing impairments. Similarly, video-only content does not have audio. Without a proper text transcript and audio description, it is not accessible to users with visual impairments.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
- A descriptive text transcript SHOULD be provided for audio-only content.
- Audio description and text transcript SHOULD be provided for video-only content. In audio description, visual content, and other content such as speaker names, the scene description and so on is included.
- Text transcripts SHOULD be provided in the form of a link placed before or after the video so that it is easily accessible for all users.
- The transcript provided CAN be given as a Link that points to the transcript file or CAN be given as a disclosure widget. For more information, refer to Collapsible Sections component.
- For pre-recorded audio only content, a text transcript/captions SHOULD be provided.
- For pre-recorded video only content, a text transcript/captions along with audio description SHOULD be provided.
-
Text transcript CAN be provided in the form of links that direct to another page
where the text transcript is present, or the text transcript CAN be placed before or after the video
in a form of disclosure widget.
For more information, refer to Media – Audio Control and Caption components. - The text of the transcript MUST meet the contrast requirements. For more information, refer to Color Contrast component.
- All media controls SHOULD have clear and descriptive labels.
Audio and video-only content with descriptive alternatives majorly benefit the below users.
- People with visual disabilities
- People with hearing impairments.
<video controls title="Audio providing visual description of video elements" width="350" height="280" aria-label="Video Player with Closed Captions">
<source src="./Biology-Introduction-To-Eukaryotic-Organelles.mp4" type="video/mp4">
<track src="./Biology-Introduction-To-Eukaryotic-Organelles.vtt" kind="captions" srclang="en" label="English">
Your browser does not support the video tag.
</video>
<div>
<button class="button-primary" id="transcriptButton" aria-expanded="false" onclick="toggleTranscript()">Audio Transcript</button>
<div class="transcript" style="display: none;">
<p>
In this video we're going to begin our introduction to
organelles or organs inside of the cells. And so recall from our
previous lesson videos that eukaryotic cells contain several
membrane bound organelles. And so moving forward in our course
we're going to talk about many of these membrane bound
organelles. Now it's important to note that both animal and
plant cells are eukaryotic, and so that means that they both contain
eukaryotic organelles. However, that being said, some of the
organelles of animal and plant cells will actually differ from each
other, and so that's important to keep in mind. And so down
below in our example of eukaryotic organelles, notice that
we're showing you our representation of an animal cell over
here on the left-hand side.
</p>
</div>
</div>
.transcript {
display: none;
margin-top: 1.25rem;
}
.button-primary {
background-color: #ae367e;
color: #fff;
padding: 13px 25px;
font-size: 16px;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 2px;
display: inline-block;
margin-top: 20px;
font-weight: 700;
border:none;
position: relative;
overflow: hidden;
letter-spacing: 0.5px !important;
}
.button-primary:focus { border: 2px solid; }
function toggleTranscript() {
let transcript = document.querySelector('.transcript');
let button = document.getElementById('transcriptButton');
if (transcript.style.display === 'none') {
transcript.style.display = 'block';
button.setAttribute('aria-expanded', 'true');
} else {
transcript.style.display = 'none';
button.setAttribute('aria-expanded', 'false');
}
}
In this video we're going to begin our introduction to organelles or organs inside the cells. And so recall from our previous lesson videos that eukaryotic cells contain several membrane bound organelles. And so moving forward in our course we're going to talk about many of these membrane bound organelles. Now it's important to note that both animal and plant cells are eukaryotic, and so that means that they both contain eukaryotic organelles. However, that being said, some of the organelles of animal and plant cells will actually differ from each other, and so that's important to keep in mind. And so down below in our example of eukaryotic organelles, notice that we're showing you our representation of an animal cell over here on the left-hand side.