Relume Community Icon
Relume Community
  • 🏠Home
  • 📅Events

  • 🔵Announcements
  • 🔵General
  • 🔵Getting Started
  • 🔵Issues
  • 🔵Showcase

Powered by Tightknit
Issues
Issues

Adding Pause Mechanism to Hero Header Section for WCAG Compliance

Avatar of Crystal S.Crystal S.
·

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

  • Avatar of Matt J.
    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.

  • Avatar of Crystal S.
    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.