Keyboard Shortcuts — Custom Shortcut Key Implementation

In this tutorial, you will learn about Keyboard Shortcuts. We cover key concepts, practical examples, and best practices to help you master this topic.

Custom keyboard shortcuts improve efficiency for all users but must be implemented with discoverability, preventing conflicts with browser and screen reader shortcuts.

In this tutorial, you'll learn accessible Keyboard Navigation shortcut implementation.

What You'll Learn

By the end of this lesson, you'll understand how to implement keyboard shortcuts, avoid conflicts with assistive technology, and make shortcuts discoverable.

Why It Matters

Undiscoverable shortcuts help no one. Shortcuts that conflict with browser or screen reader shortcuts harm Accessibility.

Real-World Use

Durga Antivirus Pro exposes keyboard shortcuts via aria-keyshortcuts so screen reader users can discover commands like Ctrl+S for scan.

Shortcut Architecture

flowchart LR
  A[Register shortcut] --> B[Check for conflicts]
  B --> C[Implement handler]
  C --> D[Expose via aria-keyshortcuts]
  D --> E[Document in help]
  E --> F[Ensure discoverable]

Implementing Shortcuts

document.addEventListener('keydown', (event) => {
  // Check modifier keys
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    startScan();
  }
  if (event.ctrlKey && event.shiftKey && event.key === 'S') {
    event.preventDefault();
    stopScan();
  }
});

Avoiding Conflicts

Avoid or allow customization for:

• Browser shortcuts (Ctrl+T, Ctrl+W, Ctrl+N)
• Screen reader shortcuts (Ctrl, Insert, CapsLock)
• Operating system shortcuts (Alt+F4, Win+D)

// Allow single-key shortcuts only when not in input
document.addEventListener('keydown', (event) => {
  if (event.target.matches('input, textarea, select, [contenteditable]')) {
    return; // Let input elements handle their own keys
  }
  if (event.key === 's') {
    startScan();
  }
});

Exposing Shortcuts

Use aria-keyshortcuts to make shortcuts discoverable:

<button aria-keyshortcuts="Ctrl+S" onclick="startScan()">
  Start Scan
</button>

Common Mistakes

• Overriding browser shortcuts: Ctrl+S and Ctrl+P should remain unchanged.
• Using single keys without a modifier: Single keys can conflict with typing.
• Not providing an alternative access method: Shortcuts should supplement, not replace, other navigation.
• Not documenting shortcuts: Users cannot use shortcuts they do not know.
• Not allowing customization: Users with motor disabilities may need to remap keys.

Practice and Challenge

1. Why should you avoid overriding browser shortcuts? Users expect browser shortcuts to work consistently.

2. How do you expose a shortcut to screen readers? With the aria-keyshortcuts attribute.

3. Why should shortcuts have modifier keys? To distinguish them from normal typing.

4. What is the recommended way to document shortcuts? In a help menu or keyboard shortcut reference.

5. Challenge: Add three keyboard shortcuts to a page with aria-keyshortcuts. Ensure they do not conflict with browser or screen reader shortcuts.

FAQ

Mini Project

Create a toolbar with shortcuts for New (Ctrl+N), Open (Ctrl+O), Save (Ctrl+S), and Print (Ctrl+P). Use aria-keyshortcuts and document shortcuts in a help dialog.

What's Next

Continue to Skip Links to learn about skip navigation links.