Accessible HTML video as a background

Today I got a comment on Autoplay is bad for all users which asked:

So why does this high-traffic site designed by a former top-Google UX designer use it?

The comment has linked to a page which has video as a background element playing underneath the introduction text and call to action button, the images are moving but there is no sound on page load. At times this apparently important information is completely invisible.

Using video as a background is on the increase so it’s important to know how to make it accessible for everyone.

What does WCAG say about it?

I don’t think there is a guideline that specifically relates to this latest design idea of putting moving video behind the introduction content. However, I think that 2.2.2 Pause, Stop, Hide is most applicable:

Moving, blinking, scrolling:
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential

While the moving background isn’t specifically ‘information’ it is interfering with the information presented alongside it, it starts automatically and lasts more than five seconds. So in this case you should provide the user some way to pause it.

On whether we should autoplay video on page load, generally I would say no. However in this implementation it is almost never accompanied with sound and that is usually the biggest annoyance for people trying to use a site – so I think we can have a little leniency on autoplaying background videos.

HTML video backgrounds in the wild

airbnb

• Bad: no pause button
• Bad: no blurring – hard to read content sometimes
• Good: slow moving video
• Good: fixed camera view

Canva (mentioned by the commenter)

• Bad: no pause button
• Bad: no blurring and white text – content invisible at times
• Bad: fast moving video – very distracting
• Bad: very wobbly camera view

Spotify (a landing page)

• Bad: no pause button
• Bad: hammock scene could cause motion sickness
• Bad: white text – not always legible
• Good: large blocks of colour in the video

Sportswood Printing

• Bad: no pause button
• Bad: panning scenes could cause motion sickness
• Good: darker video with light text relatively easy to read

Powerhouse Company

• Bad: no pause button
• Bad: panning scenes could cause motion sickness
• Bad: white text – not always legible
• Good: slow moving video with large blocks of colour

I think you get the idea.

How to do it right

PayPal‘s video background is an excellent example of how to handle the implementation in an accessible way without compromising the design:

• There is a pause button in the bottom right of the video
• The text is readable when any colour appears underneath
• The video is relatively dark with lighter text on top
• The video has large blocks of colour which are slightly blurred
• The video has a static frame, movement only occurs inside that
• The video has an end, it is not looped
• Once the video has ended, the background fades slightly darker to make the content more legible

I’m not immune to making a mistake, a couple of sites I’ve built recently don’t adhere to the principles I’ve outlined above. But now that I’ve taken the time to look into some best practices I’ll be updating those sites in the future.

Use PayPal’s example as how to do things right, don’t copy the self-proclaimed top designers. And, do as I say not as I do!

Posted by Emma Sax

September 23, 2014

General