Coding for Beginners: Web Accessibility #11— A Free Template for a WebVTT File
Get a sample of a WebVTT Template here: https://join.designerslearncode.com/w...
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
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
------
Today we will look at an actual WebVTT file and its formatting. We are doing something a little different for our episode of The Daily Code Snippet. And what we're going to do is take a closer look at the WebVTT file. And so we have a WebVTT file open from yesterday's video in our text editor. I'm on a Macintosh computers so we're open in TextEdit, and you can see that this file follows the format that we discussed yesterday where it has the title of the type of file here right at the top, "WebVTT," and you can see that each cue is separated by a required blank line. So this is really important that you have this blank line underneath the WebVTT and between each cue. And so each cue has the optional identifier. It also has a timestamp within this particular format with these arrows in between. And each timestamp goes all the way down to milliseconds rounded to three digits. And in the first caption you see that the voice is indicated by this v code. So you have an opening tag, "v,' and it says "Instructor," and you know, if you know the name of the person you can you can change that to the name of the person that's speaking. And then it has a closing tag with the forward slash. And if we look down, we see that there's a total of 34 cues. It ends with our "Presented by Designers Learn Code." You can see that the video length is about 1 minute and 53 seconds and 62 milli seconds.
So, and you can see that each caption is short, it's, you know, generally, a short phrase, and, and the time stamping will follow consecutively. So I thought what would be a good thing to do for you is to actually offer this WebVTT file as a template that you can have so that you can apply it to your videos and all you would need to do really is to change the actual caption phrases, and follow this format when you have the blank lines already preset, and you would also need to edit the time-stamping. Now, it may be difficult for you to trace it back to the milliseconds, but do your best with this to get the time as accurate as possible. And then you can, you know, fill this out for the length of your video and then you will have it...and then resave it...keep this file as a template. And you know, resave it for each of your projects. So you have the WebVTT file for accessibility.
Now, there are other ways of getting WebVTT file that are not so tedious, and generally, they involve using the service. And there are two transcription services that I like to us personally: Otter.ai and Rev.com.
Watch the full video for a demonstration.
#HTML #CSS #coding #webdesign #web #designerslearncode #dailycodesnippet #codingforbeginners #accessibility #webvtt #transcription #closedcaptioning #html5videoaccessibility #videoaccessibility #videotranscription #videoclosedcaptioning #webvtttemplate #videoelement #learntocodeforbeginners #learntocode #webdevelopment #webdevelopmentfullcourse #transcriptionservices #thedailycodesnippet #accessibilityforall