Focus Visibility
Membuat posisi keyboard focus terlihat jelas tanpa menghilangkan affordance native browser.
Tujuan belajar
- Menjelaskan mengapa focus indicator adalah informasi navigasi, bukan dekorasi
- Menggunakan :focus-visible untuk keyboard-focused control
- Menjaga outline tetap terlihat terhadap surface UI
- Mengaudit focus state pada link, button, dan form control
Isi lesson
6 blok- 1.Keyboard user perlu tahu posisi sebelum memilih action berikutnyaBelum selesaiWajib
- 2.Focus ring yang jelas untuk link dan action courseBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Jangan menilai focus hanya dengan mouseBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Keyboard user perlu tahu posisi sebelum memilih action berikutnya
WajibSaat user menekan Tab, focus indicator memberi jawaban langsung: control mana yang sedang aktif dan dapat dioperasikan. Menghapus outline default tanpa pengganti membuat journey keyboard seperti berjalan tanpa penanda. focus state tidak harus sama dengan hover, karena hover menunjukkan pointer sedangkan focus menunjukkan lokasi input keyboard. Gunakan :focus-visible untuk memberi indicator yang jelas ketika browser menilai focus perlu terlihat, lalu periksa kontras ring terhadap background serta jaraknya dari component. Tujuannya bukan membuat ring paling ramai, melainkan membuat lokasi fokus dapat ditemukan cepat pada UI yang padat.
Bagian ini memengaruhi progres lesson.
Focus ring yang jelas untuk link dan action course
Wajib.course-link:focus-visible,
.course-action:focus-visible {
outline: 3px solid #0ea5e9;
outline-offset: 3px;
}
/* Jangan lakukan ini tanpa pengganti yang setara */
.course-action:focus {
/* outline: none; */
}outline tidak mengubah ukuran layout seperti border, dan outline-offset memberi ruang agar ring tidak berhimpitan dengan edge button atau link. Selector :focus-visible menjaga style fokus tetap relevan untuk keyboard interaction. Nilai warna tetap harus diuji pada surface aplikasi yang sebenarnya; satu ring yang terlihat di background terang belum tentu cukup di semua theme.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususAdd course focus-visible styles
Ganti outline yang dihapus dengan focus indicator yang cukup jelas untuk link dan button course.
Tujuan awal: Fokus di tab CSS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Mengapa menghapus outline default tanpa pengganti adalah masalah?
Progres lesson naik setelah jawaban benar.
Peringatan
WajibJangan menilai focus hanya dengan mouse
Hover dapat terlihat baik saat pointer bergerak, tetapi ia tidak membuktikan keyboard user tahu posisi focus. Uji dengan keyboard dari awal page, pada background yang berbeda, dan pada control disabled atau selected bila state tersebut tersedia. Pastikan indicator tidak tertutup overlay atau terpotong container.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Focus indicator memberi lokasi input keyboard yang sedang aktif.
- Jangan menghapus outline default tanpa state pengganti yang setara atau lebih jelas.
- :focus-visible membantu membedakan kebutuhan focus keyboard dari hover pointer.
- Periksa kontras, offset, clipping, dan state control pada UI nyata.
- Berikutnya, skip link memberi jalan cepat melewati navigasi yang berulang agar user lebih cepat mencapai main content.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Keyboard user perlu tahu posisi sebelum memilih action berikutnya.