ercb Posted September 28, 2022 Share Posted September 28, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted September 29, 2022 Share Posted September 29, 2022 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! 2 Link to comment Share on other sites More sharing options...
ercb Posted September 29, 2022 Author Share Posted September 29, 2022 Thank you so much for the recommendation, and also for the explanation of the problem. 1 Link to comment Share on other sites More sharing options...
Cassie Posted September 29, 2022 Share Posted September 29, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now