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="http://schema.org/VideoObject">
  <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>
  </video>
  <p itemprop="transcript">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>
</div>

Further reading