Which key to bind to avoid conflict with native browser shortcuts

Question

Hi,

I didn't see the question yet. Every browser has different native keyboard short-cuts. Did someone already tried to figure out which one free / safe to use if we want to add some spicy stuff to our web-app?

Thanks in advance.

Answer 1

The short answer is:

Disappointingly, our research discovered that all but 3 keys were previously "claimed" by one technology or the other:

* AccessKey / (slash)
* AccessKey (backslash)
* AccessKey ] (right square bracket)

This is explain in this article:

• http://www.wats.ca/show.php?contentid=32

This wikipedia article give a good general introduction into this subject:

• http://en.wikipedia.org/wiki/Access_key

Answer 2

Some more informations:

I don't especially need to target every browser. The 5 majors one are sufficient. For example Opera uses Ctrl+key as main combination, leaving almost all Alt+Key "free to bind".

As different browsers uses a different main shortcut activation key (Ctrl in Opera), I can easily imagine to also use a different key to bind shortcuts to. i.e Alt + Key in Opera and Ctrl + Key in browser_2 and Ctrl + Alt in browser 3

Answer 3

If you only need keyboard shortcuts outside of form elements having focus, I would use plain letters (no shift/alt/ctrl/etc.). Regular characters are only important to the browser if a form element has focus. Otherwise they're ignored.

For example, if you have paginated content, "p" could be previous and "n" could be next.

(Not sure if this would completely solve your problem because this won't work when a form element has focus.)

---

Based on your comment (the focus will be inside a textarea), I would suggest a single letter chosen for each action with a different ctrl/alt/shift combination per browser. Most people only use one browser, so for each user to learn just their own combination isn't a big deal.

So, for example, ctrl-alt-n in one browser might be the same as alt-n in another.

The first thing I would test, though, is shift, because most built-in combinations don't use one, but I don't know if the combos are always case-insensitive. Also watch out for OS-specific combos.

Here's what I've found mostly available so far:

OS X    - FF/Safari/Chrome - ctrl-[key]
Windows - FF/IE            - ctrl-alt-[key]

Answer 4

My recommendation is to change it depending on the browser. The fact is, there are so many browsers out there, I think you'd be hard-pressed to come up with a shortcut scheme that won't break on at least one popular browser.

You could change the shortcut setup based on the browser and also change the instructions specifying which shortcuts to used based on the user's browser.

Ideally, you'd make the shortcut as intuitive as possible (ctrl+x, or alt+x etc) without actually interfering with the browser.

---

Edit: Alternatively if you're comfortable overriding default functionality, maybe use this: http://www.openjs.com/scripts/events/keyboard_shortcuts/

When you specify a shortcut with it, the browser will ignore that shortcut, and you can use it in your app (like gmail does with ctrl+s, for example).

Answer 5

For Mac users you want to definitely go with ctrl as alt is used to type many different characters and command is the default action key which the browsers use. I'd avoid combos that use basic emacs style shortcuts as well (some users use them like Ctrl-k which SO manages to screw up ;) though these are less known and so possibly usable.

For windows it's more complicated - and I don't have a win box to test it myself.

Answer 6

Screen readers (JAWS, NVDA, ...) already use the whole keyboard, dead keys included (I'm exagerating a little but it's competing with Adobe Photoshop in terms of number of keyboard shortcuts used).

So if you want to support screen readers and other assistive technologies, you should use ARIA and especially role="application". That'll avoid conflicts between your application and the default functioning mode of screen readers in web pages. One drawback is that you've got dozens and dozens of pages to read ...

Introduction à WAI/ARIA (traduction en français) (our common native language, isn't it SDZ/zC? ;))

EDIT: One of the way to solve conflicts is letting the user define and modify his own shortcuts.

Answer 7

For a pragmatic solution, copy Google. They have keyboard shortcuts in Gmail (and probably other products) that do a pretty good job of avoiding browser shortcuts.