DOCSEARCHbyAlgolia
Submit Docs

OpenKeyNav Documentation

website·Indexed 31 days ago

https://openkeynav.com

An open-source JavaScript library that adds on-demand keyboard operation and navigation modes to websites and web apps. It provides tools for improving keyboard accessibility, including Click Mode, Drag-and-drop Mode, and Structural Navigation, while helping developers meet WCAG 2.1 and ADA Title II standards.

Tokens
22.7K
Snippets
74
Records
162
Agent score
50%

What's inside OpenKeyNav

  1. Overview of OpenKeyNav

    OpenKeyNav is an MIT-licensed JavaScript library that adds on-demand keyboard operation and navigation modes to websites and web apps. It features two primary modes: Click Mode, which provides direct access to detected targets, and Move Mode, which allows applications to map specialized source-and-destination workflows.

  2. Overview of OpenKeyNav keyboard accessibility features

    OpenKeyNav is a reusable interaction layer designed to improve keyboard accessibility across content sites, CMS pages, dashboards, and application workflows. Key capabilities include:

    • Click Mode: Scans the visible page on demand and displays typeable labels next to targets, allowing users to focus or activate distant actions quickly.
    • Configurable Commands: Allows applications to define specific keys for activation, selection, navigation, movement, and exit to fit the host application's interaction model.
    • Move Mode: Connects application-defined sources with valid destinations and triggers completion callbacks to map keyboard routes to intended outcomes.
    • Structural Navigation: Provides fast routes through tabbable targets within heading contexts, scrollable regions, and semantic page structures.
    • Dynamic Content Discovery: Re-scans the document state at the start of each mode, ensuring newly rendered elements are discoverable without needing to re-initialize the library.
    • Development Diagnostics: Includes a debug heuristic to help developers review semantics, focus, and activation using the same keyboard layer as the end-user.

  3. Overview of OpenKeyNav keyboard navigation modes

    OpenKeyNav is an open-source JavaScript library that provides a shared interaction layer for keyboard operation and navigation. It includes several key modes and features:

    • Click Mode: Labels detected targets for direct focus or activation.
    • Move Mode: Maps application-defined sources and destinations to a keyboard workflow.
    • Navigation commands: Creates direct routes through page structure, headings, and scrollable regions.
    • Configurable commands: Provides a centralized way to manage interaction, activation, movement, and exit keys.
    • Focused diagnostics: Allows for manual review of semantics, focus, activation, and task completion.

  4. Overview of OpenKeyNav features

    OpenKeyNav is a tool designed to improve navigation and interaction with targets on a page. Its core capabilities include:

    • On-demand labeling: Provides labels for detected targets to clarify their purpose.
    • Click Mode: Enables direct focus and activation of elements.
    • Structural Navigation: Supports navigation via headings, scroll-regions, and other structural markers.
    • Configurable Commands: Offers customizable commands with integrated mode feedback and documented exit paths.
    • Action Flagging: Flags detected actions to allow for a focused review of semantics, focus, activation, and completion.

  5. Overview of OpenKeyNav keyboard navigation library

    OpenKeyNav is an open-source JavaScript library that implements on-demand keyboard operation and navigation modes for web applications. It provides a shared interaction layer to ensure functionality is operable via physical keyboards, switches, voice input, and screen readers. Key features include:

    • Click Mode: Labels detected targets for direct focus or activation.
    • Move Mode: Maps application-defined sources and destinations to a keyboard workflow.
    • Navigation commands: Creates direct routes through headings, scrollable regions, and page structure.
    • Configurable commands: Centralizes management of activation, interaction, movement, and exit keys.
    • Focused diagnostics: Tools to identify actions for manual review of semantics, focus, activation, and task completion.

  6. Overview of OpenKeyNav keyboard navigation features

    OpenKeyNav is an open-source JavaScript library that provides a shared interaction layer for keyboard operation and navigation. It is designed to support users of physical keyboards, switches, voice input, and screen readers. Key features include:

    • Click Mode: Labels detected targets for direct focus or activation.
    • Move Mode: Maps application-defined sources and destinations to a keyboard workflow.
    • Navigation commands: Creates direct routes through headings, scrollable regions, and page structure.
    • Configurable commands: Centralizes the management of activation, interaction, movement, and exit keys.
    • Focused diagnostics: Identifies actions for manual review of semantics, focus, activation, and task completion.

  7. Overview of OpenKeyNav™ keyboard accessibility features

    OpenKeyNav™ is integrated into websites and web apps to provide keyboard users with direct and efficient routes to interactive targets. It consists of three primary interaction mechanisms:

    • Click Mode: Scans the visible page to detect targets and assigns short labels, allowing users to select a target directly.
    • Move Mode: Uses application-defined sources, destinations, and callbacks to reproduce endpoint-based movement (such as drag-and-drop) via keyboard.
    • Navigation Commands: Provides direct navigation through tabbable targets within heading contexts, scrollable regions, and general page structure.

    Developers initialize a single OpenKeyNav instance at the persistent root of the site or application. While OpenKeyNav provides the discovery and navigation mechanisms, the host application must provide the semantic HTML, accessible names, roles, values, focus behavior, and programmatic feedback.

  8. Implement ATAG 2.0 Part A Keyboard Accessibility with OpenKeyNav

    OpenKeyNav provides reusable keyboard-operation mechanisms to help web-based authoring tools (CMS, LMS, rich-text editors, site builders) meet ATAG 2.0 Part A accessibility criteria. Developers must map OpenKeyNav's mechanisms to their specific authoring functions and verify that all required workflows—such as creating, selecting, formatting, moving, saving, previewing, and publishing—are operable via keyboard.

  9. Understand Structural Navigation mental model

    Structural Navigation operates using three core concepts:

    1. Targets: Existing keyboard-focusable elements on the page.
    2. Structural Contexts: A hierarchy derived from page semantics (landmarks, headings, etc.). Every target belongs to an innermost context and its ancestors.
    3. Typed Routes: Optional, application-defined ordered groups (e.g., table rows or workflow steps) that can overlap the structural hierarchy. A single target can belong to multiple routes.

  10. Meet ADA Title II keyboard accessibility requirements with OpenKeyNav

    The ADA Title II rule requires state and local government web content and mobile apps to conform to WCAG 2.1 Level AA, specifically requiring that every function be operable through a keyboard interface (WCAG 2.1.1). OpenKeyNav provides a keyboard operation layer to implement these requirements through several mechanisms:

    • Click Mode: Provides direct keyboard selection for detected targets.
    • Move Mode: Maps keyboard selection to application-defined sources and destinations.
    • Navigation commands: Creates direct routes through headings, scrollable regions, and page structure.
    • Focused diagnostics: Identifies actions for manual review of semantics, focus, activation, and task completion.

  11. Navigate by heading levels and semantic regions

    Structural Navigation allows jumping between semantic regions and heading levels:

    • Semantic Regions: Shift+Left and Shift+Right move through landmarks, sections, articles, forms, fieldsets, and lists. Focus is placed on the first keyboard target within that region.
    • Heading Levels: Use h to move through all headings containing keyboard targets, or keys 1 through 6 to jump specifically to authored heading levels. These commands focus the first keyboard target within the heading's context rather than the heading element itself.
    • Broaden/Narrow: Shift+Up moves to the nearest preceding heading with a lower rank (shallower), and Shift+Down moves to the closest deeper authored heading level.

  12. Implement the compact layout for the OpenKeyNav Toolbar

    The OpenKeyNav Toolbar currently uses a compact layout. When implementing it, ensure the Shortcut Guide has sufficient room to expand vertically below the host element. Developers should specifically test for ancestor overflow, browser zoom levels, narrow viewports, and potential layout shifts caused by translated text. The compact toolbar is designed to be placed within existing application navigation bars, sidebars, or settings blocks.