Developers use OpenKeyNav to add on-demand target labels, direct keyboard navigation, and keyboard-accessible drag-and-drop to websites and web apps.
Install with npm or a browser build
npm install openkeynavOpenKeyNav adds keyboard paths for configured interactions and can flag likely mouse-only controls during development.
Interactive demo 01
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.
Call Juniper to the lantern.
Interactive demo 02
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.
Send Moon dust to the Starlight cauldron.
Modes and tools
Compare interaction modes, navigation commands, and development tooling. Items marked v.next are planned for the next package release.
| Capability | Kind | Default / trigger | Availability | What it does |
|---|---|---|---|---|
| Click Mode | Interaction mode | K | Current | Label available controls and choose one directly. |
| Move Mode | Interaction mode | M | Current | Choose a configured source and valid destination for keyboard-accessible drag-and-drop. |
| Heading Navigation | Navigation command | H / 1–6 | Current | Move to the next or previous heading, or jump by heading level. |
| Scroll Navigation | Navigation command | S | Current | Move focus between scrollable regions without searching for each one. |
| Structural Navigation | Navigation mode | r | Current | Move through existing focus targets by page structure while native Tab remains intact. |
| Debug diagnostics | Development tool | On by default | Current | Use debug heuristics to label likely mouse-clickable, unfocusable elements for review. |
| Expanded audit panel | Development tool | On enable | v.next | Run a page-wide heuristic scan and open a results panel when keyboard-audit debugging is on. |
Scope
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.
OpenKeyNav adds a keyboard path for configured pointer-driven actions.
OpenKeyNav keeps character shortcuts off until a user enables them. Developers can also remap them.
Research
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
Presented at the AccessViz workshop, part of IEEE VIS. The National Institutes of Health funded the research paper through Harvard University’s HIDIVE Lab.
Research Journal: PLOS Computational Biology
Research affiliated with Harvard Medical School. Rule 6 includes OpenKeyNav in its guidance for keyboard access and multiple input devices.
Research Conference: IHC
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.
Testing
Complete the full task with a keyboard. Then test the browsers and assistive technologies your users rely on.
Open the accessibility practicesReach, operate, reverse, and exit every configured interaction.
Confirm visible focus, logical order, names, roles, states, and feedback.
Check screen reader and speech-input behavior for shortcut conflicts.
Include disabled users in evaluation alongside standards testing.
Get started
Add the library with your package manager, a CDN, or a self-hosted browser build. Then initialize one instance at the persistent root of your site or app.
Choose the route that fits your project.
Use the command for the package manager already in your project.
npm install openkeynavpnpm add openkeynavyarn add openkeynavbun add openkeynavLoad the same UMD browser build from a CDN or keep a copy in your project.
<script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script><script src="/vendor/openkeynav.umd.min.js"></script>These examples keep one instance at the document or application root.
<script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
<script>
new OpenKeyNav().init();
</script>Using the self-hosted file? Replace the first script URL with /vendor/openkeynav.umd.min.js.
import OpenKeyNav from 'openkeynav';
new OpenKeyNav().init();Use this with npm, pnpm, Yarn, or Bun and a bundler.
'use client'; // Omit in a client-only React app
import {useEffect} from 'react';
import OpenKeyNav from 'openkeynav';
let instance;
export default function OpenKeyNavInitializer() {
useEffect(() => {
instance ??= new OpenKeyNav().init();
}, []);
return null;
}Render this once near the application root. The module guard avoids duplicate initialization in React Strict Mode.
<script setup>
import {onMounted} from 'vue';
import OpenKeyNav from 'openkeynav';
onMounted(() => {
new OpenKeyNav().init();
});
</script>Keep this in the persistent root component so onMounted runs once for the document.
<script>
import {onMount} from 'svelte';
import OpenKeyNav from 'openkeynav';
onMount(() => {
new OpenKeyNav().init();
});
</script>onMount runs only in the browser; place this in the root layout rather than a route component.
import {afterNextRender, Component} from '@angular/core';
import OpenKeyNav from 'openkeynav';
@Component({
selector: 'app-root',
template: '<router-outlet />',
})
export class AppComponent {
constructor() {
afterNextRender(() => {
new OpenKeyNav().init();
});
}
}afterNextRender waits for the browser DOM and does not run during server rendering.
Start small