Skip Link (Pautan Langkau)

Benarkan pengguna papan kekunci melangkau header dan navigasi terus ke kandungan utama pada tekanan Tab pertama.

Pratonton langsung Buka dalam Playground

index.html

<body>
  <a class="skip-link" href="#main">Skip to main content</a>

  <header>…logo and a long navigation menu…</header>

  <main id="main" tabindex="-1">
    <h1>Page title</h1>
  </main>
</body>

skip-link.css

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: #111;
  color: #fff;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;

  /* Off-screen until focused */
  transform: translateY(calc(-100% - 1rem));
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
}

/* The target gets focus but doesn't need a focus ring */
main:focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

Pengguna papan kekunci dan pembaca skrin bergerak melalui halaman mengikut turutan. Tanpa skip link, mereka perlu tekan Tab melalui setiap item menu pada setiap halaman sebelum sampai ke kandungan. WCAG 2.4.1 (Bypass Blocks) mahukan cara untuk melangkau blok berulang — skip link ialah cara paling mudah.

Cara ia berfungsi

Ia elemen boleh-fokus yang pertama dalam <body>, jadi Tab pertama akan sampai padanya.
Ia dialihkan ke atas viewport dengan transform (bukan display: none, yang akan menyebabkan ia tak boleh difokus).
Semasa :focus ia menggelongsor masuk, jadi pengguna papan kekunci yang boleh melihat tahu di mana mereka berada.
href="#main" merujuk kepada id elemen <main>. Bila diaktifkan, titik mula fokus pelayar berpindah ke situ, jadi Tab seterusnya bersambung di dalam kandungan utama.
tabindex="-1" pada <main> membolehkan ia difokus melalui skrip/pautan tetapi bukan sebahagian daripada turutan Tab biasa. Ini menjadikan lompatan lebih stabil dalam pelayar dan pembaca skrin lama.

Tentang preview

Dalam preview WANCode, pautan tidak menavigasi, jadi script.js preview yang alihkan fokus ke sasaran. Di halaman sebenar pelayar buat ini untuk anda — anda tak perlukan skrip itu.

Cara guna

Text

1. Open your page.
2. Click the address bar, then press Tab once.
3. The "Skip to main content" link should appear in the top-left.
4. Press Enter, then Tab again — focus should be inside <main>, not the menu.