Accessibility demo for hearing impairment

The problem

A video has been embedded on a page from a popular video hosting service. The video does not have either closed captions or a human-written transcript so that hearing impaired users can use the content.

The solution

Video with captions

A user is now able to turn closed captions on/off

HTML5 video with metadata and link to transcript

<div itemprop="video" itemscope itemtype="">
  <video controls>
    <source src="video/example_video.webm" type="video/webm">
    <source src="video/example_video.mp4" type="video/mp4">
    <track src="Example_transcript_file.vtt" label="English captions" kind="captions" srclang="en-gb" default>
  <p itemprop="transcript">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Further reading