Best Modifier Key Combination for Web Shortcuts

Question

Many users of my website asked for keyboard shortcuts to access commonly viewed pages. I know that links may have accesskey but to access them is inconsistent across browsers. I'm going to use JavaScript to detect shortcut and I would like your input on what the modifier key(s) should be. I'm leaning toward Ctrl+Shift.

Answer 1

Two examples probably isn't enough to call it "established practice", but it's two big examples at least: Both Google and Twitter use none. Or, if you want to see it this way, their modifier key for navigation is G.

To go to your Twitter "favorites" page, you hit G, then F. To go to your gmail drafts folder, hit G then D.

Non-navigation shortcuts also use simple letters; e.g. J for moving forward in a list (tweets, emails, etc.), K for moving backwards.*

^{* In my book, this is absolutely wrong. To me, "J" being to the left of "K" means "J" should be "previous" and "K" should be "next". However, doing it the other ways around seems to be the standard.}

Neither of the two use a "real" modifier key at all. We're also starting to look at keyboard shortcuts for the Stack Exchange sites, and we're likely to do the same thing. Two more reasons I see for not using a modifier key at all:

• Less likely to trip over something that's already in use. Any combination of Ctrl, Alt, Meta, Command, Shift with a letter is probably already taken by some operating system, window manager, browser, browser plugin, or Greasemonkey script. Letter-only? Not so much.
• Easier to use. "Press Ctrl-Alt-Q to open the Foo tab, then Meta-Shift-F12 for execute the Bar action" – that doesn't make my life easier/faster, which is whole purpose of keyboard shortcuts.

On the other hand, here are two caveats to consider:

• You'll obviously have to ignore the keystrokes when they happen while the user is typing in a text box. This isn't a technical problem, but it means that the user can't use the shortcuts then.

  If, say, your page auto-focuses the search box, or your web app is very text entry heavy, this may pose an issue.

• You may want to think about enabling/disabling. Keyboard shortcuts are a power user feature; a "normal" user may be surprised when they accidentally trigger a keyboard shortcut (obviously a modifier key would make this less likely).

  Gmail for example has keyboard shortcuts turned off by default, with the exception of ? which (naturally) shows the keyboard shortcut help – including a link to enable/disable shortcuts. I think keyboard shortcuts are an area where you can say it's okay to make it a setting (user preferences is something we generally try to avoid on the Stack Exchange sites), and Google's solution for this seems nice for this.

  But "off by default" obviously does hide discoverability, which may or may not be an issue.

– but all things considered, "no modifier key" at all seems like a good solution to me.

Answer 2

There's no 'best' or universal key modifier choice

Your best options are to:

1. Use no modifier key (single keypresses only), then stop detecting keypresses when the user's cursor is in an input field or textarea, like Google does with Gmail shortcuts.

   -- or --

2. Pick a default that suits the majority of your visitors based on the operating system statistics from your Analytics data. Allow power users who want shortcuts to activate them and override the modifier key in their user settings, in the same way that desktop software does.

   -- or --

3. Use a 'trigger' key instead of a modifier key. Consider ,2 to go to the second tab in your tabbed navigation area and ,3 to go to the third one, for example. The combination of a comma followed immediately by a number is unusual enough to reduce the likelihood of conflicts or accidental presses.

In all cases, you might consider disabling shortcut keys by default to prevent unexpected behaviour for the majority of users who probably don't care about shortcut keys.

Why not just pick a modifier combo?

The reason I suggest these methods is that there's no standardised cross-platform modifier key that you can consider safe to use with JavaScript in a browser environment. Anything containing Ctrl, Shift, Alt, or Cmd will likely break some browser shortcuts on certain platforms.

Your suggestion to use Ctrl+Shift, for example, will break Firefox shortcuts on Windows, many of which use that combination to perform special functions, such as Ctrl + Shift + D, which bookmarks all open tabs.

Browser manufacturers use different shortcuts to trigger accesskeys on each different platform precisely because there's no cross-platform standard. Apple uses Ctrl on the Mac and Alt on Windows in Safari, for example.

What's more, each browser resolves shortcut conflicts differently, and this will lead to unexpected consequences for your users. When you bind a keypress to a function in JavaScript that also has a binding as a native browser shortcut...

• Firefox will run the JavaScript shortcut on its own if you return false; but will execute your JavaScript function followed by the Firefox browser shortcut if you return true; (i.e. it runs both by default.)
• IE will run the JavaScript function followed by the IE browser shortcut.
• Safari/Chrome/Opera will process the browser shortcut but not the JavaScript one.

[Source: the addendum at the foot of John Resig's jquery.hotkeys readme page.]