Skip to main content

Form Handling

OpenKeyNav can be used to enhance the keyboard accessibility of forms on your website. This example demonstrates how to integrate OpenKeyNav with form elements, ensuring that users can navigate and interact with forms efficiently using the keyboard.

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 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 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.

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

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