Community forum for knowledge and support

Updated 4 weeks ago

Hero Header Section Needs Pause Mechanism for WCAG Conformity

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?

M
C
2 comments

@Crystal Scott 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.

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.

Add a reply
Sign up and join the conversation on Slack