Heading Navigation

Heading navigation allows users to quickly navigate through headers within the viewport using keyboard shortcuts.

How to Use Heading Navigation

First, initialize OpenKeyNav on the page.

const openKeyNav = new OpenKeyNav();
openKeyNav.init();

To navigate through headers, press the h key. This will focus on the next heading within the viewport. You can use shift + h to focus on the previous heading.

Navigate Through Specific Heading Levels

You can also navigate through specific heading levels by pressing the number keys 1, 2, 3, 4, 5, or 6. Each number corresponds to a specific heading level (<h1>, <h2>, <h3>, <h4>, <h5>, and <h6> respectively).

info

Turn OpenKeyNav on

After the page loads, press Shift + o to turn OpenKeyNav on/off. To avoid accidental activation, OpenKeyNav's shortcuts are disabled by default, in compliance with WCAG Success Criterion 2.1.4 character key shortcuts.