FluentStack

Uji Kompetensi Semantic Review and Keyboard Navigation

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 15: AccessibilityAdvanced85 menitBahasa Indonesia

Uji Kompetensi Semantic Review and Keyboard Navigation

Membuktikan kesiapan mengaudit semantic structure dan keyboard journey pada satu page produk.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Membedakan landmark, link, dan button dari tujuan user
  • Memperbaiki tab order serta focus visibility dasar
  • Menambahkan skip link menuju main content
  • Menjelaskan keyboard-only audit dan risiko keyboard trap
Accessibility AuditKeyboard NavigationSemantic HTMLFocusReadiness Checkpoint

Isi lesson

6 blok
  1. 1.
    Checkpoint: keyboard user perlu jalur, lokasi, dan jalan keluarBelum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Gunakan docs saat menemukan masalah keyboard yang nyataBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: keyboard user perlu jalur, lokasi, dan jalan keluar

Wajib

Sebuah route course memakai div untuk navigation dan bookmark action, memaksa urutan dengan tabindex positif, menghapus outline, serta tidak memiliki skip link. Saat panel catatan dibuka, focus tidak berpindah dan Escape tidak berfungsi. Pada checkpoint ini, audit satu page dari sudut pandang user yang tidak memakai mouse. Perbaiki structure yang dapat diuji secara deterministik, lalu tulis langkah keyboard-only untuk bagian yang tetap perlu dibuktikan di browser lokal. Jangan mengubah semua hal sekaligus tanpa alasan: jelaskan mengapa setiap perubahan membantu journey user.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Semantic Review and Keyboard Navigation

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Pada page course, control Bookmark mengubah status tersimpan tanpa berpindah halaman. Pilihan semantic yang tepat adalah

Coding practice

WajibDibuka di workspace khusus

Build keyboard-ready course page checkpoint

Refactor satu page course agar navigation, content utama, skip link, dan action native siap untuk keyboard review.

Tujuan awal: Tambahkan skip link sebelum header yang menuju #main-content.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

10 cek otomatis6 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis accessibility review note untuk route course pada checkpoint. Jelaskan semantic changes yang kamu buat, urutan Tab yang kamu harapkan dari awal route sampai main content, bagaimana skip link serta focus indicator membantu, dan langkah yang kamu gunakan untuk memeriksa panel catatan tidak menjadi keyboard trap. Akhiri dengan satu risiko yang masih perlu diuji di project lokal.

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/650 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Wajib

Gunakan docs saat menemukan masalah keyboard yang nyata

Gunakan sumber resmi untuk menguji keputusan semantic dan keyboard pada page yang benar-benar kamu miliki. Mulai dari native HTML serta walkthrough keyboard sebelum mempertimbangkan ARIA atau library yang lebih kompleks.

MDN

Keyboard accessible

Fokus baca

  • Urutan focus native dan alasan menghindari tabindex lebih dari 0.
  • Interactive semantics untuk control yang dapat difokuskan.
  • Focus styling yang terlihat saat keyboard navigation.

Abaikan dulu

  • Custom widget keyboard model yang kompleks dan shortcut global aplikasi.
Buka dokumentasi

MDN

HTML: A good basis for accessibility

Fokus baca

  • Semantic HTML sebagai accessibility hook bawaan browser.
  • Button dan link native untuk interaction yang umum.
  • Skip link menuju main content dan source order yang bermakna.

Abaikan dulu

  • ARIA widget pattern dan screen reader testing mendalam.
Buka dokumentasi

Aksi setelah membaca

Audit satu route React atau Next.js lokal dengan keyboard saja. Catat landmark, heading, tab order, focus visibility, skip link, dan satu panel interaktif. Tulis issue yang ditemukan, perubahan yang dilakukan, serta behavior yang masih perlu diuji.

Bagian ini memengaruhi progres lesson.

Ringkasan

Wajib
  • Kamu dapat meninjau semantic structure dari tujuan user, bukan hanya dari visual UI.
  • Kamu dapat memeriksa tab order, menjaga focus terlihat, dan menghindari tabindex positif sebagai perbaikan cepat.
  • Kamu dapat menambahkan skip link menuju main content dan menjalankan keyboard-only walkthrough dasar.
  • Kamu dapat menjelaskan mengapa panel sementara memerlukan jalan keluar serta focus return yang diuji.
  • Berikutnya, Accessible Components akan menerapkan prinsip ini pada modal, dropdown, tabs, focus management, dan keputusan ARIA yang lebih spesifik.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: keyboard user perlu jalur, lokasi, dan jalan keluar.

Memuat progresReview module