Tab Order
Menjaga urutan fokus mengikuti urutan baca dan tugas user tanpa memaksa browser dengan tabindex positif.
Tujuan belajar
- Menjelaskan source order sebagai dasar tab order native
- Mendeteksi urutan fokus yang membingungkan pada UI course
- Menghindari tabindex positif sebagai alat layout
- Melakukan walkthrough keyboard-only yang dapat diulang
Isi lesson
6 blok- 1.Tab seharusnya mengikuti cerita page yang sama dengan mata userBelum selesaiWajib
- 2.Urutan source lebih aman daripada angka tabindexBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Writing practiceBelum selesaiWajib
- 5.Cek pemahamanBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Tab seharusnya mengikuti cerita page yang sama dengan mata user
WajibSecara default, browser memindahkan fokus ke control interaktif sesuai source order HTML. Itulah alasan struktur markup perlu mengikuti urutan baca yang logis, bukan hanya posisi akhir setelah CSS grid atau flex. tabindex positif dapat memaksa lompatan ke urutan angka tertentu, tetapi ia mudah menjadi rapuh saat control ditambah atau layout berubah. Saat review, mulai dari tombol pertama setelah address bar, tekan Tab perlahan, lalu tanyakan apakah fokus bergerak ke action yang masuk akal. Bila fokus melompat ke footer, panel samping, atau action sekunder sebelum content utama, perbaiki struktur dan source order lebih dahulu.
Bagian ini memengaruhi progres lesson.
Urutan source lebih aman daripada angka tabindex
Wajib<!-- Hindari: angka memaksa urutan yang mudah rusak -->
<button tabindex="3">Simpan</button>
<a href="#lesson" tabindex="1">Lanjutkan lesson</a>
<button tabindex="2">Buka filter</button>
<!-- Pilih: letakkan control mengikuti journey user -->
<a href="#lesson">Lanjutkan lesson</a>
<button type="button">Buka filter</button>
<button type="button">Simpan</button>Contoh kedua membuat Tab mengikuti urutan HTML tanpa angka tambahan. Jika visual order berbeda dari source order, jangan langsung menambah tabindex positif. Tinjau apakah CSS atau struktur DOM dapat disusun ulang supaya pembaca visual dan keyboard memperoleh perjalanan yang konsisten.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususFix course tab order
Susun action course dalam source order yang mengikuti journey learner tanpa tabindex positif.
Tujuan awal: Baca journey learner dari action utama ke action pendukung.
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 catatan review singkat untuk page lesson yang saat ini melompat dari tombol Lanjutkan ke tombol Simpan di footer sebelum learner mencapai content utama. Jelaskan urutan keyboard yang kamu harapkan, perubahan structure atau source order yang akan kamu pilih, dan alasan kamu tidak memakai tabindex positif sebagai perbaikan cepat.
Tulis draft dulu sebelum menandai writing practice selesai.
0/300 karakter
Checklist panduan
Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Perbaikan awal yang paling tepat saat tab order tidak sesuai alur page adalah
Progres lesson naik setelah jawaban benar.
Ringkasan
Wajib- Source order adalah dasar default tab order pada HTML native.
- Keyboard walkthrough perlu mengikuti alur tugas user, bukan hanya urutan DOM yang kebetulan ada.
- Hindari tabindex positif; perbaiki structure dan layout bila urutan membingungkan.
- Gunakan Tab dan Shift+Tab untuk memeriksa jalan maju serta mundur pada page nyata.
- Berikutnya, learner perlu selalu melihat di mana fokus berada saat walkthrough tersebut berjalan.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Tab seharusnya mengikuti cerita page yang sama dengan mata user.