Jump to navigation, main content, search, or page top/bottom without reaching for a mouse.
What they are
Configurable access-key style shortcuts move focus to CSS targets you define. Essential for keyboard-only users and helpful on long pages.
Defaults on a fresh install
Main toggle and all five default shortcuts are enabled. Post-jump highlight is on (effect: none).
Why use them
- Keyboard users: Faster than tabbing through chrome
- Screen reader users: Jump straight to main content or search
- Power users: Efficient on long screens
- WCAG: Supports 2.4.1 (Bypass Blocks) and documents 2.1.4 (character shortcuts) via enable/disable
WCAG notes
- 2.1.1 Keyboard: Implemented via keyboard
- 2.1.4 Character shortcuts: Provide a way to turn shortcuts off
- 2.4.1 Bypass blocks: Jump-to-content satisfies bypass expectations when targets are correct
- 2.4.7 Focus visible: Optional highlight after jump
Defaults
Five presets:
- Alt + Shift + N: Navigation
- Alt + Shift + H: Main content
- Alt + Shift + S: Top of page
- Alt + Shift + E: Bottom of page
- Alt + Shift + F: Search
macOS: use Control + Option instead of Alt + Shift.
Settings
The settings screen now guides you through the setup. Each jump-target card initially shows only its status, key combination, and a short explanation. Open Configure to edit the technical fields for the key, CSS selector, and toolbar label.
- Setup status: provides a compact overview of the five shortcuts.
- Check all targets: checks active CSS selectors against the homepage and flags missing or invalid targets.
- Contextual help: explains jump targets next to the relevant field. The full help opens as a side panel on desktop and a bottom sheet on mobile.
- Advanced settings: groups highlight, animation, and scroll-offset options so the primary setup remains clear.
- Conflict protection: active shortcuts must use different letters.
Toggles:
- Enable/disable each shortcut
- Global master switch
Customization:
- Letter: change the access key (e.g. N → M)
- Target selector: CSS selector (e.g. #main-menu, .search-form)
- Toolbar label: text shown for this shortcut in the Toolbar’s Keyboard help detail view
Keyboard help lists only shortcuts that are actually enabled. It does not create additional global letter shortcuts.
Highlight effects:
- Optional flash on the target element
- Color (RGBA)
- Animation style: none, fade, zoom, or both
- Scroll offset: pixels from top (default 50) for sticky headers
Examples
Example 1: Defaults
Enable all five with default targets, highlight without animation, 50px offset for a fixed header.
Example 2: Custom nav selector
If your nav lives at #site-navigation, point the N shortcut there.
Example 3: Advanced
Extend mappings carefully—some keys are reserved by browsers.
Tips
- Pick memorable letters (N/H/S/E/F)
- Test in multiple browsers—chords differ slightly
- Verify selectors in DevTools
- Offset ≥ sticky header height
- Enable Keyboard help in the Toolbar settings so visitors can review the available shortcuts there
- Avoid clashes (e.g. some browsers bind Alt+F)
Technical notes
- Requires JavaScript
- Highlight clears after a short delay
- Scroll helpers scrollToTop / scrollToBottom need no selector
Available for: All plans Free