Accessibility and Keyboard navigation
NickStees opened this issue · comments
So I have to remove this from my site because it is causing issues with our keyboard users and skip navigation links, after they "skip" to the main content, the focus returns to the top of the document so it does not help them skip anything. Is there a way to set the focus properly after they scroll so their keyboard navigation can pick up where it should on the page? Maybe using .focus({preventScroll:true}); after this feature finishes?
You would also have to make sure the element that has the ID being scrolled to is focusable.. I.e. if not a link, then it should have a tabindex="-1", otherwise the call to .focus() will fail with an error in the console.
@tmorehouse Thanks for the tabindex info! The skip nav typically goes to a <main id="main"> so I guess I would need to add at tabindex="-1" like you mentioned. If the LocalScroll doesn't need modified to support key board navigation and there is another means I am all ears! I really would like to keep using the Library because of my sites static header.
It might be worth checking how popular sites implement skip-to-main links. For example, GitHub has a “Skip to content” control that seems to focus this element:
<div id="js-flash-container" tabindex="-1"></div>which is located immediately before the main content (<div class="application-main">).