Frontend Academy · Pelajaran

Navigasi Keyboard dan Manajemen Fokus

Pastikan semua elemen interaktif dapat dijangkau dengan Tab, kelola fokus secara terprogram dalam dialog dan routing, serta buat indikator fokus yang terlihat.

Navigasi Keyboard dan Manajemen Fokus adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Navigasi Papan Ketik Penting

Banyak pengguna tidak dapat menggunakan tetikus: penyandang disabilitas motorik, pengguna pembaca layar, dan pengguna mahir yang lebih memilih papan ketik. Jika aplikasi Anda tidak dapat dinavigasi dengan papan ketik, aplikasi tersebut tidak berfungsi bagi mereka.

Tab dan Shift+Tab

Tab memindahkan fokus ke elemen interaktif berikutnya. Shift+Tab memindahkannya ke elemen sebelumnya. Secara bawaan, urutannya mengikuti urutan DOM — jangan melawannya; biarkan DOM menjadi urutan tab Anda.

Apa yang Dapat Menerima Fokus Secara Bawaan

Elemen interaktif asli dapat menerima fokus: a[href], button, input, select, textarea, summary. Elemen khusus memerlukan tabindex.

Nilai tabindex

tabindex="0": disertakan dalam urutan tab pada posisi DOM. tabindex="-1": hanya dapat menerima fokus melalui JS (fokus skrip, bukan Tab). tabindex=">0": pola yang buruk — menciptakan urutan fokus yang membingungkan, jangan pernah menggunakannya.

<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>

<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>

Indikator Fokus yang Terlihat

Jangan pernah menghapus garis luar fokus tanpa menyediakan penggantinya. WCAG mengharuskan indikator yang terlihat pada setiap elemen yang dapat menerima fokus.

/* BAD: hides focus for everyone */
*:focus { outline: none; }

/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

:focus-visible

Kelas semu :focus-visible aktif hanya ketika fokus berasal dari papan ketik, bukan dari klik tetikus. Dengan demikian, Anda dapat mempertahankan gaya tetikus yang bersih sekaligus menampilkan fokus papan ketik.

Tautan Lewati ke Konten

Elemen pertama yang dapat menerima fokus seharusnya berupa tautan lewati, sehingga pengguna papan ketik dapat melewati navigasi header dan langsung menuju konten utama.

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

/* CSS */
.skip-link {
  position: absolute; left: -10000px;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: white; padding: 0.5rem 1rem;
}

Perangkap Fokus dalam Modal

Saat modal dibuka, fokus harus terperangkap di dalamnya — menekan Tab dari elemen terakhir akan kembali ke elemen pertama, sedangkan Shift+Tab dari elemen pertama akan kembali ke elemen terakhir. Menekan Escape menutup modal.

// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;

// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();

Gunakan Elemen dialog

<dialog> asli milik HTML secara otomatis menangani perangkap fokus, penutupan dengan Escape, dan lapisan latar modal.

<dialog id="signup">
  <h2>Sign up</h2>
  <form method="dialog">
    <input name="email" required>
    <button>Submit</button>
    <button value="cancel">Cancel</button>
  </form>
</dialog>

<script>
  document.getElementById('signup').showModal(); // opens with focus trap
</script>

Pengelolaan Fokus Setelah Perubahan Rute

Aplikasi satu halaman tidak memuat ulang halaman, sehingga pengguna pembaca layar tidak menerima tanda bahwa navigasi telah terjadi. Pindahkan fokus ke h1 atau main halaman baru saat rute berubah.

// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();

Urutan Fokus Harus Sesuai dengan Urutan Visual

Pastikan urutan DOM sesuai dengan alur visual. Jika CSS mengubah urutan elemen (urutan flex, penempatan grid, posisi absolut), urutan tab tidak akan sesuai — hal ini membingungkan semua orang.

Uji dengan Menjauhkan Tetikus

Pengujian aksesibilitas yang paling berguna: cabut tetikus Anda dan coba gunakan seluruh aplikasi hanya dengan Tab, Shift+Tab, Enter, Spasi, dan tombol panah. Jika Anda mengalami kebuntuan, pengguna Anda juga akan mengalaminya.

Pemeriksaan Singkat

Kelas semu CSS mana yang memungkinkan Anda mengatur gaya garis luar fokus hanya ketika fokus berasal dari papan ketik, bukan dari klik tetikus?

Rangkuman: Navigasi Papan Ketik

Elemen interaktif asli dapat menerima fokus secara bawaan. Gunakan tabindex=0 hanya pada widget khusus; jangan pernah menggunakan tabindex>0. Selalu tampilkan fokus — gunakan :focus-visible. Tambahkan tautan lewati ke konten. Perangkap fokus dalam modal dan pulihkan saat modal ditutup. Gunakan <dialog> asli jika memungkinkan. Pindahkan fokus ke h1/main saat rute berubah. Lakukan pengujian dengan menjauhkan tetikus.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Navigasi Keyboard dan Manajemen Fokus” gratis?

Ya — teks lengkap “Navigasi Keyboard dan Manajemen Fokus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Navigasi Keyboard dan Manajemen Fokus”?

Pastikan semua elemen interaktif dapat dijangkau dengan Tab, kelola fokus secara terprogram dalam dialog dan routing, serta buat indikator fokus yang terlihat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Navigasi Keyboard dan Manajemen Fokus” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy