Quick Start Guide

Example of a Simple Integration with Default Key Settings

Here’s an example of integrating OpenKeyNav into your project with default settings:

1. Include the Script:

   • Using npm:

     import OpenKeyNav from 'openkeynav';
     
     const openKeyNav = new OpenKeyNav();
     openKeyNav.init();
   • Using CDN:

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

2. Navigate with Keyboard Shortcuts:

   • Enter Click Mode: Press k to label clickable elements with keyboard shortcuts. Press the key combinations on the labels to "click" the respective buttons.
   • Navigate Headers: Press h to navigate through headers within the viewport. You can also press 1, 2, 3, 4, 5, or 6 to navigate through headers of the respective levels.
   • Cycle Scrollable Regions: Press s to cycle through different scrollable regions within the viewport.
   • Drag-and-Drop Mode: Press m to enter drag mode, enabling keyboard-accessible drag-and-drop. This labels pre-configured draggable elements with keyboard shortcuts and their applicable drop zones.

Disabling Debug Mode for Production

By default, OpenKeyNav initiates in debug mode, which adds red labels to elements that are mouse-clickable but not tab-focusable. These elements are not WCAG-compliant, since they are not keyboard accessible. The elements with black labels are keyboard accessible. This enables you to identify the elements that need remediation.

To disable debug mode for production, update the initialization code as follows:

openKeyNav.init({
    debug: {
        keyboardAccessible: false // Set this to false when done debugging inaccessible keyboard elements.
    }
});

This quick start guide should help you get OpenKeyNav up and running on your website, enabling enhanced keyboard accessibility right away.