[Navigation] Quick access keys to jump to the side navigation

[harneetsahi]

Topic

I was wondering if it's feasible to add a keyboard shortcut to access the side nav links quickly. I'm unsure if something like this already exists on the website but I couldn't find it so I thought I'd bring it up.

Right now on certain pages like "reference" the page contents are too long to keep tabbing to move to the next element. "Jump to" links help a lot but once you do jump to a section, it sort of puts you in the middle of the content page where it's not currently possible to move back to the "Jump to" section and you would have to keep tabbing either backwards or forwards to get out of the content section.

Adding a keyboard shortcut like alt + n or something else to bring the focus directly on the "jump to" section would make it easier to navigate the contents. We could also write the shortcuts keys next to the "jump to" heading like "jump to (alt +n)" so users know how to target the section quickly.
Again, I'm not sure if it's already implemented and I just completely missed it. But if it's not, I feel it should be discussed to improve user experience.

[Homaid]

Hii @harneetsahi
Thanks for bringing this up! I checked the code and the site, and it looks like there isn’t currently any keyboard shortcut for quickly focusing the “Jump To” sidebar. Your suggestion to add something like Alt + N seems reasonable and could improve accessibility and navigation, especially on long pages.

[Homaid]

what do you think about this @perminder-17

[ksen0]

Thanks for the idea and the interest here! Generally, keyboard navigation is good. In terms of implementation details, it would be great first to agree here exactly how to do this, and to confirm (such as tagging the website accessibility stewards) that there's no potential screen reader issues.

See also this other somewhat related discussion - which is more about animating "jump to top" behavior: #597) but may be applicable here depending on the implementation details.

[Homaid]

hey @ksen0 I saw issue #597. That discussion was about animating the jump to top link, but it seems related in terms of focus management. The main point there was making sure that when the page scrolls, the focus also moves correctly so screen readers don’t lose context.

For this issue, the idea feels similar we’d need to not only scroll to the “Jump to” navigation but also programmatically move focus to its heading or first link . That way it behaves correctly for both keyboard and screen reader users.

The difference is that instead of jumping to the top of the page (#597), we’d be jumping directly to the “Jump to” navigation landmark here. But the accessibility concerns overlap so the same implementation principles apply.

[harneetsahi]

I did go through the #597 issue before creating this one and although it is sort of related, what I’m suggesting is geared more towards keyboard users.
I think “move to top button” (#597) can potentially improve ux for a mouse user, the keyboard implementation of such a feature already exists in browsers where you can move to top (or bottom) using cmd + up arrow (or cmd + down arrow), but I agree on the implementation suggestion to make it a quick jump.

@coseeian I’d love to get your input on potential screen reader issues before getting into the implementation details since accessibility is the main concern and it only makes sense to move forward if it doesn't create a negative user experience for screen reader users.

[coseeian]

I think adding a keyboard shortcut to access the side nav links on the page will not cause a negative user experience for screen reader users.
Just make sure the keyboard shortcut does not use a single letter key, but instead a combination with a modifier key (alt, ctrl) + letter key. Also, if you use alt + letter key, be careful not to conflict with the browser’s existing shortcuts, which could cause it to fail.