Community forum for knowledge and support

Updated 3 months ago

Hero Header Section Needs Pause Mechanism for WCAG Conformity

At a glance

The community member is working with a Hero Header Section and needs to add a pause mechanism to make it WCAG conformant. The animation is controlled by native Webflow interactions, which do not support this out of the box. A community member suggests converting the solution to a CSS-based solution and using a CSS property to pause animations on hover, but notes that this does not meet WCAG conformance. The community member concludes that they will need to rebuild the component from scratch to implement a pause button.

Useful resources

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