YouTube embed, WCAG compliant

Where to think of when you embed YouTube videos into your website.

  • Add the title attribute to the iframe element. Describe in a few words the content of the video. (SC 4.1.2)
  • Add subtitles, if there is talk in the video (SC 1.2.3)
  • Add audio description, when necessary (SC 1.2.4, SC 1.2.6)
  • Enough contrast for text in the video (SC 1.4.3)
  • Disable keyboard short cuts. Change YouTube's default: disablekb=0 (SC 2.1.4)
  • Do not use autoplay. Keep it to YouTube's default: autoplay=0
  • Show controls. Keep it to YouTube's default: controls=1 (in case of autoplay SC 1.4.2)
  • Keep full screen option available. Keep it to YouTube's default: fs=1
  • Keep the YouTube logo, so the user can easily watch the video on YouTube. Keep it to YouTube's default: modestbranding=0

Extras

  • For multi language websites you add a subtitle for every used language to the video. You can add the parameter cc_lang_pref with the language of the page. Example: cc_lang_pref=nl
  • Set the language of the interface to the language of the webpage. Example: hl=nl

Sources