Skip to main content

Accessibility Best Practices

An effective OpenKeyNav integration joins keyboard operation with meaningful semantics, predictable focus, clear state, and complete workflow coverage.

Start with a functionality inventory​

Document every action and outcome available in each complete process:

  • links, buttons, form submission, disclosure, selection, sorting, and filtering;
  • drag-and-drop, movement, resizing, and placement;
  • dialogs, menus, composite widgets, editors, maps, charts, and canvases;
  • validation, error recovery, cancellation, confirmation, and completion; and
  • state changes created by routes, asynchronous content, permissions, and responsive layouts.

Assign a keyboard route to each item: conventional browser behavior, Click Mode, Move Mode, or an application-specific interaction.

Expose meaning through the page​

Use native controls for their intended purposes:

<a href="/services">Services</a>
<button type="button">Save changes</button>
<label for="query">Search</label>
<input id="query" name="query" type="search">

Provide programmatic names, roles, values, states, descriptions, and relationships. OpenKeyNav's visible target labels identify commands; the page's accessibility semantics identify what each target means.

Make OpenKeyNav discoverable​

Provide a visible, accessibly presented explanation. If the application also provides a control, make that control keyboard operable. Communicate:

  • how to turn OpenKeyNav on and off;
  • how to enter Click Mode and configured Move Modes;
  • how to select a target label;
  • how to exit or cancel a mode; and
  • whether the command layer is currently active.

Use the OpenKeyNav toolbar in the application or provide an equivalent discoverability surface that fits the host design. Pair its state-aware prompts with complete static instructions for every command the application enables.

Verify Click Mode coverage​

Invoke Click Mode in every relevant application state. Confirm that each expected target receives a label and that selecting the label performs the intended action once.

Evaluate listener-only actions, covered or offscreen elements, Shadow DOM, cross-origin frames, delegated events, composite widgets, and dynamically changing interfaces. Assign each function a Click Mode, conventional, or application-specific keyboard route.

Configure movement as a complete interaction​

For each Move Mode workflow:

  1. define valid source elements;
  2. define valid destinations for each state;
  3. connect the completion callback to the application's state model;
  4. announce source selection, destination choices, errors, cancellation, and completion;
  5. place focus where the user can continue; and
  6. test every valid and invalid route.

Preserve predictable focus and control behavior​

Keep focus visible and meaningful after every command. Follow established keyboard patterns for native and ARIA widgets. Test Tab, Shift + Tab, arrow keys, Enter, Space, Escape, Home, and End wherever those commands apply.

Treat composite widgets as complete interaction systems. Route OpenKeyNav navigation to the widget's page-level focus target while the widget retains its internal keyboard behavior.

Manage character shortcuts​

OpenKeyNav keeps its character commands behind a persistent on/off mechanism. Make that mechanism discoverable and verify that turning it off stops OpenKeyNav's printable-character commands.

Test the final key configuration with:

  • text inputs, textareas, contenteditable regions, and custom editors;
  • host-application shortcuts;
  • browser and operating-system commands;
  • screen-reader commands;
  • speech input and dictation; and
  • alternate keyboard interfaces.

See WCAG 2.1.4 Character Key Shortcuts.

Use diagnostics as focused review​

The debug heuristic identifies actions for focused keyboard review and includes each outlined target in Click Mode's direct-selection labels. Review semantics, names, roles, state, focus, activation outcomes, and complete-task coverage for every candidate.

Record the heuristic's candidate count, then complete the review with manual keyboard and assistive-technology testing.

Disable the diagnostic presentation for the production experience when the development review is complete:

const openKeyNav = new OpenKeyNav();

openKeyNav.init({
  debug: {
    keyboardAccessible: false,
  },
});

Test complete processes with people​

Combine standards evaluation, automated checks, manual keyboard testing, supported assistive technologies, and task-based sessions with disabled users. Record the browsers, technologies, application states, workflows, and outcomes tested so releases can be compared over time.

Continue with Accessibility and WCAG Support or the ADA Title II keyboard accessibility guide.