WordPress has been focusing on making its CMS more accessible for editors and site visitors. In the latest version, WordPress 5.6 “Simone,” they made the newest theme, Twenty Twenty-One, its most accessible theme ever.
…this default theme puts accessibility at the heart of your website. It conforms to the WordPress accessibility-ready guidelines and addresses several more specialized standards from the Web Content Accessibility Guidelines (WCAG) 2.1 at level AAA. It will help you meet the highest level of international accessibility standards when you create accessible content and choose plugins which are accessible too!Josepha Haden, WordPress 5.6 “Simone”
In addition to the theme update, they made it possible to add captions and subtitles to videos. When you use the Video block in the Gutenberg editor it now has an option to add a Web Video Text Tracks Format (WebVTT) file.
WebVTT files are plain-text documents that use the (soon to be) W3C specification for marking up external text track resources in connection with the HTML
<track> element. WebVTT code isn’t complex and is somewhat similar to how video segments work. However, instead of specifying clips with start times and descriptions, WebVTT specifies a range of time along with the text that should appear as a caption or subtitle during that timeframe.
Here’s an example of a video and WebVTT file I added to WordPress using the updated Video block. When you play the CleanMyMac review video, turning on captions will display the text contained within the
While it makes sense to upload the
.vtt file to WordPress, I don’t recommend uploading videos. Even the best WordPress hosting providers aren’t optimized for streaming large videos. Instead, I recommend you upload it to a CDN like Backblaze B2.
Alternatively, you may want to consider skipping the WordPress Video block altogether and use Cloudflare Stream. Cloudflare Stream supports the
.vtt format and can be used in WordPress by using the Custom HTML block.
How to create WebVTT files
The best way to create WebVTT files is to use a transcription service like Rev. Rev provides a closed captioning service that will transcribe the audio from videos into
.vtt files, and is the service Coywolf uses.
Rev also supports several other caption and subtitle formats, which can be helpful if you want to embed them into the video.
Caption file formats supported by Rev
- SubRip (
- Scenarist (
- MacCaption (
- Timed Text (
- Quicktime Timed Text (
- Transcript (
- WebVTT (
- DFXP (
- Cheetah .CAP (
- Spruce Subtitle File (
- Avid DS Subtitle File (
- Avid DVD Subtitle File (
- Facebook-ready SubRip (
- Burned-in Captions (Video)