Cookie settings

Here you decide which services we may use. You can change or withdraw your choice at any time.

Necessary

Always active

Required for the website to work: selected language, login, security and storing your cookie choice. These cookies cannot be switched off.

Helps us understand which pages are read and which steps lead to a download, beta request or purchase. Google receives pseudonymous usage data for this; Google Analytics 4 does not store IP addresses.

Show details
Provider
Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Ireland
Cookies
_ga and _ga_<ID>: distinguish visitors and sessions, stored for up to 2 years
Data transfer
Data may be transferred to Google LLC in the USA (EU-US Data Privacy Framework).

More in our privacy policy
Category
Plugin version
1.1.0-beta.29

Skip links

First-focus links that let keyboard users bypass repeated blocks (navigation, headers) and jump straight to main content, menu, or search.

What they are

Skip links are visually hidden until focused (Tab). They sit at the top of the page and move focus to landmarks you configure.

Why use them

  • Keyboard users: Skip long chrome without dozens of Tab presses
  • Screen reader users: Reach main content without hearing the full nav first
  • WCAG: Core support for 2.4.1 (Bypass Blocks)
  • UX: Big win on sites with heavy headers or mega-menus

WCAG notes

  • 2.1.1 Keyboard: Fully operable from keyboard
  • 2.4.1 Bypass blocks: Primary criterion for skip links
  • 2.4.7 Focus visible: The skip link itself must be clearly visible on focus

Three presets:

  • Main content: jump to the primary content region
  • Navigation: jump to the main menu
  • Search: jump to the search field

Each can be toggled individually.

Guided setup in the admin area

The settings page groups each destination in its own card. The first card is open by default; the remaining details stay compact until needed. For every active destination you can check the CSS selector against the homepage. The setup status distinguishes a unique match, a missing target, and a selector that matches several elements. Appearance and advanced behavior remain available in separate disclosures. The stacked visual composer groups colors, typography, spacing, corners, border, and shadow around exactly one keyboard preview of the focused link.

Settings

Enable/disable:

  • Global master switch
  • Per-link toggles

Per link:

  • Target selector: CSS selector (e.g. #main-content, #menu-main-menu, #s)
  • Link text: visible label (e.g. “Skip to main content”, “Skip to navigation”)
  • Title attribute: optional extra hint (tooltip)

Skip link styling:

  • Font size: e.g. 16px, 1em
  • Font weight: e.g. 600, bold
  • Padding: e.g. 15px 23px 14px
  • Background / text color when focused
  • Border radius
  • Box shadow (e.g. ring)
  • Text decoration: underline, overline, line-through, or none

Focus styling:

  • Separate background, text, and shadow for the focused link

Target highlight:

  • Optional flash on the jump target
  • RGBA color
  • Effect: none, fade, zoom, or both
  • Scroll offset: pixels from top (default 50) for sticky headers

Examples

Example 1: Defaults

Enable all three with default targets, subtle blue background and white text, 50px offset under a fixed header.

Example 2: Minimal

Only “main content”; smaller type, muted colors, light shadow—quiet but compliant.

Example 3: High visibility

Larger text, high-contrast pair (e.g. yellow / black), strong shadow for users who need a bold cue.

Tips

  • Keep skip links first in the tab order (right after <body>)
  • Use clear link text that names the destination
  • Verify selectors exist in the DOM
  • Offset ≥ sticky header height
  • Test with Tab only
  • Hidden-until-focus is expected—do not show them always-on unless your design calls for it
  • Meet contrast for focused state (WCAG 1.4.3)

Structured appearance controls

Colors, typography, inner spacing, corner radius, border, and shadow now share one visual Skip link design editor. Use the keyboard-operable tabs to switch between these peer properties, choose a quick preset where available, or keep exact linked/individual values. One central focused-link preview always represents the configured Skip Link and updates immediately. On phones, the tab row and shadow presets remain horizontally scrollable, and the active option is brought fully into view without moving the page. Existing advanced CSS values remain available.

Font size, inner spacing, corner radius, and border width use structured value controls. Inner spacing, corner radius, and border width can be linked for one shared value or edited per side or corner. The available unit choices are limited to units that make sense for the property.

An advanced CSS value remains available for mixed units, calc(), clamp(), and other CSS functions. Shadows provide None, Subtle, Medium, and Strong presets. The custom shadow editor controls horizontal and vertical offset, blur, spread, an alpha-aware color, and inset mode. Multiple shadows remain available in the advanced CSS field. The live preview updates immediately.

Technical notes

  • Injected right after <body>
  • CSS hides until focus—no JS required for the jump
  • Optional target highlight may use JS

Available for: All plans Free

Focused reading view

Reading mode