Coding for Beginners: Web Accessibility #10— How to Create a WebVTT File

Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: join.designerslearncode.com/webaccesspro

The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here:    / @designerslearncode  

------

Last week, we introduced the concept of a WebVTT file when discussing accessibility for media. Adding captions is a process by which we convert our audio content into text to display it on screen for when sound is muted or for those who are deaf or hard of hearing. The most popular format is the WebVTT file. WebVTT stands for "web video text track." It is compatible with almost all online video players, social media, and video editing software with sidecar captioning.

To create a .vtt file, you need a text editor and you have to type out the captions using a particular format. The document must start with "WebVTT" at the top. And there must be a blank line between each text block. These text blocks are called "cues," and they consist of an optional cue identifier, a time stamp written out in a particular format down to the milliseconds rounded to three digits, and the caption text.

Each cue in the VTT file can also include optional settings such as direction to change the styling or placement. These are added to the right of the cue timecode. For example, you can specify alignment of the text, the width of the text area, and add styling such as bold or underline.

Once your file is ready, simply export it as a .vtt format. A WebVTT file can now be added as a captions file along with your project on YouTube, Vimeo, social media, or as a sidecar file with editing software like Premiere Pro.

#HTML #CSS #coding #webdesign #web #designerslearncode #dailycodesnippet #accessibility #disability #inclusion #videoclosedcaptions #closedcaptions #closedcaptioning #howtomakeavideoaccessible #learntocode #learntocodeforbeginners #webdevelopment #codingforbeginners #learntocodeforfree #htmlandcsstutorialforbeginners #htmlforbeginners #csstutorialforbeginners #htmlcss #webvttfile #webvtt