Accessible HTML5 Video with Captions and Transcript
- Posted by: Michael Spellacy (Spell), Director, Accessibility
- Pronouns: He/Him
- Posted: Thursday, August 5, 2021
- Update: Sunday, June 14, 2026
Here is an example of how to set up HTML5 video that can be enjoyed by everybody! Want to be truly inclusive? Make accessibility a priority by having captioning present by default. In addition to captioning, transcripts are also strongly recommended. The transcript should live near the video for easy access. If you require captions and transcripts, head on over to our intranet for more information.
Are Transcripts Necessary? Anchor ()
Yes! Providing an alternative way to share information through a transcript is a great idea! Here are some reasons why you should include them:
- Captions may not be accessible to certain assistive technologies, like refreshable Braille displays or screen readers.
- Captions may move too quickly or be distracting for some users.
- Transcripts allow people to search and scan content more easily.
- Transcripts can include additional details, semantic markup and hyperlinks, that wouldn't be possible or appropriate in captions.
- Besides enhancing accessibility, search engines may benefit from the extra information, helping them better understand and index your content.
Source: Captioning Videos FAQ
Example Anchor ()
Transcript
Narrator (Harrison Ford): Luke Skywalker and Han Solo rescue the princess, destroy the Death Star, but their story didn't end there.
Now, the creators of the biggest smash hit of all time, bring you the next episode in the "Star Wars" saga, "The Empire Strikes Back."
The continuing story of our band of heroes. Luke Skywalker, Princess Leia, Han Solo, C3PO, R2D2 and Chewbacca and introducing Lando Calrissian.
It's an epic of romance. Of heroes and villains. They cross trackless voids to unknown worlds.
A galactic odyssey against oppression.
A big new sprawling space adventure in the "Star Wars" saga, "The Empire Strikes Back."
Coming to your galaxy next summer.