Skip to main content

Basic Example

This basic example demonstrates how to integrate OpenKeyNav into your website to enhance keyboard accessibility. Follow these steps to get started with OpenKeyNav.

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 your JavaScript. This should be done 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.

  • Press the k key to enter click mode. This will label all clickable elements with keyboard shortcuts.
  • 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>

By following these steps, you can quickly integrate OpenKeyNav into your website to improve keyboard accessibility. This basic example provides a foundation to build upon, allowing you to customize and extend the functionality of OpenKeyNav to meet your specific needs.