Overview

The SkipLink component renders a visually hidden link that becomes visible when focused via keyboard. It allows keyboard users to skip directly to the main page content, bypassing the header and sidebar navigation.

Try it now — press Tab on your keyboard from the top of this page. The skip link should appear.

Props

Prop	Type	Description
label	string	Text shown in the skip link (e.g., "Skip to content")

Features

• Visually hidden by default, appears on :focus
• Links to the #_top anchor (the page title element)
• Uses the .sl-skip-link class
• Styled to appear as a floating overlay when focused
• Essential for WCAG 2.1 compliance (Success Criterion 2.4.1)

Accessibility

The skip link is one of several accessibility features built into qwik-docs:

• SkipLink — Skip to main content
• Screen reader labels — .sr-only class used throughout for accessible labels
• ARIA attributes — aria-label, aria-expanded, aria-current used on interactive elements
• Semantic HTML — <nav>, <main>, <header>, <footer> landmarks
• Keyboard navigation — All interactive elements are focusable and operable