Skip links & semantic landmarks
The keyboard jumps directly to the main content — without having to navigate through the navigation and header.
What does "Skip links & semantic landmarks" mean?
Skip links are invisible jump links at the top of the page that become visible when the first keyboard tab is opened, allowing keyboard users to jump directly to the main content—bypassing navigation, headers, and advertisements. Semantic landmarks (, , ) give screen readers a map of the page, so users can switch between areas using a shortcut.
Obligation and Benefit — WCAG 2.4.1.
WCAG 2.4.1 (Bypass Blocks) It requires that recurring content blocks can be skipped—this isn't a "nice to have," but a Level A requirement. Without a skip link, a keyboard user has to tab through dozens of menu items on every subpage before reaching the actual content. The same applies to screen reader users—they hear the entire navigation aloud.
How we will solve it specifically.
- First focusable element on every page:
<a class="skip-link" href="#main">Skip to main content</a>. - CSS visually hides the link (positioned negatively), when
:focusIt becomes visible — with AAA contrast. - Structural landmarks used correctly: a
, aper page.-elements witharia-labelfor ambiguity (e.g. „main navigation", „breadcrumbs"). - Validation in the browser DevTools accessibility tree and with screen readers (VoiceOver / NVDA).
Related building blocks of our module suite
-
Accessible forms
WCAG 3.3.1Clear labels, programmatic error handling, validation — no browser bubbles, no „please fill in".
-
Visible focus indicator
WCAG 2.4.11Users who navigate using tabs always know where they are. No disappearing outline.
-
Plain language (AI-supported)
WCAG 3.1.5Content simplified at the touch of a button — for people with reading difficulties, language learners and those in a hurry.
-
Full keyboard navigation
WCAG 2.1.1Every function is accessible — without a mouse. Essential for screen reader users, helpful for everyone else.
Do you need this exact module?
15-minute initial consultation — we'll clarify whether it's relevant for your site.
Further information:
BFSG overview ·
Performance overview ·
BAFA funding ·
FAQs
