Accessibility. .vtt File Upload

Why can’t .vtt files be uploaded into the CMS? This seems like an easy add that would be tremendously helpful for people (like me) adding descriptive text and captions within a video player to make it more accessible.

Here is my public share link: LINK
(how to access public share link)

Hi there! I noticed you have a suggestion for Webflow. I just wanted to let you know that Webflow keeps a wishlist where you can check for similar feedback or submit new ideas. While they may not always respond as quickly as we’d like, the wishlist is the best place to share your thoughts directly with their team.

If your idea isn’t on there yet, I’d encourage you to add it!

Here’s the link:

Sharing your feedback helps Webflow understand what features are important to users like you. Even if it takes some time, adding your voice to the wishlist helps get your idea on their radar. Hopefully by working together we can help make Webflow even better. Let me know if you have any other questions!

Thanks Jeff. Added in the feature to the wishlist. Noticed it is super low votes/priority for users which is kind of a shame. Hopefully this simple addition can be made soon to benefit accessibility for the Deaf/Blind community.

Hi Brian, have you tried just uploading it to a file field?
I’d imagine you can add the <track> with script pretty easily.

It will likely matter how you’re approaching the video embed as well. Specifying VTTs directly is typically done with the HTML5 <video> element. Webflow’s elements have a few layers to them involving Embedly, YouTube, Vimeo, IFRAMEs…

Hi Michael,
I’m using the Able Player: Able Player | Fully accessible cross-browser HTML5 media player.
It has the option to use vtt as such:

Those .vtt files need to be fed into the videos through the CMS as this site will be video-centric.

<video id="video1" data-able-player preload="auto" width="480" height="360" poster="path_to_image.jpg">
  <source type="video/webm" src="path_to_video.webm" data-desc-src="path_to_described_video.webm"/>
  <source type="video/mp4" src="path_to_video.mp4" data-desc-src="path_to_described_video.mp4"/>
  <track kind="captions" src="path_to_captions.vtt"/>
  <track kind="descriptions" src="path_to_descriptions.vtt"/>

I haven’t used Able but I like its feature range though the jQuery dependency seems a bit outdated.

Regarding the <track> sub-elements you can create those using custom code. I’d go that direction if you can program.

You may be able to upload the HTTs directly into a CMS field, and get a link to the CDN-stored file via a hidden download button. That would be the preferred approach since it would keep everything together.

Or, if that proves difficult, you could just pop your HTTs somewhere else like Netlify, and store the Url in a CMS field. More difficult to admin but it has the advantage that you can manually embed the track field and url in your HTML embed. No scripting needed.