Inclusive design transcripts for a video component

On the web, we embed a video component together with a transcript. First, I describe problems of an existing transcript experience. Then I present a component design that addresses these issues. Last, I extend the design to accommodate transcripts in more languages including right-to-left, such as Arabic.

Problems of the existing transcript experience

Wireframe of current video component has a rectangle with a play icon in the middle, followed by a link to view the transcript.
Existing video component with a link to view transcript

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 profile of a woman's face smiling in sunshine. Forest and mountains are in the background.

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

Video component design with a transcript in a collapsible panel underneath shown in 3 states: default; hover; and expanded.
Proposed video component design with a transcript in a collapsible panel

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

Video component design with multiple collapsible panels underneath for transcripts in additional languages including right to left written language.
Extend the component design to accommodate transcripts in 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?

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.