Provide Control Over Single-Character Key Shortcuts

Disabilities Affected: Mobility

Success Criterion: 2.1.4

Level: A

If a keyboard shortcut is implemented using only letter (including upper- and lower-case), punctuation, number, or symbol characters, then at least one of the following must be true:

Turn off: A mechanism is available to turn the shortcut off.
Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g., Ctrl, Alt, Cmd).
Active only on focus: The shortcut for a user interface component is only active when that component has focus.

Why It Matters

Speech input users may accidentally trigger single-character shortcuts while dictating text, leading to unexpected actions. Users with motor tremors might press keys unintentionally. Requiring modifier keys (Ctrl, Alt, Cmd) or limiting shortcuts to when a component is focused prevents these accidental activations.

Fixing the Issue

Avoid implementing single-character key shortcuts if possible. If they are used:

Prefer shortcuts that require modifier keys (e.g., Ctrl+S for Save).
If using single-character shortcuts, ensure they are only active when the relevant component or application area has focus (e.g., ‘j’ and ‘k’ to navigate messages in a webmail app only work when the message list has focus).
Provide a settings panel where users can disable or remap single-key shortcuts.

Good Code Example

(Conceptual) JavaScript listening for shortcuts with modifiers or when focused:

// Example 1: Shortcut requires modifier key (Ctrl + P)
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'p') {
    event.preventDefault(); // Prevent browser print dialog
    console.log('Ctrl+P shortcut activated - perform custom print action');
    // performCustomPrint();
  }
});

// Example 2: Single-key shortcut ('?') active only when help section has focus
const helpSection = document.getElementById('help-widget');
if (helpSection) { // Check if element exists
    helpSection.addEventListener('keydown', function(event) {
      if (event.key === '?') {
         console.log('? pressed while help section focused - show details');
         // showHelpDetails();
      }
    });
}

// Ensure the help section can receive focus if needed
// <div id="help-widget" tabindex="-1">...</div>

Bad Code Example

A global single-key shortcut that can be triggered accidentally:

// Bad: Listens globally for the 'm' key without modifiers
document.addEventListener('keydown', function(event) {
  if (event.key === 'm') {
    console.log('M key pressed - maybe toggling mute?');
    // toggleMute();
    // This could be triggered accidentally while typing in any input field
    // or while dictating text using speech input.
  }
});

Search Ultimate Guide

Free eBook

Integrating Accessibility Compliance Into Your Budget

A practical guide for healthcare leaders navigating WCAG compliance.

Learn More

Need help with digital accessibility?

Our team is here to guide you through the process of meeting accessibility standards. Contact us today to get started.

Schedule Consult