Skip to main content

keys

The keys configuration option allows you to customize the keyboard shortcuts used to activate different modes in OpenKeyNav. By default, specific keys are assigned to various functions, but you can change these bindings to suit your needs.

Configuration Option​

keys​

  • Type: Object
  • Description: An object to configure key bindings for different modes.

Default Key Bindings​

  • escape: 'q' - Alternative escape key for when the escape key is not easily accessible.
  • click: 'k' - Enter click mode to click on clickable elements, such as links.
  • scroll: 's' - Focus on the next scrollable region.
  • move: 'm' - Enter move mode for keyboard drag-and-drop interactions.
  • heading: 'h' - Focus on the next heading.

Customizing Key Bindings​

You can override the default key bindings by specifying a new key configuration.

Example​

Here's an example of how to customize the key bindings in OpenKeyNav:

const openKeyNav = new OpenKeyNav();

const config = {
    keys: {
        escape: 'e',   // Custom escape key
        click: 'c',    // Custom click mode key
        scroll: 'w',   // Custom scroll mode key
        move: 'd',     // Custom move mode key
        heading: 'n'   // Custom heading navigation key
    }
};

openKeyNav.init(config);

In this example, the default key bindings are overridden with custom keys. The escape key is changed to e, click mode to c, scroll mode to w, move mode to d, and heading navigation to n.

Summary​

  • Default Key Bindings:
    • escape: 'q'
    • click: 'k'
    • scroll: 's'
    • move: 'm'
    • heading: 'h'
  • Customizing Keys: You can override the default keys by providing a custom configuration in the keys object.

By using the keys configuration option, you can tailor OpenKeyNav's keyboard shortcuts to better fit your preferences and enhance the user experience on your website.