Keyboard Shortcut

A keyboard shortcut is a key or combination of keys that triggers an action without using the mouse. In web accessibility, poorly designed shortcuts create more problems than they solve: they conflict with screen readers and cause unintended actions for voice command users.

A user dictates an email by voice recognition. They say "I arrive tomorrow." The letter "j" activates a web application shortcut and the content disappears. The problem is not voice recognition. It's the shortcut.

#Why single-key shortcuts cause problems

Applications like Gmail use single-key shortcuts: "j" for the next email, "k" for the previous one, "c" to compose. Convenient for experienced users. Problematic for others.

Voice command users dictate letters. Every letter spoken can trigger an unintended shortcut. Screen reader users already navigate with keys: H for headings, K for links in NVDA. An application shortcut on the same key creates a conflict. People with motor disorders sometimes press keys accidentally.

WCAG criterion 2.1.4 (Level A) manages this risk. If a shortcut uses only a character key (letter, number, symbol), it must meet at least one condition: it can be turned off, it can be reconfigured to include a modifier key (Ctrl, Alt), or it is only active when the relevant component has focus. RGAA criterion 12.10 restates this requirement.

#The accesskey trap

HTML offers the accesskey attribute to assign a shortcut to an element:

<button accesskey="s">Save</button>

The idea is good. The execution is not.

Every browser interprets accesskey differently. On Chrome Windows, it's Alt + the key. On Firefox Mac, it's Ctrl + Option + the key. On Safari, yet another combination. WebAIM recommends avoiding accesskey: the inconsistency across browsers makes the shortcut unpredictable, and conflicts with browser or operating system native shortcuts are common.

If you insist on offering shortcuts, prefer JavaScript with combinations that include modifier keys (Ctrl + Shift + S, for example). Document them. And provide a way to disable them.

#In summary

Keyboard shortcuts are useful when they include a modifier key and the user can turn them off. Document them visibly. A single-key shortcut without these guarantees is not a help. It's an obstacle.

Back to glossary
Share this article

Learn more

Keyboard Navigation

Keyboard navigation refers to the ability to browse and use a web interface using only keyboard keys, without a mouse. It is the primary mode of interaction for people who cannot use a pointing device, and a basic test to verify a website's accessibility.

Keyboard Accessible and Activatable

A component is « keyboard accessible » when you can select it with Tab, and « activatable » when you can trigger its action with Enter or Space. Native HTML elements like <a>, <button> and <input> are by default. A <div> with an onclick, is not.

Keyboard Trap

A keyboard trap occurs when focus enters a component on the page and can no longer exit using standard keys (Tab, Escape, arrows). The user is stuck: impossible to continue without a mouse. WCAG criterion 2.1.2 (level A) prohibits this situation.