Vimeo embed, WCAG compliant

What to think of when you embed Vimeo 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 or important sound effects in the video (SC 1.2.2)
  • Add audio description, if necessary (SC 1.2.3, SC 1.2.5)
  • Use enough contrast for text in the video (SC 1.4.3)
  • Disable keyboard short cuts, set keyboard to false. Tabbing still works. This setting exists since version 2.16.0 (Aug. 2021). (SC 2.1.4)
  • Do not use autoplay. Default in Vimeo's player.
  • Show controls. Default in Vimeo's player. Necessary in case of autoplay (SC 1.4.2)
  • Keep full screen option available (yet, have to find that one out)
  • Present a link to Vimeo so the user can easily watch the video on the Vimeo platform or Vimeo's app.

Extras

  • Specify the language of subtitles by setting
    texttrack
    with the right language code

Sources