Skip to content

Instantly share code, notes, and snippets.

@mfairchild365
Last active November 2, 2016 20:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mfairchild365/2dbffbcac3286413c0509ea8e8e7ad7c to your computer and use it in GitHub Desktop.
Save mfairchild365/2dbffbcac3286413c0509ea8e8e7ad7c to your computer and use it in GitHub Desktop.
Background video markup

Background videos (videos that are played in the background with no audio, usually with other content over it) are becomming more and more common. They also pose a problem for accessibility. For a primer on the issue see this great article: http://www.punkchip.com/accessible-html-video-as-a-background/

The one thing that the article does not address are problems with the markup of the video.

I'm curious what folks think of turning the video into an image for assitive technology (AT) via role="img". Of course, you would still want to create a stop button for the video.

The issue with just using a video is that a blind AT user might enounter the video and wonder why it is missing captions and/or a description track (alternative text).

By marking up the video as an image, we are essentially saying 'hey, this video is really just an animated gif but in video format. Here is some alt text provided with the aria-label attribute'.

For example:

<video poster="..." playsinline autoplay muted loop role="img" aria-label="this is the alt text">
  <source src="..." type="video/mp4">
</video>
<button>Turn off the video</button>

note 1: If the user turns off the video because they don't like the motion, it would probably be good to remember that setting. You might wire the button with some JS to save a setting in localStorage and check it before autoplaying the video in the future.

note 2: not all AT users are fully blind, so making the stop button available to all users would still be good.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment