Pause, Stop, or Hide Animations (Video backgrounds)

[marcjohlic]

Pause, Stop, or Hide Animations (Video backgrounds)

Detailed description

WCAG has a requirement to Pause, Stop or Hide moving, blinking or scrolling content. All of the video background content on the site should either stop after 5 seconds or have a control that will allow the user to pause it.

Two places that I've spotted this so far are the IBM Design page (the "video background" of the video on the landing page) and the IBM Design Language page.

This page has a section on integrating accessibility in video backgrounds that may be helpful.

[dakahn]

When a low vision user utilizing screen magnification tech (200 - 300x) comes across an auto playing video of this size and intensity it can be pretty disturbing.

[RyanCaruthers]

@dakahn @marcjohlic Thank you both for this guidance! Team is working through some options to present back based on the above direction...

One question I have has to do with the current dark tint that is overlayed on top of the auto loop video. Currently it is set to about 45% Black transparency. I was wondering if setting the transparency to a darker black percentage would be a possible solution for this large size video loop? Do you think adjusting the darkness would take down the intensity to a healthier level?

Really excited to keep working closer and closer with you all as one team on all these practices!

[marcjohlic]

@RyanCaruthers unfortunately, the only way to meet the WCAG requirement is to stop the animation automatically after a period of time or offer the user a way to pause or hide it themselves.

Assuming you were making that darker change after the 5 seconds, you'd have to set the black to 0% transparency - or replace it (or overlay it) with a static image - effectively hiding it. Adding a "pause" button would also work - allowing the user to click it and have the animation/video paused or replaced with a solid color or static image.. effectively pausing it.

Even subtle motion, especially when it's full-screen motion from video backgrounds, can be a pretty big issue for folks with vestibular disorders, cognitive impairments or folks on the autism spectrum.

[RyanCaruthers]

@marcjohlic Totally understand and thanks for letting me ask clarifying questions! Super helpful while iterating on the expression of an end thoughtful and required solution.

[marcjohlic]

Absolutely - don't hesitate to clarify (or question) - there can be a lot of gray areas when it comes to accessibility. :)