Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rhineland

GSAP, ScrollTrigger and accessibility via tabindex

Go to solution Solved by Cassie,

Recommended Posts

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

  • rhineland changed the title to GSAP, ScrollTrigger and accessibility via tabindex
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

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

  • Solution

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


 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×