Skip to main content
OpenKeyNav™Open-source JavaScript keyboard accessibility library

Improve keyboard accessibility for complex web interactions.

Developers use OpenKeyNav to add on-demand target labels, direct keyboard navigation, and keyboard-accessible drag-and-drop to websites and web apps.

Try the live demoStart implementing
  • MIT licensed
  • Configurable shortcuts
  • Framework-agnostic

Install the package

Install
npm install openkeynav
Package behavior

OpenKeyNav adds keyboard paths for configured interactions and can flag likely mouse-only controls during development.

Interactive demo 01

Click Mode demo​

Call a firefly with one shortcut

Enable OpenKeyNav and press K without Shift. Type the label beside Juniper to send it straight to the lantern.

Click Mode lets you choose a visible target directly. Press Esc to leave Click Mode.

Live Click Mode demoShortcuts off
Midnight gardenThe lantern keeper
7 fireflies
Your task

Call Juniper to the lantern.

  1. Current step.
  2. Upcoming step. Press K without Shift
  3. Upcoming step. Type Juniper’s label
Garden quietThe lantern keeper waits for Juniper.
Configure Click ModeTry Move Mode next in the potion lab

Interactive demo 02

Move Mode demo: Keyboard-accessible drag and drop​

Choose where the magic lands

Enable OpenKeyNav and press M without Shift. Type the label beside Moon dust, then type the label beside the Starlight cauldron. The bottle crosses the lab and wakes the station you choose.

OpenKeyNav labels all three brewing stations after you choose an ingredient. One destination label completes the move. Press Esc to leave Move Mode.

Live Move Mode demoShortcuts off
Shortcut sorceryThe traveling apothecary
1 route
Your task

Send Moon dust to the Starlight cauldron.

  1. Current step.
  2. Upcoming step. Press M without Shift
  3. Upcoming step. Type the Moon dust label
  4. Upcoming step. Type the Starlight cauldron label
IngredientsDrag from here
DestinationsDrop at one station
Awaiting a routeThe Starlight cauldron waits for Moon dust.
Mouse users can drag a bottle to any of the three brewing stations.Configure Move Mode

Use cases

Use OpenKeyNav for these interactions​

Use native controls and established keyboard conventions first. Add OpenKeyNav when an interface needs a faster path or a configured alternative for complex actions.

01

Direct selection in dense interfaces

Show temporary labels on available controls so users can choose a visible target without stepping through every preceding element.

02

Keyboard drag-and-drop

Configure source elements, valid destinations, and the callback that moves data or objects without requiring a pointer gesture.

03

Development feedback

OpenKeyNav flags likely mouse-only targets during development. Developers can then repair the underlying semantics and behavior before release.

Scope

OpenKeyNav adds direct keyboard paths for complex interactions.​

OpenKeyNav adds

  • Offer direct, on-demand target selection
  • Add configured keyboard paths for pointer actions
  • Support endpoint-based drag-and-drop workflows
  • Surface likely mouse-only elements for investigation
  • Provide configurable shortcuts and mode feedback

Your app still handles

  • Semantic HTML, accessible names, roles, and states
  • Expected Tab, arrow, Enter, Space, and Escape behavior
  • Logical focus order, visible focus, and avoiding traps
  • Browser, screen reader, speech input, and user testing
  • Whole-page and complete-process WCAG conformance

WCAG 2.2 support for keyboard operation and character shortcuts​

W3C

OpenKeyNav contributes keyboard paths for configured actions and keeps its character shortcuts off until users enable them. The local guides cover implementation limits and verification steps.

Research

OpenKeyNav in research and guidance​

Researchers used OpenKeyNav in a Voyager 2 case study, recommended it for biomedical data resources, and discussed it as a supplementary accessibility strategy for visualization tools.

Research Conference: IEEE VIS

Using OpenKeyNav to Enhance the Keyboard-Accessibility of Web-based Data Visualization Tools

Presented at the AccessViz workshop, part of IEEE VIS. The National Institutes of Health funded the research paper through Harvard University’s HIDIVE Lab.

Read the preprint

Research Journal: PLOS Computational Biology

Ten simple rules for making biomedical data resources accessible

Research affiliated with Harvard Medical School. Rule 6 includes OpenKeyNav in its guidance for keyboard access and multiple input devices.

Read the journal article

Research Conference: IHC

Challenges in the Accessibility of Data Visualization: Lessons from an Evaluation of a Dam Safety System

The paper discusses OpenKeyNav as a way to reproduce complex mouse-driven interactions from a keyboard and as a supplementary strategy for inaccessible visualization tools.

Read the conference paper

Testing

Test before you ship​

Complete the full task with a keyboard. Then test the browsers and assistive technologies your users rely on.

Open the accessibility practices
  1. 1
    Keyboard-only task flow

    Reach, operate, reverse, and exit every configured interaction.

  2. 2
    Focus and semantics

    Confirm visible focus, logical order, names, roles, states, and feedback.

  3. 3
    Assistive technology

    Check screen reader and speech-input behavior for shortcut conflicts.

  4. 4
    People using the product

    Include disabled users in evaluation alongside standards testing.

Get started

Install OpenKeyNav​

Try the defaults in development first. Review anything reported by the debug tools, then turn debug output off before release.

Read the quick startFramework integrationConfiguration reference
1. Install
npm install openkeynav
2. Initialize
import OpenKeyNav from 'openkeynav';

const openKeyNav = new OpenKeyNav();
openKeyNav.init();

Start small

Choose one mouse-dependent interaction and add a keyboard path.​

Start with the quick guideView OpenKeyNav on GitHub