YouTube embed, WCAG compliant

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

  • Add the title attribute into the iframe element. Describe in a few words the content of the video. (SC 4.1.2)
  • Add subtitles, if there is spoken words in the video (SC 1.2.3)
  • Add audio description, if necessary (SC 1.2.4, SC 1.2.6)
  • Use enough contrast for text in the video (SC 1.4.3)
  • Disable keyboard short cuts. Change YouTube's default disablekb=0 to 1 (SC 2.1.4)
    src="https://www.youtube.com/watch?v=XXXXXXXXXX&disablekb=1"
    or (depending if there are no parameters yet)
    src="https://www.youtube.com/embed/_XXXXXXXXXX?disablekb=1"
  • 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