Improving Video Accessibility with WebVTT

Shared by
Published
Updated
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

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.

Did you find Improving Video Accessibility with WebVTT useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

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. 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.