Keyboard Shortcuts on Browser: A Hot Mess
Too many footguns, not enough discussions.
Here be dragons.
People are most familiar with
Cmd + Shift + *shortcuts but since browser is an app itself it reserves many shortcuts like
Cmd + P,
Cmd + Shift + N,
Cmd + Shift + P.
Some keyboard shortcuts are not overridable like
Cmd + W,
Cmd + Shift + T
User might have some apps installed which run on
Cmd + Shift + C,
Cmd + Option + Dso during testing things might be fine but for real users some popular apps might be taking over and there's no way to know.
The reserved kbd shortcuts may vary on browsers and operating systems. Like Firefox open incognito with
Cmd + Shift + Pwhereas Chrome open on
Cmd + Shift + N.
For Mac use Cmd, for Windows need to use Control. Similarly other kbd shortcuts have to be dynamically mapped.
Browser extensions can also potentially bind keyboard shortcuts.
Alternative APIs without Cmd means that we don't know if user is pressing keys to type or if they actually want to run a keyboard shortcut. For eg-
Shift + P. Maybe user pressed it to type uppercase P.
If non modifier based shortcuts need to be supported then we have to disable shortcuts on all fields where user can type. May not be very trivial depending on the app.
Non modifier based shortcuts can be accidentally triggered by heavy keyboard and speech input users so they have to be disabled or need alternate shortcuts to pass Accessibility Success Criterion 2.1.4: Character Key Shortcuts
If we have many complementary shortcuts like
* + X
opens Create X Modal and
* + * + Xnavigates to List X page then to give a consistent experience is even more hard since
Cmd + Pmight be available but
Cmd + Shift + Pmay not.
Option is not a modifier like Cmd or Shift. Option's main purpose is to provide alternative letters on standard keys like typing
Option + owould lead to
ø. So it runs into same issues as Shift + P.
If we need to support variants shortcuts like
Cmd + Popens Create Payout but
Cmd + Option + Popens bulk payouts then again very few shortcuts are possible. Another example of variants is of that in Mac.
Cmd + Vduplicates a copied file to current location whereas
Cmd + Option + Vmoves the original copied file to current location.
Having an intuitive system for complementary and variant shortcuts is very important if user is supposed to remember the shortcuts. If shortcuts are made ad-hoc without consistency then they won't stick in people's head and they're just going to use the mouse instead of digging the shortcut.
Sequence shortcuts give the most flexibility. But they have a problem that it's hard to explain in text how to use them. Like press
gthen release it then press
p. People are more used to pressing 2 or 3 keys together.
Even with sequence type shortcuts if the first key is not modifier then they run into same issue of non modifier type shortcuts.
Sequence shortcuts like
Cmd + G , pmay look like a good solution but problem is that browsers already have a shortcut on
Cmd + G. It is overridable but since there is some time gap in pressing
pour custom version will not take over instead browser one will be immediately triggered.
Cmd + * , *have even more flexibility than just letter sequences but they are even more hard to explain to user textually and the most unusual too.
This talk from a Figma engineer reveals even more footguns.