rhineland Posted October 4, 2021 Share Posted October 4, 2021 Hi all, Question about best practices with a11y and gsap: I'm using ScrollTrigger to 'scroll-jack' a section of my page. The problem is, when I am testing tabbing through my page, the viewport 'hangs' at this section (which I've set to tabindex of -1, FWIW), even as my tabbing goes further and further down and off the viewport. Is there a silver-bullet, catch-all solution to this sort of issue? Thank you in advance. See the Pen WNOBqXB by scallemang (@scallemang) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted October 4, 2021 Share Posted October 4, 2021 6 minutes ago, rhineland said: (Would a CodePen be essential to answering?) That would be helpful to see the issue at hand, especially if you are scroll jacking, which would mean the browser isn't in control of setting the scroll position. Link to comment Share on other sites More sharing options...
rhineland Posted October 4, 2021 Author Share Posted October 4, 2021 26 minutes ago, OSUblake said: That would be helpful to see the issue at hand, especially if you are scroll jacking, which would mean the browser isn't in control of setting the scroll position. Great, added. Hopefully it clarifies. Link to comment Share on other sites More sharing options...
Solution Cassie Posted October 4, 2021 Solution Share Posted October 4, 2021 Hey Rhineland - I tend to avoid using tabIndex, it can cause more issues than it solves. See - https://www.a11yproject.com/posts/2021-01-28-how-to-use-the-tabindex-attribute/ Quote Instead, use appropriate interactive elements (a for links, button for buttons, etc.) and put them in the reading order of the document. Interactive elements come with native browser behavior already built in that allows them to be navigated to via Tab without the need for a tabindex declaration. If I simplify the demo down to just include pinning and include native focusable elements there isn't an issue. I also see you're using menu-spy, I removed this in case it was using issue - I would suggest using anchor links down to the sections instead. You can use our scrollTo plugin if you'd like to animate down to those sections. See the Pen OJgeLBz?editors=1010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
rhineland Posted October 4, 2021 Author Share Posted October 4, 2021 Thank you so much, @Cassie 1 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