Skip to main content

Frequently Asked Questions

This section addresses some of the most frequently asked questions about using OpenKeyNav. If you have a question that isn't answered here, feel free to reach out to the community for help.

General Questions​

What is OpenKeyNav?​

OpenKeyNav is an open-source MIT-licensed JavaScript library designed to enhance keyboard accessibility on websites. It generates keyboard shortcuts on the fly and presents them to the user on demand, supporting complex interactions like drag-and-drop entirely with the keyboard.

How do I install OpenKeyNav?​

You can install OpenKeyNav via npm:

npm install openkeynav

Or include it directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/openkeynav/dist/openkeynav.umd.min.js"></script>

Usage Questions​

How do I initialize OpenKeyNav?​

Initialize OpenKeyNav after the DOM content is fully loaded:

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

How can I customize the key bindings?​

You can customize the key bindings by passing a configuration object during initialization:

const config = {
    keys: {
        click: 'c',
        scroll: 'w'
    }
};
const openKeyNav = new OpenKeyNav();
openKeyNav.init(config);

Does OpenKeyNav support dynamic content?​

Yes, OpenKeyNav will automatically recognize new elements added to the DOM the next time a mode is entered. If a mode is active, it will recognize new elements when the mode is re-initiated.

Troubleshooting Questions​

Why are my custom key bindings not working?​

Ensure that your custom key bindings do not conflict with other scripts or browser shortcuts. Verify your configuration:

const config = {
    keys: {
        click: 'c',
        scroll: 'w'
    }
};
const openKeyNav = new OpenKeyNav();
openKeyNav.init(config);

What should I do if labels are not showing on clickable elements?​

Check the element selectors to ensure they are properly targeted. Use the debug mode to identify elements:

const config = {
    debug: {
        keyboardAccessible: true
    }
};
const openKeyNav = new OpenKeyNav();
openKeyNav.init(config);

How do I handle performance issues with OpenKeyNav?​

Use the minimal required configuration and monitor performance using browser profiling tools. OpenKeyNav Pro offers advanced performance monitoring and optimization features.

Advanced Questions​

Can I integrate OpenKeyNav with a CMS like WordPress or Joomla?​

Yes, OpenKeyNav can be integrated with CMS platforms. For WordPress, enqueue the script in your theme's functions.php and initialize it in footer.php. For Joomla, add the script to your template's index.php and initialize it in the same file.

How do I use OpenKeyNav with frameworks like React, Angular, and Vue.js?​

For React, Angular, and Vue.js, install OpenKeyNav via npm and initialize it in your main component. Refer to the Framework Integration guide for detailed instructions.