Improving Video Accessibility with WebVTT

Shared by
Published
Updated

Accessibility is important in web development & with the ever-growing prevalence of video content, the necessity for captioned content is growing as well.

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?!

Join the conversation.

Your email address will not be published.

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.