Transcripts
This post provides a method for meeting the level A success criterion 1.2.3 Audio Description or Media Alternative (Prerecorded). The requirement is:
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Success criterion 1.2.3 Audio Description or Media Alternative, offers two possible ways of making synchronised media accessible. In this post, we will look at how you can create a transcript as an alternative media.
A text transcript is the best option for someone who is deafblind. In fact, it is probably the only way of making your media accessible for a deafblind person. It can also be useful for blind people and for people who find video difficult to process.
What is a transcript?
W3 define a media alternative as follows:
Document including correctly sequenced text descriptions of time-based visual and auditory information and providing a means for achieving the outcomes of any time-based interaction.
The media alternative or transcript is a text document that can be read by a screen reader. It reads rather like a playscript and it includes details of all audio and visual detail, in the correct order. This enables the reader to experience the content without actually watching it. In doing so, they should not miss out on any information or content.
Creating a transcript
I am still playing with various custom widgets to make a transcript that appears next to or beneath the video and can be toggled on and off, but I haven't produced one that I really like yet. For now, I've gone with the option of a <div> which is below the video player and is visible all the time. I've set a max-height on it and a scrollbar.
I have currently got transcripts on my Voice Recognition Software page. I started with the caption file... the vtt file. I stripped out all the time stamps to leave the actual words spoken, and I added in a speaker (like in a playscript) for each one. Then I realised that the name of the speaker is not relevant there, so I changed it to the purpose - DRAGON COMMAND.
Next, I added in the visual information between each utterance. This took quite a long time to do manually. I wanted to make it clear what was happening visually that you would have to see to understand the video. Although it did take time, this would also be a helpful step, when I go on to make an audio described version.
This is what my transcript looks like. I've deliberately not added in the video here. You can always watch that on the live page, but maybe it is better to read the transcript and decide whether it gives enough information to understand it without seeing the video.
Video Transcript
The video is a screencast, showing a holiday planning service website with various headings, paragraphs, a list and some images just coming into view at the bottom of the page. At the top of the window, a tiny Dragon bar is showing a green microphone icon, indicating that it is listening for commands.
DRAGON COMMAND: Page down.
The page moves down to show four images in a 2 x 2 grid. They show the Falkirk Wheel, a coastline with a rainbow, a quaint looking village, and a stately home.
DRAGON COMMAND: Page down.
Page moves down to show information about Northern Ireland and some photos.
DRAGON COMMAND: Page down.
Page moves down to show information about Wales and a couple of photos.
DRAGON COMMAND: Page down.
Page moves down to show two more photos of Wales and the beginning of a section about Belgium.
DRAGON COMMAND: Page down.
Page moves down to show four photos of Belgium. The next heading, Euan's Guide, is just visible at the bottom of the page.
DRAGON COMMAND: Page down.
The page moves down a small amount as we are now at the bottom of the page.
DRAGON COMMAND: Euan’s Guide.
A new tab opens in the browser and the Euan's Guide website slowly loads.
DRAGON COMMAND: Switch to third tab.
The view goes back to the holiday planning website.
DRAGON COMMAND: Contact form.
A new page loads, which is part of the holiday planning website. It has the heading, Contact Form.
DRAGON COMMAND: First name.
The cursor appears in the First Name field, and it is highlighted in yellow to show that it has focus.
DRAGON COMMAND: Rebecca.
The name Rebecca appears in the First Name field.
DRAGON COMMAND: Last name.
The cursor and focus move to the Last Name field.
DRAGON COMMAND: Smith.
The surname, Smith appears in the Last Name Field.
DRAGON COMMAND: Street address.
The cursor and focus move to the Street Address field.
DRAGON COMMAND: 12 High Street.
The address, 12 High Street appears in the Street Address field.
DRAGON COMMAND: Town.
The cursor and pointer move to the Town field.
DRAGON COMMAND: Halifax.
The town, Halifax appears in the Town field.
DRAGON COMMAND: Postcode.
The cursor and focus move to the Postcode field.
DRAGON COMMAND: HX1 2ST.
The postcode, HX1 2ST appears in the Postcode field.
DRAGON COMMAND: Page down.
The page moves down to show the next section of the form, beginning with Other Contact Details.
DRAGON COMMAND: Phone number.
The cursor and focus move to the Phone Number field.
DRAGON COMMAND: 01422 123456.
The phone number, 01422 123456 appears in the Phone Number field.
DRAGON COMMAND: Email address.
The cursor and focus move to the Email Address field.
DRAGON COMMAND: Becky dot Jones at gmail dot com.
The email address, becky.jones@gmail.com appears in the Email Address field.
DRAGON COMMAND: Email.
A tiny green box appears next to the Email Address field and the Email checkbox. These green boxes contain numbers which the user can select.
DRAGON COMMAND: Choose 2.
The Email checkbox is selected.
DRAGON COMMAND: Scotland.
In the section, Where would you like to go?, the radio button for Scotland is selected.
DRAGON COMMAND: Page down.
The page moves down a little to show the bottom of the page, which includes a final question about what disability the user has, and a submit button.
DRAGON COMMAND: I'm a wheelchair user. I walk with mobility aids.
The checkboxes for I'm a wheelchair user and I walk with mobility aids are both selected.
DRAGON COMMAND: Submit.
A new page appears with the heading, Contact Successful.
Keyboard accessibility
Because the transcript is in a scrollable <div>, it's important to consider how a non-mouse user would interact with it. This means that it must be keyboard accessible. To do that, I added tabindex="0" to the <div>, like this:
<div class="transcript" tabindex="0">This enables the user to Tab to the transcript and then use the arrow keys to move up and down through the scrolling content.
