Skip Links
Membuat jalur cepat dari awal page ke main content ketika navigation berulang tidak perlu ditelusuri satu per satu.
Tujuan belajar
- Menjelaskan kapan repeated navigation memerlukan skip link
- Menghubungkan anchor awal page ke landmark main yang jelas
- Menjaga skip link dapat ditemukan saat menerima focus
- Memasukkan skip link ke keyboard-only audit
Isi lesson
6 blok- 1.Beri jalan singkat pada content yang berulang di setiap routeBelum selesaiWajib
- 2.Skip link menuju landmark content utamaBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Checklist keyboard pada project lokalBelum selesaiWajib
- 5.Cek pemahamanBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Beri jalan singkat pada content yang berulang di setiap route
WajibPada aplikasi dengan header, product navigation, dan beberapa link utilitas, keyboard user dapat perlu menekan Tab berkali-kali sebelum mencapai content utama. Skip link adalah anchor awal page yang membawa fokus atau posisi ke main content, sehingga navigation berulang dapat dilewati saat user membutuhkannya. Pattern ini paling berguna bila page memiliki blok navigation yang konsisten dan cukup panjang. Jangan menyembunyikannya dari keyboard user: skip link boleh tidak dominan secara visual sebelum fokus, tetapi harus muncul jelas ketika mendapat focus. Targetnya juga perlu stabil pada setiap route, sehingga main landmark adalah pilihan yang lebih aman daripada element dekoratif yang kadang hilang.
Bagian ini memengaruhi progres lesson.
Skip link menuju landmark content utama
Wajib<a class="skip-link" href="#main-content">Lewati navigasi dan ke content utama</a>
<header>
<a href="/learn">FluentStack</a>
<nav aria-label="Navigasi utama">...</nav>
</header>
<main id="main-content" tabindex="-1">
<h1>Frontend Engineering</h1>
<p>Pilih module untuk melanjutkan belajar.</p>
</main>href dan id harus merujuk target yang sama. main memberi landmark content utama, sedangkan tabindex=-1 memungkinkan target menerima programmatic focus tanpa masuk ke urutan Tab reguler. Pada local page, tekan Tab pertama kali lalu aktifkan skip link untuk memastikan location serta fokus benar-benar berpindah seperti yang diharapkan.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuild skip-to-main link
Tambahkan skip link yang membawa keyboard user melewati navigation berulang menuju main content.
Tujuan awal: Tambahkan anchor skip link sebelum header dan navigation.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Tips
WajibChecklist keyboard pada project lokal
Buka satu route React atau Next.js lokal. Reload page, tekan Tab sekali, dan pastikan skip link muncul jelas. Aktifkan dengan Enter, lalu cek apakah focus atau viewport tiba di main content. Ulangi pada route lain yang memakai layout sama. FluentStack dapat memeriksa markup exercise, tetapi tidak dapat membuktikan behavior focus project lokalmu secara otomatis.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Target yang paling stabil untuk skip link pada page aplikasi adalah
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Skip link membantu keyboard user melewati navigation berulang menuju content utama.
- Letakkan link di awal page dan hubungkan ke target main yang stabil.
- Skip link harus muncul saat focus, bukan disembunyikan dari keyboard user.
- Validasi markup tidak menggantikan walkthrough Tab dan Enter pada project lokal.
- Berikutnya, kamu akan memeriksa area interaktif yang membuat keyboard user tidak dapat menemukan jalan keluar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Beri jalan singkat pada content yang berulang di setiap route.