Pengguna keyboard mungkin harus menelusuri header yang sama di setiap halaman sebelum mencapai artikel. Tautan lewati membuat konten utama dapat dijangkau dalam satu tindakan, tanpa mengubah tata letak visual untuk semua orang.

<a class="skip-link" href="#main">Skip to content</a>
<header>...</header>
<main id="main" tabindex="-1">...</main>

Jaga agar tetap terlihat saat fokus

  • Tempatkan tautan di dekat bagian awal dokumen sehingga menjadi salah satu perhentian keyboard pertama.
  • Sembunyikan secara visual tanpa menghapusnya dari urutan tab, lalu tampilkan dengan :fokus.
  • Berikan target ID yang stabil dan pastikan fokus dapat berpindah ke sana.
.skip-link:not(:focus) {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link:focus { clip-path: none; height: auto; width: auto; }

Uji dengan menekan Tab segera setelah memuat halaman, lalu aktifkan tautan dan konfirmasikan fokus dan posisi membaca berpindah ke konten utama.