Skip to main content

Basic Example

This example adds OpenKeyNav's keyboard operation and navigation modes to a basic website.

Step 1: Include OpenKeyNav​

First, include the OpenKeyNav library in your HTML file. You can do this by adding a script tag with the CDN link.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenKeyNav Basic Example</title>
    <script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Step 2: Initialize OpenKeyNav​

Next, initialize OpenKeyNav in JavaScript after the DOM content is fully loaded.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const openKeyNav = new OpenKeyNav();
        openKeyNav.init();
    });
</script>

Step 3: Add Interactive Elements​

Add some interactive elements to your HTML to see OpenKeyNav in action. For this example, we'll add a few buttons.

<body>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const openKeyNav = new OpenKeyNav();
            openKeyNav.init();
        });
    </script>
</body>

Step 4: Using OpenKeyNav​

With OpenKeyNav initialized, you can use keyboard shortcuts to navigate and interact with the elements on your page.

info

Turn OpenKeyNav on

After the page loads, press Shift + O to turn OpenKeyNav on or off. OpenKeyNav keeps its character commands inactive until a user enables them. This persistent on/off mechanism supports the turn-off option in WCAG 2.1 Success Criterion 2.1.4: Character Key Shortcuts.

  • Press K to enter Click Mode and label the visible targets OpenKeyNav detects.
  • Press the key combinations shown on the labels to "click" the respective elements.
  • Press the h key to navigate through headers.
  • Press 1, 2, 3, 4, 5, or 6 to navigate through headers of the respective level.
  • Press the s key to cycle through different scrollable regions.

Example​

Here is the complete HTML code for the basic example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenKeyNav Basic Example</title>
    <script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
</head>
<body>
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const openKeyNav = new OpenKeyNav();
            openKeyNav.init();
        });
    </script>
</body>
</html>

This initializes the shared interaction layer. Next, verify detected actions, add a visible explanation of the commands, and configure any application-specific workflows.