Keyboard shortcut keys for Tabs?

Question

In the below web UI if I interact via keyboard keys, which are the right keys used for tabs(General/Firewall/Privacy) navigation?

a) Tab key

b) Left,Right arrow keys

c) Left, Right, Top & Bottom arrow keys

d) all the above

Answer 1

Most IDEs, Web Browsers, and other TDI software use CtrlTab for switching tabs no matter which UI element currently has focus.

References:
Chrome keyboard shortcuts
Mozilla Keyboard shortcuts
PHPStorm Navigating Between Editor Tabs

Edit addressing edited question: Unfortunately, web-based GUIs have no conventions. Even the Github interface does not use keyboard controls to provide tab navigation. Any examples of web-based GUIs that provide keyboard shortcuts for tab navigation would be appreciated in the comments.

Answer 2

Microsoft has existing keyboard navigation standards.

https://msdn.microsoft.com/en-us/library/ms971323.aspx

In short:

tab moves between widgets

In Windows applications, users navigate by pressing the TAB key to move the input focus from one UI element to another

arrow keys navigate through options within the larger control (e.g., menu items, drop down options)

The input focus must be on the selected item only, and a user must be able to select other options by using arrow keys.

As your images is in the store of a Windows application in assuming that is your target. This interaction pattern is common throughout other operating systems, if you're target is elsewhere.

Answer 3

An important aspect to remember with tabbing and tab-index is accessibility. I assume you are asking this question because you want the best keyboard approach so there are two things to consider.

A screen reader is going to read out the name of your tabs, and with aria labels tell the user if that tab is currently open or closed when the user is alerted to such fact they will do one of two things. Tab onto the next tab, or space/enter to open the current tab.

For someone that is not using a screen reader they are going to tab through and expect a different behaviour. Tab'ing highlights the tabs, then goes on to the next tab etc. until one is open, when they hit an open tab, they would expect the next tab key to move them into the open tab and select the first form field. Unlike the accessible screen reader user that is used to opening tabs then interacting with them.

In both cases arrow keys are not used in web accessible interfaces for interacting with elements unless an input field is open for selection.

I hope these views help you make a decision on which approach. I would check with what your legal requirements are under government accessibility laws, and go with what the majority of your users intend. However do make sure you add aria labels in development so screen readers know what is going on if you go against a screen reader paradigm.

Answer 4

See this attachment:

1) Taking cues/references from early MS word interfaces, you could think of putting a custom keyboard shortcut for the tabs.

2) Generally these are the first letters (assuming there is no conflict) of the word.

3) These can then be accessed via Alt+letter (Opt+letter).

4) This is lot easier than expecting the user to understand Ctrl+Tab like standard shortcuts would apply to the user interface as well. These are more thought on a browser window level.

One can debate of how would a user understand that Alt+letter has to be keyed in to change the tab - but the reasoning could be that lot of word users are already aware of that, and for the rest, a hint or a tip could do the trick. Lot easier to change tabs in a non-consecutive fashion also.

Here is the MS-word reference:

Answer 5

The first question is do you really need two layers of navigation? From the screen you've posted it doesn't seem like there are that many options. For websites it is perfectly fine to put a longer list of settings.

By putting all settings in one long list, you could still group them under unselectable labels General, Firewall and Privacy.

With just one level of navigation you could simply map up and down keys to navigate through the settings.