Accessibility: Add arrow key navigation

[knitcodemonkey]

There are a lot of reference links throughout the site. Adding the ability to navigate using the arrow keys may allow quicker access to information. At the moment, a user has to tab through the entire page before accessing any sort of navigation to another page. This can be frustratingly slow.

[gaearon]

cc @joecritch

[bvaughn]

Hey @knittingcodemonkey! Could you give an example of what you mean by "navigate using the arrow keys"?

Aside from vertically scrolling the page up or down, I wouldn't expect the arrow keys to do much. I guess left/right could potentially cycle between next/previous article for sections that have many pages?

[knitcodemonkey]

What I'd really like to see is left/right navigating between the options on the main menu, then to content, and then to side menu (if it exists on that browser size).

It's a tedious process to get back to the menu options once you've started tabbing through the page.

[bvaughn]

Could you point me to any examples of other websites that do similar? I don't think I've seen this before. I'd be curious to try it.

[knitcodemonkey]

Truthfully, I don't know of any off the top of my head that navigate through a whole page like that. I will have to look. I did recently add arrow key navigation to the calendar component of dayzed.

My motivation behind this request is that I found myself getting frustrated with finding the info I needed, and then having to tab (or shift-tab) forever to get to the menu so I could look for the next thing I needed. It really made it painfully obvious why mice were invented. I hate inflicting that pain on those that can't use mice.

[bvaughn]

I've also experienced this frustration when using tab to navigate the docs site, (although I don't do that often). I really appreciate your raising this issue!

My only concern is that we don't implement something unexpected/surprising that might confuse users. (For example, I think it's important we don't break the ability for people to scroll the page up/down with arrow keys.)

I think the arrow key functionality of dayzed looks great! It seems safe since it's only enabled when the calendar is focused. I wonder if there's a similar way we could scope the functionality being described here, but still make it discoverable.

[knitcodemonkey]

I agree that up/down should be reserved for scrolling. I used arrow-keys-react to handle each key direction explicitly, and added it to just the calendar component.

We could add it to the horizontal menu for navigation, and to the parent of the content and side menu to hand focus to each direct child.

[bvaughn]

We could add it to the horizontal menu for navigation

Would it function the same as Tab / Shift+Tab?

and to the parent of the content and side menu to hand focus to each direct child

I'm not sure what you mean by this one. Are you saying we could add it to the parent of content so that left/right arrows toggle focus between the first focusable item in content and in nav? I see a few potential problems with this:

• We'd have to trap keyboard events on pages like the homage page, which show inline, editable code snippets, to prevent text editing from unexpectedly switching focus.
• If you were scrolled down in the page, switching to the nav could cause the vertical scroll position to jump. And switching back would lose your place (if we just jumped to the first focusable item).

[knitcodemonkey]

It would function the same as tab/shift tab on the menu.

Both the concerns you mentioned are valid. I had considered the concern about losing your place, but had not considered the issue with input fields. I will have to play around with this idea to see how the action could be scoped.

[bvaughn]

cc @flarnie 😄

[knitcodemonkey]

My biggest issue is trying to get back to the menu. What is the possibility of adding a keyboard shortcut for accessing it?

[bvaughn]

Oooh, maybe we could create some sort of shortcut keys for jumping directly to the menu, sidenav, content area, and maybe footer. (Not sure how this would work. Maybe something inspired by accesskey? I'm not very knowledgable here.)

[knitcodemonkey]

That looks perfect. I know for jsbin, in order to exit the content, the command is ALT/OPTION-TAB. Perhaps some combo to make it slightly intuitive.

It looks quite easy to add. https://www.w3schools.com/jsref/prop_html_accesskey.asp

[Rafi993]

Please do add skip links to the site too