Skip to main content

Basic Configuration

OpenKeyNav provides several configuration options to customize its behavior. Here's how you can configure typeable labels and keys:

Configuring Typeable Labels​

You can customize the appearance and behavior of typeable labels by modifying the spot configuration object. This includes settings for font color, background color, inset color, font size, and arrow size.

const config = {
    spot: {
        fontColor: 'white',       // Color of the text
        backgroundColor: '#333',  // Background color of the label
        insetColor: '#000',       // Color of the inset shadow
        fontSize: 'inherit',      // Font size of the label
        arrowSize_px: 4           // Size of the arrow pointing to the element
    }
};

openKeyNav.init(config);

Keys Configuration​

OpenKeyNav allows you to customize key bindings for different behaviors. By default, certain keys are assigned specific functions, but you can change these bindings to suit your needs.

Default Key Bindings and Their Functions​

  • escape: q - Alternative escape key, useful 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. (requires configuration)
  • heading: h - Focus on the next heading.

How to Customize Keys​

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

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);

This customization allows you to tailor OpenKeyNav to your preferences and ensure it fits seamlessly into your website's accessibility setup.