Skip to main content

Installation

Install OpenKeyNav with a package manager, load it from a CDN, or host the browser build.

Package managers​

Use the command for the package manager already in your project.

npm install openkeynav

Then initialize OpenKeyNav from your application entry point:

import OpenKeyNav from 'openkeynav';

new OpenKeyNav().init();

Bundlers consume the published package through its CommonJS entry point. For direct browser loading, use the UMD build below.

CDN​

Use the UMD browser build for sites that load OpenKeyNav directly from a script tag. This versionless URL follows npm's latest release, matching the package-manager commands above.

<script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
<script>
  new OpenKeyNav().init();
</script>

Place both tags near the end of the document, before </body>.

Self-hosted browser build​

Download the latest UMD browser build, keep it with your other static assets, and load that local file:

<script src="/vendor/openkeynav.umd.min.js"></script>
<script>
  new OpenKeyNav().init();
</script>

Self-hosting gives your deployment direct control over caching, availability, and version changes.

Application lifecycle​

Initialize one OpenKeyNav instance at the persistent document or application root and keep it for the document lifetime. See Framework Integration for React, Next.js, Vue, Nuxt, Svelte, SvelteKit, and Angular examples.

Turn OpenKeyNav on

After the page loads, press Shift + O to turn OpenKeyNav on or off. The interaction shortcuts stay off until the user enables them, supporting WCAG 2.1 Success Criterion 2.1.4: Character Key Shortcuts.