Skip to main content

debug

The debug configuration option allows you to enable or disable debug mode, which helps identify elements on your web page that are not keyboard accessible. This can be useful during development to ensure that your website meets accessibility standards.

Configuration Option​

debug​

  • Type: Object
  • Description: An object to configure debug mode settings.

Properties​

  • keyboardAccessible (boolean): When set to true, debug mode is enabled, and elements will be labeled to indicate whether they are keyboard accessible. Debug mode is enabled by default to help distinguish the clickable elements that are not keyboard-focusable (red by default) from those that are (black by default).

Example​

Here's an example of how to disable debug mode in OpenKeyNav

const openKeyNav = new OpenKeyNav();

const config = {
    debug: {
        keyboardAccessible: false // Disable debug mode for production
    }
};

openKeyNav.init(config);

In this example, debug mode is disabled by setting keyboardAccessible to false. Developers should set it to false when they have finished debugging and are ready to go into production.

Summary​

  • Default Behavior: Debug mode is on by default.
  • Purpose: Helps distinguish the clickable elements that are not keyboard-focusable (red by default) from those that are (black by default).
  • Production: Set debug.keyboardAccessible to false when ready for production.

By using the debug configuration option, you can quickly identify accessibility issues on your web page and make the necessary adjustments to ensure a better user experience for all users.