Video
Providing captions for your videos ensures that the content you're providing is accessible to those with deafness or hearing issues, as well as British Sign Language (BSL) users. This feature can be added retrospectively to content you already have, and the WebVTT (.vtt) file needed is easy to create and understand.
Here is the .vtt used in the video below, in case you'd like to use it as a starting point:
As you will see from the file above, we've used a couple of the rules mentioned in the chapter as examples of how you can alter the display and aesthetics of captions - there is a mixture of align, position, line, and Bold (<b>) in the video below, all controlled through the .vtt file.
Note: IE will completely ignore WebVTT files unless you define the MIME type. This can easily be done by adding an .htaccess file to an appropriate directory and adding AddType text/vtt .vtt.
Audio
As we mentioned in the chapter, captions currently don't display properly when added to the native <audio> tag, so we have to work out this. There are two consistent alternatives you can implement, both of which involve using the <video> tag:
Audio using <video> (specified height and line attribute)
My personal favourite, as it allows the audio player to remain relatively small in height, and keeps the focus on the captions that sit near to it.
It involves setting an explicit height for the video element to give it space to display the captions, and then adding the line:1 attribute to each individual line in the .vtt file to ensure that the captions are displayed at the top of the element:
Audio using <video> (background poster)
The other alternative that doesn't require adding an attribute to every line in the .vtt is setting a poster attribute to the video. This is typically used to display a temporary snapshot of a video whilst it loads, but in this case it can provide the video element with the same height as a typical video, which in turn allows the captions to display in the same way: