(last updated: )

Two Common Pitfalls for Keyboard Shortcuts in Web Applications

Keyboard shortcuts are essential for navigating web applications efficiently. However, I often encounter two frustrating issues that can significantly degrade the user experience, sometimes to the point of making applications unusable.

Pitfall: Using Alt/Opt Key with Characters for Shortcuts

When choosing keyboard shortcuts for web applications, avoid using combinations of the Alt key (or Option key on macOS) with letters or numbers. These combinations are often reserved for typing special characters in various international keyboard layouts. Assigning shortcuts to these key combinations can interfere with the input of characters like parentheses, currency symbols, or diacritical marks, frustrating users who rely on these layouts.

For example, on the German QWERTZ layout, the @ sign is mapped to Alt + Q on a Windows keyboard, and to Alt + L on an Apple keyboard. Mapping an application shortcut on these combinations will make it impossible to type an @.

Similarly, on the French AZERTY layout, the acute accent ◌́ (used to type é when combined with e) is mapped to Alt + 2. Also on the AZERTY keyboard, Alt + K is mapped to the forward slash (/). Using these key combinations for web application shortcuts could prevent users from typing these essential characters.

The German Neo2 layout, designed for programmers and scientists, makes all common punctuation and special characters needed for programming accessible via the Alt key (referred to as Mod3 in this layout). There is a character behind every Alt + letter and Alt + number combination.

These examples illustrate just a small fraction of the potential conflicts that can arise due to the wide array of keyboard layouts and key mappings used globally. It’s crucial for developers to understand and accommodate this diversity to ensure their web applications are accessible and user-friendly for an international audience.

  • Opt for modifier keys such as Ctrl (checked via ctrlKey in the JavaScript KeyboardEvent object) or combinations of Ctrl (ctrlKey) and Shift (shiftKey) for shortcuts, as they are less likely to clash with character input on international keyboard layouts.
  • Exercise caution with the Meta key (metaKey), which is represented by the Command key (⌘) on macOS and the Windows key on Windows systems, as these keys are frequently tied to system-wide shortcuts.
  • Avoid common shortcuts used by the major browsers.
  • While establishing sensible defaults for keyboard shortcuts is essential, there remains a possibility of unintended conflicts due to the wide array of operating systems, browsers, and assistive technologies. In light of this, it is recommended to provide users with the option to customize or disable shortcuts to accommodate their unique configurations.
  • Refer to the WCAG success criteria for keyboard accessibility, especially the section about character key shortcuts.

Pitfall: Using event.code Instead of event.key for Keyboard Events

When implementing keyboard event handlers in web applications, understanding the roles of event.key and event.code within the KeyboardEvent object is crucial. The event.key property reflects the actual character or functional intent of a key press, which is layout-dependent. In contrast, event.code corresponds to the physical key location on the keyboard regardless of the character it produces on a particular layout.

Take the example of a user with a French AZERTY keyboard layout pressing the key labeled Q that corresponds to the letter A on an English QWERTY layout:

  • event.key will report Q, matching the character produced by that key in the AZERTY layout and meeting the user’s expectation.
  • event.code will report KeyA regardless of the layout, because it refers to the physical position of the key, not the character it produces on a particular layout.

This distinction becomes critical for application shortcuts. If a shortcut is mapped using event.code and documented as employing the A key, it will not correspond to the A character on an AZERTY keyboard, and thus the AZERTY user pressing their A key (which produces a KeyQ code) will not trigger the expected shortcut action.

Moreover, there is a potential for conflict with browser or system-level shortcuts if event.code is used. A key that an AZERTY user associates with a specific system function may, when pressed, activate a different action in the web application, due to the web application’s reliance on the physical key location.

  • Use event.key for shortcuts to align with user expectations on character output, reserving event.code for scenarios where the physical key location matters, such as in gaming controls.
  • Avoid the deprecated properties keyCode, charCode, and which.

Conclusion

By taking these points into account, developers can ensure that web application shortcuts are user-friendly and globally accessible, thus enhancing the overall user experience.

Resources

MDN Web Docs

Accessibility

Keys and Keyboard Layouts

Browser Shortcuts