0Pricing
React Academy · Pelajaran

Interaksi Papan Ketik & Tautan Lewati

Dukung pengguna yang mengutamakan papan ketik: gunakan tombol/tautan bawaan, urutan tab yang logis, pola tombol panah, dan tautan lewati yang terlihat menuju konten utama.

Interaksi Papan Ketik & Tautan Lewati adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 3. 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 3 pelajaran total.

Mengapa dukungan keyboard penting

Tujuan: Buat aplikasi sepenuhnya dapat digunakan dengan keyboard.

  • Utamakan button/a bawaan
  • Urutan Tab yang logis
  • Sediakan tautan lewati

Utamakan kontrol bawaan

  • Gunakan button untuk klik (Space/Enter berfungsi secara bawaan)
  • Gunakan a href untuk navigasi (Enter)
  • Hindari div yang dapat diklik; jika diperlukan, tambahkan role, tabindex, dan penangan keyboard

Contoh: tombol nyata lebih baik daripada div

Tombol bawaan menyediakan fokus, tombol keyboard, dan semantik secara gratis.


<div id="root"></div>

Contoh: tombol panah (tabindex berpindah)

Sediakan perpindahan dengan tombol panah di dalam widget gabungan (daftar sederhana dengan tabindex berpindah).


<div id="root"></div>

Contoh: lewati ke konten

Tambahkan tautan lewati yang mendapat fokus pertama dan melompat ke konten main.


<div id="root"></div>

Daftar periksa dan tips

  • Tempatkan tautan lewati di awal DOM; tampilkan saat mendapat fokus
  • Pastikan wilayah main dapat menerima fokus (tabIndex=-1)
  • Jaga urutan Tab tetap logis; hindari tabindex yang lebih besar dari 0

Pemeriksaan tujuan tautan lewati

Apa tujuan tautan lewati pada sebuah halaman?

Ringkasan

Ringkasan: Utamakan kontrol bawaan, dukung tombol panah dalam widget gabungan, dan tambahkan tautan lewati yang terlihat saat mendapat fokus untuk mencapai konten main dengan cepat.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Interaksi Papan Ketik & Tautan Lewati” gratis?

Ya — teks lengkap “Interaksi Papan Ketik & Tautan Lewati” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Academy, upgrade ke CoddyKit PRO. Kursus React Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Interaksi Papan Ketik & Tautan Lewati”?

Dukung pengguna yang mengutamakan papan ketik: gunakan tombol/tautan bawaan, urutan tab yang logis, pola tombol panah, dan tautan lewati yang terlihat menuju konten utama. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 2 dari 3.

Berapa lama pelajaran “Interaksi Papan Ketik & Tautan Lewati” 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 React Academy ini?

Ya. Setiap pelajaran React 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

  1. Semantik, Label, Peran, Fokus
  2. Interaksi Papan Ketik & Tautan Lewati
  3. Dasar Pengujian A11y
← Kembali ke React Academy