Navigasi Papan Kekunci dan Pengurusan Fokus
Pastikan semua elemen interaktif boleh dicapai dengan Tab, urus fokus secara terprogram dalam dialog dan penghalaan, serta cipta penunjuk fokus yang jelas.
Navigasi Papan Kekunci dan Pengurusan Fokus ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Mengapa Navigasi Papan Kekunci Penting
Ramai pengguna tidak boleh menggunakan tetikus: individu kurang upaya motor, pengguna pembaca skrin dan pengguna berpengalaman yang lebih suka papan kekunci. Jika aplikasi anda tidak boleh dinavigasi menggunakan papan kekunci, aplikasi itu tidak berfungsi untuk mereka.
Tab dan Shift+Tab
Tab mengalihkan focus ke elemen interaktif seterusnya. Shift+Tab mengalihkannya ke elemen sebelumnya. Turutan mengikut turutan DOM secara lalai — jangan melawannya; biarkan DOM menjadi turutan tab anda.
Perkara yang Boleh Menerima Focus Secara Lalai
Elemen interaktif natif boleh menerima focus: a[href], button, input, select, textarea, summary. Elemen tersuai memerlukan tabindex.
Nilai tabindex
tabindex="0": disertakan dalam turutan tab pada kedudukan DOM. tabindex="-1": boleh menerima focus melalui JS sahaja (focus skrip, bukan Tab). tabindex=">0": corak anti — menghasilkan turutan focus yang mengelirukan, jangan sekali-kali gunakan.
<!-- 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>Penunjuk Focus yang Kelihatan
Jangan sekali-kali membuang garis luar focus tanpa menyediakan pengganti. WCAG memerlukan penunjuk yang kelihatan pada setiap elemen yang boleh menerima focus.
/* 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 pseudo :focus-visible hanya diaktifkan apabila focus datang daripada papan kekunci, bukan klik tetikus. Ini membolehkan anda mengekalkan gaya tetikus yang kemas sambil memaparkan focus papan kekunci.
Pautan Langkau ke Kandungan
Elemen pertama yang boleh menerima focus hendaklah berupa pautan langkau, supaya pengguna papan kekunci boleh melangkaui navigasi pengepala dan terus ke kandungan 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 Focus dalam Modal
Apabila modal dibuka, focus hendaklah terperangkap di dalamnya — Tab daripada elemen terakhir kembali ke elemen pertama, manakala Shift+Tab daripada elemen pertama 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> natif HTML mengendalikan perangkap focus, penutupan dengan Escape dan lapisan latar modal secara automatik.
<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>Pengurusan Focus Selepas Perubahan Laluan
SPA tidak memuat semula halaman, jadi pengguna pembaca skrin tidak menerima isyarat bahawa navigasi telah berlaku. Alihkan focus ke h1 atau main halaman baharu apabila laluan berubah.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();Turutan Focus Hendaklah Sejajar dengan Turutan Visual
Pastikan turutan DOM sepadan dengan aliran visual. Jika CSS menyusun semula elemen (susunan flex, penempatan grid, kedudukan mutlak), turutan tab tidak akan sepadan — hal ini mengelirukan semua orang.
Uji dengan Mengetepikan Tetikus
Ujian kebolehcapaian yang paling berguna: cabut tetikus dan cuba gunakan seluruh aplikasi dengan Tab, Shift+Tab, Enter, Space dan kekunci anak panah. Jika anda buntu, pengguna anda juga akan buntu.
Semakan Pantas
Kelas pseudo CSS manakah yang membolehkan anda menggayakan garis luar focus hanya apabila focus datang daripada papan kekunci, bukan klik tetikus?
Rumusan: Navigasi Papan Kekunci
Elemen interaktif natif boleh menerima focus secara lalai. Gunakan tabindex=0 hanya pada widget tersuai; jangan sekali-kali gunakan tabindex>0. Sentiasa paparkan focus — gunakan :focus-visible. Tambahkan pautan langkau ke kandungan. Perangkap focus dalam modal dan pulihkan focus apabila modal ditutup. Gunakan <dialog> natif apabila boleh. Alihkan focus ke h1/main apabila laluan berubah. Uji dengan mengetepikan tetikus.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Navigasi Papan Kekunci dan Pengurusan Fokus” percuma?
Ya — teks penuh “Navigasi Papan Kekunci dan Pengurusan Fokus” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Navigasi Papan Kekunci dan Pengurusan Fokus”?
Pastikan semua elemen interaktif boleh dicapai dengan Tab, urus fokus secara terprogram dalam dialog dan penghalaan, serta cipta penunjuk fokus yang jelas. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Navigasi Papan Kekunci dan Pengurusan Fokus” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Tahap WCAG A AA AAA
- HTML Semantik sebagai Asas
- Peranan dan Atribut ARIA
- Navigasi Papan Kekunci dan Pengurusan Fokus