Скачать или смотреть Coding for Beginners: Web Accessibility #9— Creating Audio and Video Transcripts

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  

------

For media files such as audio or video, you would want to add transcripts for accessibility. In addition, for those with auditory impairments, such as being hard of hearing or deafness, we should add captions. Captions can also aid those who are viewing our video in a noisy environment or when audio may be disruptive. And for those for whom the language of the video is not their primary language, a text transcript may be helpful for translation.

The track element, an empty element, is added to media elements to specify timed text tracks. There are different types of text tracks: subtitles, captions, descriptions, chapters, and metadata. The track element is used in conjunction with a WebVTT file.

A WebVTT file format is a way of writing text files that contains the strings of text called cues along with the metadata such as the time at which the text should be displayed.

The track element is added after all the source elements within an audio or video element. The kind attribute is used to identify what kind of text track it is, ex. subtitle, caption, etc. The srclang attribute identifies the language of the text track while the label attribute tells the user the language.

The track element is inserted after two source elements within the video element. And after our track element, the paragraph text tells the user, if neither source is supported, that the browser doesn't support HTML5 video and provides a link for the user to click to access the video instead. For the track element, we use the kind attribute to specify that this track is a subtitle. And we tell the browser where to find the webvtt file in the src (source) attribute. The language of our text track is actually German by the label but the browser understands German by the value "de" for "Deutsch."

Adding text tracks to your media will also help with seo, or search engine optimization.

#HTML #CSS #coding #webdesign #web #designerslearncode #dailycodesnippet #codingforbeginners #accessibility #learntocode #transcript #transcripts #transcription #closedcaptions #closedcaptioning #disability #inclusion #accessibilitymatters #inclusionmatters #disabilitymatters #videoelement #audioelement #texttracks #subtitles #captions #transcribeaudio #transcribeaudiototext #transcribevideototext #transcribevideo #html5video #html5audio #videotranscription