Skip to main content

Transcript

The transcript shortcode [transcript], places a transcript accordion onto a Learning lab page. The transcript accordion provides an accessible alternative for content such as images, video or interactive quizzes.

Here's the default version of the [transcript] accordion.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.

Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

[transcript]<p>Transcript content here.</p>[/transcript]
  • It's recommended to wrap your text within <p></p> tags.
  • The text within the transcript accordion is sized at 15px.
  • By default, transcripts have a max width of 640px. It's possible to have a full width transcript by adding size="wide".
  • By default, the accordion is labelled "transcript". You can change this by adding title="your-title".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.

Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

[transcript title="Text alternative" size="wide"]<p>Transcript content here.</p>[/transcript]

Button id

Another lesser used option is id="insert-id". This allows you to target the transcript's button, which proves useful if you want to provide the option to skip content and go directly to the transcript. An example of this may be added as a shortcode after accessibility testing).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.

Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

[transcript title="Text alternative" id="insert-id"]<p>Transcript content here.</p>[/transcript]

Keywords