Skip to main content

Click Mode

Click Mode gives detected page targets an on-demand keyboard path. When a user invokes the mode, OpenKeyNav scans the visible page and assigns short labels to the targets it detects. Typing a label focuses or activates the selected target directly.

Activate Click Mode​

Initialize OpenKeyNav at the document or application root:

const openKeyNav = new OpenKeyNav();
openKeyNav.init();
  1. Press Shift + O to turn the OpenKeyNav command layer on.
  2. Press K to enter Click Mode.
  3. Type the label beside the intended target.
  4. Press Escape to leave the mode without selecting a target.

OpenKeyNav removes the labels when the selection finishes or the user exits.

Detected targets​

Click Mode examines visible native controls, links, recognized interactive roles, editable content, elements with tabindex, and elements with inline click handlers. It evaluates the current document state each time the mode starts, so newly rendered elements that match these detection rules join the next interaction.

Complete action coverage by evaluating Click Mode in every application state. Assign conventional or application-specific keyboard routes to covered or offscreen actions, delegated or listener-only handlers, Shadow DOM, cross-origin frames, and specialized widgets that remain outside its detected targets.

Configure the command​

Change the Click Mode command through the keys configuration:

const openKeyNav = new OpenKeyNav();

openKeyNav.init({
  keys: {
    click: 'c',
  },
});

Test the final command with text entry, host-application shortcuts, browser and operating-system commands, screen readers, and speech input.

Diagnostics​

With debug.keyboardAccessible enabled, Click Mode outlines actions selected for manual keyboard review and includes them in its direct-selection labels. Review each target's semantics, accessible name, role, state, focus behavior, activation outcome, and complete task flow.

WCAG 2.1.1​

Click Mode creates a direct keyboard route to detected actions: invoke the mode, type a label, and reach the intended target or result. The WCAG 2.1.1 guide explains how teams establish coverage and verify every required outcome.