Keyboard shortcuts use standard key combinations

Custom keyboard shortcuts that use single-character keys (letters, numbers, punctuation) without a modifier conflict with screen reader commands — screen readers intercept single-key presses as navigation commands. WCAG 2.2 SC 2.1.4 (Character Key Shortcuts) requires that single-character shortcuts can be turned off, remapped, or are only active when the relevant component has focus. Section 508 2018 Refresh 407.7 covers key repeat and shortcut behavior. The concrete failure: an application that binds 'S' to search while a screen reader user is navigating will trigger the search instead of reading the next element. Undocumented shortcuts compound the problem — users cannot discover or avoid them. Browser shortcut conflicts (Ctrl+L for address bar, Ctrl+T for new tab) can trap or disorient all keyboard users.

Require at least one modifier key (Shift, Ctrl, Alt, or Meta) for any shortcut that is active across the whole application. Single-key shortcuts scoped to a specific focused component (like Arrow keys within a menu) are acceptable.

// Bad: Single-character global shortcut
document.addEventListener('keydown', (e) => {
  if (e.key === 's') openSearch(); // Conflicts with screen readers
});

// Good: Modifier-key shortcut
document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.shiftKey && e.key === 'K') {
    e.preventDefault();
    openSearch();
  }
});

// Always document shortcuts in an accessible location
const SHORTCUTS = [
  { keys: 'Ctrl+Shift+K', action: 'Open search' },
  { keys: 'Ctrl+Shift+/', action: 'Open keyboard shortcuts' },
];

// In a help dialog
<table aria-label="Keyboard shortcuts">
  <thead><tr><th scope="col">Keys</th><th scope="col">Action</th></tr></thead>
  <tbody>
    {SHORTCUTS.map(s => (
      <tr key={s.keys}>
        <td><kbd>{s.keys}</kbd></td>
        <td>{s.action}</td>
      </tr>
    ))}
  </tbody>
</table>

Avoid Ctrl+L (address bar), Ctrl+T (new tab), Ctrl+W (close tab), Ctrl+R (reload), and F1–F12 shortcuts that browsers reserve.

• ID: accessibility-basics.keyboard-focus.keyboard-shortcuts-standard

• Severity: high

• What to look for: Enumerate every relevant item. Check for custom keyboard shortcuts in the application. Verify that they use standard key combinations (e.g., Ctrl+S for save, Ctrl+Z for undo) and do not conflict with browser shortcuts (Ctrl+T for new tab, Ctrl+L for address bar) or OS shortcuts.

• Pass criteria: At least 1 of the following conditions is met. Custom keyboard shortcuts use standard conventions and do not override browser or OS shortcuts. Shortcuts are documented in the UI or help section.

• Fail criteria: Custom shortcuts conflict with browser or OS shortcuts, or non-standard shortcuts are undocumented.

• Skip (N/A) when: The application has no custom keyboard shortcuts.

• Detail on fail: Identify conflicting shortcuts. Example: "Ctrl+L used for custom filter, conflicts with browser address bar focus. Alt+F used for custom function; not documented."

• Remediation: Use standard conventions and document shortcuts:

  useEffect(() => {
    const handleKeyDown = (e) => {
      // Use Shift+Ctrl for custom shortcuts to avoid conflicts
      if (e.shiftKey && e.ctrlKey && e.key === 'D') {
        e.preventDefault();
        handleOpenDialog();
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);
  

  Document shortcuts in a help modal:

  <Modal title="Keyboard Shortcuts">
    <p>Shift+Ctrl+D — Open dialog</p>
    <p>Shift+Ctrl+S — Save</p>
  </Modal>