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
KeyboardEventobject) 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
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.
Q, matching the character produced by that key in the AZERTY layout and meeting the user’s expectation.
KeyAregardless 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
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
will not trigger the expected shortcut action.
Moreover, there is a potential for conflict with browser or system-level
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
event.keyfor shortcuts to align with user expectations on character output, reserving
event.codefor scenarios where the physical key location matters, such as in gaming controls.
- Avoid the deprecated properties
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.