Keyboard Navigation

Problem

Keyboard users get trapped in modal dialogs or can’t reach interactive elements. Custom dropdowns, accordions, and menus ignore Tab key navigation. Power users who prefer keyboard shortcuts are forced to use a mouse, significantly slowing them down.

Solution

Ensure all interactive elements are reachable and operable via keyboard alone. This supports keyboard-only users and assistive technology that relies on keyboard interfaces.

Example

This example demonstrates a custom dropdown that responds to keyboard input, allowing users to navigate with arrow keys and select items with Enter.

function Dropdown({ items }) {
  const handleKeyDown = (e) => {
    // Navigate down the list when user presses down arrow
    if (e.key === 'ArrowDown') navigateDown();
    // Navigate up the list when user presses up arrow
    if (e.key === 'ArrowUp') navigateUp();
    // Select the current item when user presses Enter
    if (e.key === 'Enter') selectItem();
  };

  // tabIndex={0} makes the element focusable via keyboard
  return <div onKeyDown={handleKeyDown} tabIndex={0}>{items}</div>;
}

Benefits

• Makes applications accessible to keyboard-only users and assistive technology.
• Improves usability for power users who prefer keyboard shortcuts.
• Meets WCAG requirements for keyboard accessibility.
• Supports mobile devices with external keyboards and switch devices.

Tradeoffs

• Requires additional development time to implement keyboard handlers for custom controls.
• Can be complex for rich interactions like drag-and-drop or drawing interfaces.
• Needs thorough testing across different keyboard layouts and assistive technologies.
• May conflict with browser shortcuts if not carefully designed.