Skip to main content

Overview of Constructor

The OpenKeyNav constructor initializes the library and configures its behavior according to the provided options. This allows you to customize how OpenKeyNav interacts with your web page.

Constructor​

Syntax​

const openKeyNav = new OpenKeyNav();

Parameters​

  • config (optional): An object containing configuration options to customize OpenKeyNav's behavior. If no configuration is provided, default settings will be used.

Configuration Options​

The config object can include the following properties:

  • keys: Custom key bindings for different modes.
  • spot: Customization options for the appearance of labels.
  • focus: Customization options for the appearance of the focus outline.
  • modesConfig: Configuration for different modes like drag-and-drop.
  • debug: Debugging options to help identify non-compliant elements.

Example​

Here's an example of how to initialize OpenKeyNav with a custom configuration:

const openKeyNav = new OpenKeyNav();

const config = {
    keys: {
        click: 'c',  // Custom key for click mode
        scroll: 'w', // Custom key for scroll mode
    },
    spot: {
        fontColor: 'white',
        backgroundColor: '#000',
        insetColor: '#ff0000',
        fontSize: '14px',
        arrowSize_px: 6
    },
    ,
    focus: {
        outlineColor: '#0088cc',  // Customize the outline color
        outlineStyle: 'dashed'    // Customize the outline style
    },
    modesConfig: {
        move: {
            config: [
                {
                    fromContainer: ".containerOfMoveables",
                    toElements: ".dropZoneTargetType1, .dropZoneTargetType2",
                    callback: (elMoveable, elDropZoneTarget) => {
                        // Your callback logic
                    }
                }
            ]
        }
    },
    debug: {
        keyboardAccessible: false // Disable debug mode
    }
};

openKeyNav.init(config);

In this example, OpenKeyNav is initialized with a custom configuration that changes the key bindings for click and scroll modes, customizes the appearance of labels, configures drag-and-drop behavior, and disables the default debug mode.

By using the constructor options, you can tailor OpenKeyNav to fit the specific needs and preferences of your website, enhancing the overall accessibility and user experience.