What are cross-browser and cross-OS safe keyboard shortcuts usable for web application?

I am developing a quite large web application, and it is probably a good idea to use hotkeys for some common tasks. However, I discovered that finding safe key combinations is a problem, regarding all different browsers and OSes.

For example, Chrome has such a long list of hotkeys that trying to use some kind of logical hotkeys scheme for my web application is impossible - e.g. Ctrl + 1, Ctrl + 2, Ctrl + 3, etc.

Do you have some cheat sheet of safe hotkeys which can be used in a web application and not worry about some browser or OS interference?

Solution 1:

I wouldn't count on it. It's probably okay to listen for shortcuts that use the Alt modifier, but there's still no way to be sure a keyboard shortcut is free. Users can always install programs that listen for keyboard shortcuts, or use a browser you didn't expect.

If the shortcuts can be used only when the user is not typing in a textbox or something, it might be a better idea to just listen for keys pressed without a modifier key.

If no textbox or other GUI element is focused, then document.activeElement == document.body should be true (somebody correct me if I'm wrong).

Solution 2:

I don't think there is such a list. This may even be different for different locales.

You can try to rely on the accesskey feature of HTML: http://www.w3.org/TR/html401/interact/forms.html#adef-accesskey. This should keep the number of collisions relatively small. Though I believe the Windows browsers will offer these keys as Alt+Letter which collides with the menu bar.

Alternatively do what Google reader and Gmail do: use the letters directly without any hotkey modifier. That will only work for certain types of applications, though.

Solution 3:

Facebook uses the following ones that need different main keys to press depending on the used browser:

https://www.facebook.com/help/156151771119453?helpref=faq_content

Key Combinations for Different Browsers

Find the right combination of keys for your browser in the list below, and replace # with the access key number listed under access keys below.

Internet Explorer for PC: Alt + #, then Enter
Firefox for PC: Shift + Alt + #
Safari for Mac: Ctrl + Opt + #
Firefox for Mac: Ctrl + Opt + #
Chrome for Mac: Ctrl + Opt + #
Chrome for PC: Alt + #

Access keys
0 - Help
1 - Home
2 - Timeline
3 - Friends
4 - Inbox
5 – Notifications
6 – Settings
7 - Activity Log
8 - About
9 - Terms

However, Facebook supports these shortcuts in all browsers:

Web Messenger Keyboard Shortcuts
Ctrl + G - Search conversations
Ctrl + Q - Show/hide keyboard shortcuts
Ctrl + Delete - Archive/unarchive conversation
Ctrl + J - Mark as spam
Ctrl + M - Start a new message
Ctrl + I - Go to Inbox
Ctrl + U - Go to Other

Conclusion: Some shortcuts might work in all browsers, but most of them need additional explanation.

Solution 4:

As with most lists, it is easier to list (and therefore find) what exists rather than what is available. Depending on how you define "safe hotkey" there are quite a few (the basic ones), or thousands (slightly more advanced ones, like how Gmail uses two letter combinations (hotstrings)).

I think the best you can do is to look at these two comprehensive lists for OS and browser specific hotkeys, and make a list based on those. If you want to take it one step further, here is something that might help you (not tested it myself).

For your specific issue I think you should look at how Gmail, Facebook, Remember the Milk uses hotkeys; as these all have solved your issue elegantly. If you make a list of what they use you might have a list of hotkeys to use there. On a side note, I use Breevy, AutoHotkey, and several other programs that I create the advanced type of hotkeys (43,956 and counting), and because their are the simple kind, there was hardly ever an issue with overlapping hotkeys with their systems.