Improving Video Accessibility with WebVTT

Accessibility is important in web development & with the ever-growing prevalence of video content, the necessity for captioned content is growing as well.
Shared by
Published
Share on facebook
Share on twitter
Share on linkedin
Sponsored Advertisement
Mine cryptocurrency + get 1,000 free Satoshis! Sign up today.

Accessibility is an important element of web development, and with the ever-growing prevalence of video content, the necessity for captioned content is growing as well. WebVTT is a technology that solves helps with captioned content as a subtitle format that integrates easily with already-existing web APIs.

What is WebVTT?

Web Video Text Tracks Format (WebVTT) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element. The primary purpose of WebVTT files is to add text overlays to a <video>. WebVTT is a text based format, which must be encoded using UTF-8. Where you can use spaces you can also use tabs. There is also a small API available to represent and manage these tracks and the data needed to perform the playback of the text at the correct times.

A WebVTT file (.vtt) contains cues, which can be either a single line or multiple lines, as shown below:

WEBVTT

00:01.000 --> 00:04.000
Never drink liquid nitrogen.

00:05.000 --> 00:09.000
- It will perforate your stomach.
- You could die.

1 Comment on “Improving Video Accessibility with WebVTT”

nicmare

# Jun 26, 2020

do you have any idea how to combine this with elementor video widget?!

Leave a Reply

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

All comments posted on 'Improving Video Accessibility with WebVTT' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.