Skip to main content

Form Handling

OpenKeyNav adds direct keyboard selection and navigation to form controls. This example initializes the library with native labeled fields while preserving standard Tab, Space, and Enter behavior.

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 Form Handling 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 Form Elements​

Add form elements to your HTML to see OpenKeyNav in action. For this example, we'll add a simple form with input fields and a submit button.

<body>
    <form id="exampleForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit">Submit</button>
    </form>

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

Step 4: Using OpenKeyNav with Forms​

With OpenKeyNav initialized, you can use keyboard shortcuts to navigate and interact with the form 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 form controls OpenKeyNav detects.
  • Press the key combinations shown on the labels to "click" or focus on the respective form elements.
  • Use the Tab key to navigate through the form fields.
  • Use the space bar to activate / deactivate form controls such as checkboxes.
  • Press Enter to submit the form when focused on the submit button.

Example​

Here is the complete HTML code for the form handling example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenKeyNav Form Handling Example</title>
    <script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>
</head>
<body>
    <form id="exampleForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <label for="message">Message:</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit">Submit</button>
    </form>

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

Summary​

These steps integrate OpenKeyNav into a native HTML form and provide a foundation for application-specific form workflows and verification.