Uji Kompetensi Accessible Components
Membuktikan kesiapan mengaudit satu component interaktif dari semantic structure, keyboard journey, focus, sampai ARIA state.
Yang dicek
- Mengaudit modal, disclosure, tabs, dan perubahan focus dari sudut pandang user
- Menggunakan native control sebelum role tambahan
- Menyusun keyboard test plan untuk satu component React
- Menjelaskan trade-off accessibility dalam implementation note yang jelas
Isi lesson
6 blok- 1.Checkpoint: component interaktif harus dapat menjelaskan journey keyboard-nyaBelum selesaiWajib
- 2.QuizBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Baca pattern resmi sebelum membuat widget customBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Checkpoint: component interaktif harus dapat menjelaskan journey keyboard-nya
WajibTim menambahkan dialog Hapus catatan, panel Resource course, dan tabs detail lesson. Dialog hanya diberi role tanpa focus handling. Resource panel memakai role menu tetapi masih berisi link biasa yang berpindah dengan Tab. Tabs dapat diklik mouse tetapi tidak menyatakan selection atau panel yang dikontrol. Pada checkpoint ini, jangan sekadar menambah attribute. Pilih primitive yang sesuai, jelaskan focus entry dan exit, lalu tulis keyboard walkthrough yang membuktikan behavior penting. Component yang lebih kecil, native, dan dapat diuji biasanya memberi hasil lebih baik daripada ARIA besar yang tidak lengkap.
Bagian ini memengaruhi progres lesson.
Quiz
WajibUji Kompetensi Accessible Components
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
Saat modal konfirmasi kecil dibuka, behavior focus yang tepat adalah
Coding practice
WajibDibuka di workspace khususBuild accessible delete note dialog checkpoint
Perbaiki dialog Hapus catatan agar memiliki native trigger, dialog semantics, keyboard close, focus loop kecil, dan focus return.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Writing practice
WajibLatihan menulis
Tulis implementation note untuk perbaikan component Hapus catatan. Jelaskan semantic trigger, modal labeling, focus entry, Tab dan Shift+Tab, Escape dan close action, focus return setelah close, serta satu alasan kamu tidak memakai ARIA lebih banyak dari yang diperlukan. Tambahkan langkah manual QA keyboard yang akan kamu jalankan pada project lokal.
Tulis draft dulu sebelum menandai writing practice selesai.
0/700 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Documentation Bridge
WajibBaca pattern resmi sebelum membuat widget custom
Gunakan Authoring Practices Guide untuk memeriksa keyboard contract component yang benar-benar kamu bangun. Jangan menyalin role dari satu pattern ke component lain tanpa membaca interaction dan focus behavior yang ikut menjadi tanggung jawabnya.
W3C WAI
Dialog (Modal) Pattern
Fokus baca
- Focus masuk ke dialog saat open serta kembali ke workflow yang tepat saat close.
- Tab dan Shift+Tab tetap di dalam modal dialog.
- Visible close action, Escape, dialog label, dan aria-modal.
Abaikan dulu
- Dialog bertingkat, date picker, dan library focus trap yang kompleks.
W3C WAI
ARIA Authoring Practices Patterns
Fokus baca
- Perbedaan disclosure, menu button, dan tabs sebelum memilih role.
- Keyboard contract yang datang bersama role menu atau tab.
- Kapan native HTML lebih kecil dan lebih tepat daripada custom widget.
Abaikan dulu
- Combobox, tree view, drag and drop, dan full widget library.
Aksi setelah membaca
Pilih satu modal, dropdown, tabs, atau form field component pada project React atau Next.js lokal. Buat keyboard walkthrough, catat semantic serta ARIA state yang ada, perbaiki satu issue, lalu tulis note tentang perubahan dan sisa risiko.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Kamu dapat menilai modal dari label, focus entry, focus containment, close behavior, dan focus return.
- Kamu dapat membedakan disclosure link sederhana dari menu atau tabs dengan keyboard contract yang lebih berat.
- Kamu dapat memindahkan focus setelah perubahan UI besar tanpa mencuri posisi user pada update kecil.
- Kamu menggunakan ARIA untuk state serta relationship yang nyata sambil mempertahankan native HTML bila sudah cukup.
- Berikutnya, Accessibility Testing and Preferences akan menguji contrast, form error, reduced motion, screen reader smoke test, dan batas automated tooling.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian wajib checkpoint ini
Lanjutkan blok wajib berikutnya: Checkpoint: component interaktif harus dapat menjelaskan journey keyboard-nya.