ScrollSmoother Accessibility

[ercb]

I'm really tempted to sign up for Club Greensock just for the ScrollSmoother plugin.  It looks fantastic, but I'm worried about accessibility issues.  Our site requires very strict accessibility compliance (well, only WCAG AA, but it  must be 100% compliant with that standard).  

 

My limited testing so far in codepen seems to show that keyboard navigation / tabbing through content and links seems to work pretty well, but CTRL+F to find (and jump to) content within a page does not.  To illustrate the problem, you can take a look at the ScrollSmoother example, hit CTRL+F to search for the letter 'c'.  It'll find a few, and going through the results will cycle through them, but the screen doesn't jump to each.

 

Does anyone have any suggestions as to how to go about solving that problem, even in general terms, or if it's even likely that a solution is possible?

 

I feel like venn diagram of people who make visually dramatic and exciting websites and people who must be very strict about web accessibility has very little overlap.  Perhaps that overlapping section can be accurately labeled as "driven to madness".

See the Pen KKXZOyZ by GreenSock (@GreenSock) on CodePen

[GreenSock]

Yep, it's as accessible as we can make it but unfortunately it's impossible to accommodate the "Command-F" (find) functionality that's native to the browser because there are no hooks into that. The browser doesn't allow it. Since ScrollSmoother works by applying transforms to the contents of a fixed-position <div>, it just can't work as far as I can tell. 

 

You could leverage a solution like https://lenis.studiofreight.com/ which I hear nice things about. I've never used it, but my understanding is that it is just for smoothing wheel events, so it'll work with native "Command-F" functionality. The tradeoff is that it will NOT smooth the other ways of scrolling, like by dragging the scrollbar, keyboard-based scrolling, etc. whereas ScrollSmoother handles all that. But if accessibility is your priority, that probably doesn't matter. When I went to the site, it actually didn't have a scrollbar at all, so that may be a problem accessibility-wise. 🤷‍♂️ Obviously it's not a GreenSock product, so I can't speak to that. But it works great with ScrollTrigger/GSAP for animation.

 

Good luck! 

[ercb]

Thank you so much for the recommendation, and also for the explanation of the problem. 

[Cassie]

They've hidden the scrollbar for aesthetics (such as many awwards site's do 😂)

 

But actually Lenis itself doesn't hide the scrollbar, it feels like their site shouldn't hide it tbh as the accessibility of it is quite a good selling point.