Inclusive design transcripts for a video component

An accessible video component comes with a transcript. I’ll describe pain points in the experience of transcripts in the Single Digital Presence video component. Then I present a design that addresses these issues. Last, I extend the design to accommodate transcripts in more languages, including right-to-left scripts such as Arabic.

Problems of the existing transcript experience

Using Single Digital Presence to add a video creates a link to view the transcript. A link to the transcript is a sufficient way to meet Success Criterion 1.2.8 Media Alternative (Prerecorded). But, people who click to view the transcript navigate away from the current page to a generated page.

a link navigates the user to a new resource, taking them away from the current context

— Marcy Sutton, Independent web developer and accessibility advocate

Problems people face at the generated page are:

• No context from the origin page
• Lacks local navigation or you are here indicators
• No link to navigate back to the origin page
• Missing a heading or statement that the text there is a transcript

This transcript experience is disorienting. It also fails expectations of remaining in the current context.

My proposed transcript and video component

Rather than a link to navigate away, I propose using a button to show or hide a collapsible section. This collapsible section placed immediately after the video would be like accordions in Single Digital Presence. But, a toggle to open all / close all accordion sections is redundant when there is only one collapsible section. In the common case with one transcript, the collapsible section is next to the video.

This design addresses all the issues outlined above. Further, it improves the transcript experience as it:

• Maintains context – including any video playing
• Includes a heading that the following text is a transcript
• Is a familiar interaction pattern to expand or collapse a section

More transcripts for more languages

Sometimes we have 28 languages of transcripts with a video component. A toggle to open all / close all accordion sections should be shown for two or more transcripts. For other languages, there are 1 or 2 HTML attributes each accordion section needs:

• lang attribute
• dir attribute is needed for languages written from right to left

For instance:

<div lang="ar" dir="rtl">
...transcript content goes here...
</div>

Using the lang attribute for each transcript allows screen readers to invoke correct pronunciation. It also gives compliance with WCAG Success Criterion 3.1.2 Language of Parts.

In addition, to display transcripts with a right to left written language, component styles should include the following CSS.

[dir="rtl"] {text-align: start;}

Summing up

I propose these changes to transcripts for the video component. The existing transcript link navigates away from the context, producing a disorienting experience. Using collapsible panels and accommodating more languages improves the component design. It gives familiar interaction patterns and an inclusive transcript experience.

What else might improve the component design or the transcript experience? How might we make it easy for Content Management System editors to add the language attribute to transcripts?