Goal
Ensure that keyboard shortcuts using single character keys (like letters, numbers, punctuation, or symbols) do not cause problems for users who rely on speech input or assistive technologies.
Key Points
- Applies to single-key shortcuts (e.g., pressing “B” for bold).
- Such shortcuts must not activate automatically — they should:
- Be turned off by the user, or
- Be remapped to different keys, or
- Work only when a specific UI component (like a text field) is focused.
- Prevents accidental activation by users with speech recognition software or tremors.
Short Summary
If your app uses single-character keyboard shortcuts, provide a way to disable, customize, or limit them to specific contexts so users don’t trigger unwanted actions accidentally.
Example Issue and Fix
Global single-key shortcut always active
Fail
<div x-data="failShortcutHandler" class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div>
<p class="mb-4 text-gray-700">Press "D" to delete the message.</p>
<div id="message" class="p-4 bg-gray-100 rounded">Important message</div>
</div>
</div>
Press “D” to delete the message.
Important message
Pass
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<div x-data="passShortcutHandler" x-init="init" class="space-y-4">
<div class="flex items-center gap-2">
<input type="checkbox" id="shortcutToggle" x-model="shortcutEnabled" class="w-4 h-4" />
<label for="shortcutToggle" class="text-gray-700">Enable delete shortcut (D)</label>
</div>
<p class="text-gray-600">Press “D” while focused here to delete the message:</p>
<div
tabindex="0"
@focus="activate"
@blur="deactivate"
class="p-4 border rounded bg-gray-100 focus:ring-2 focus:ring-blue-500 outline-none"
>
<div x-show="isNotDeleted" x-transition id="message" class="p-4 bg-white rounded shadow">
This is an important message.
</div>
<div x-show="deleted" class="text-red-600">Message deleted.</div>
</div>
</div>
</div>
Press “D” while focused here to delete the message:
This is an important message.
Message deleted.
Quick Checklist
- No single-key shortcuts active globally
- Shortcuts only work when element has focus
- Users can disable or remap shortcuts
- Follow CSP: no inline event handlers or scripts
- Use semantic elements (like buttons or inputs) for keyboard interactions