Adding Pause Mechanism to Hero Header Section for WCAG Compliance

·

I am working with this Hero Header Section > Header 78 https://library.relume.io/components/header-78 which is great but I need to add a pause mechanism to make this WCAG conformant. Is there a solution available for this already? What exactly is controlling the scroll animation and what should I target to pause/play?

2 comments

· Sorted by Oldest

Matt J.
·
Crystal S. The animation is controlled by native Webflow interactions which sadly doesn't support something like this out of the box, easily. You'd have to convert this solution to a CSS based solution and use a CSS property to pause animations on hover. I found this Webflow forum thread on it. https://discourse.webflow.com/t/how-to-pause-a-continuous-animation/163751 I'll do my best to make for a strong case to consider accessibility for components like this and see what could be done about it in the next few months.
Crystal S.
·
That's what I was afraid of. The solution you linked out to is actually a pause on hover which does not meet WCAG conformance. So I will need to rebuild this component from scratch to implement a pause button.

Matt J.
·
Crystal S. The animation is controlled by native Webflow interactions which sadly doesn't support something like this out of the box, easily. You'd have to convert this solution to a CSS based solution and use a CSS property to pause animations on hover. I found this Webflow forum thread on it. https://discourse.webflow.com/t/how-to-pause-a-continuous-animation/163751 I'll do my best to make for a strong case to consider accessibility for components like this and see what could be done about it in the next few months.
Crystal S.
·
That's what I was afraid of. The solution you linked out to is actually a pause on hover which does not meet WCAG conformance. So I will need to rebuild this component from scratch to implement a pause button.