FluentStack

Keyboard Navigation Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 2: HTML and Accessibility FoundationsBeginner25 menitBahasa Indonesia

Keyboard Navigation Dasar

Cek apakah elemen penting di halaman bisa dijangkau dan dipakai dengan keyboard.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami kenapa keyboard navigation penting
  • Mencoba Tab, Shift + Tab, Enter, dan Space secara sederhana
  • Mengenali elemen interaktif yang perlu bisa difokuskan
AccessibilityHTMLForms

Isi lesson

6 blok
  1. 1.
    Tidak semua user memakai mouseBelum selesaiWajib
  2. 2.
    Elemen HTML yang sudah ramah keyboardBelum selesaiWajib
  3. 3.
    Clickable div bisa menyulitkan keyboardBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coba cek dengan TabBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Tidak semua user memakai mouse

Wajib

Keyboard navigation berarti user bisa berpindah dan memakai elemen interaktif dengan keyboard. Tab biasanya berpindah ke elemen focusable berikutnya. Shift + Tab bergerak mundur. Enter biasanya mengaktifkan link atau button. Space biasanya mengaktifkan button atau checkbox. Untuk tahap awal, fokus pada perilaku dasarnya dulu.

Bagian ini memengaruhi progres lesson.

Elemen HTML yang sudah ramah keyboard

Wajib
html
<a href="/roadmap">Lihat roadmap</a>

<button type="button">Buka menu</button>

<label for="email">Email</label>
<input id="email" type="email" />

Link, button, dan input asli sudah punya perilaku keyboard bawaan yang lebih aman. Ini salah satu alasan kamu perlu memilih elemen HTML berdasarkan makna dan fungsi.

Bagian ini memengaruhi progres lesson.

Kesalahan umum

Wajib

Clickable div bisa menyulitkan keyboard

Div yang diberi event klik bisa terlihat seperti tombol, tetapi tidak otomatis punya perilaku keyboard yang baik. Aturan pemula: pakai button asli untuk aksi dan link asli untuk navigasi.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Tombol submit form seharusnya bisa dijalankan dengan apa?

Progres lesson naik setelah jawaban benar.

Coba cek dengan Tab

Wajib

Buka salah satu halaman FluentStack, lalu tekan Tab beberapa kali. Amati apakah fokus berpindah ke link, button, atau input. Kamu belum perlu mengaudit semuanya. Cukup mulai mengenali bahwa elemen penting harus bisa dijangkau tanpa mouse.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Keyboard navigation membantu user yang tidak memakai mouse.
  • Link, button, dan input asli lebih aman untuk keyboard.
  • Tab membantu mengecek urutan fokus.
  • Berikutnya, kamu akan memakai checklist sederhana untuk review aksesibilitas awal.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tidak semua user memakai mouse.

Memuat progresReview module