Wawancara Frontend: Bagaimana Cara Mendesain Indikator Fokus yang Terlihat untuk WCAG 2.2?

Prompt dan konteks

Sebuah sistem desain membutuhkan satu penanganan fokus keyboard untuk tombol, input, menu, dan kontrol kustom. Implementasi saat ini hanya mengubah warna batas, menghilang pada tema kontras rendah, dan mengubah ukuran komponen saat fokus tiba. Rancang pendekatan yang dapat digunakan kembali dan gerbang pengujian (test gate).

WCAG 2.2 menambahkan Focus Appearance sebagai kriteria keberhasilan terkait area indikator dan kontras dengan warna sekitar. Wawancara ini menguji apakah kandidat dapat mengubah persyaratan tersebut menjadi status komponen, token CSS, jalur keyboard, dan pemeriksaan terukur alih-alih hanya menambahkan outline.

Apa yang dinilai oleh pewawancara

Mencari perbedaan antara indikator dan komponen, perhitungan area dan kontras, penanganan yang tidak hanya berbasis warna, kontrol non-persegi panjang dan membulat, tidak adanya pergeseran tata letak (layout shift), semantik bawaan, serta cakupan :focus-visible, input penunjuk (pointer), dan mode forced-colors.

Pertanyaan klarifikasi

• Apakah targetnya WCAG 2.2 AA atau AAA, dan jalur mana saja yang dapat dioperasikan dengan keyboard?
• Apakah cincin (ring) berada di luar, di dalam, atau berjarak (offset) dari komponen?
• Token tema dan aturan forced-colors apa saja yang ada?
• Apakah kontrol kustom menggunakan elemen bawaan (native) atau peran dan status yang benar?
• Bagaimana status fokus, hover, terpilih, dan tidak valid digabungkan?
• Bagaimana kontrol membulat, pengguliran (scrolling), dan latar belakang gambar akan diuji?

Jawaban 30 detik

“Saya akan menginventarisasi elemen yang dapat dioperasikan, menggunakan kontrol native jika memungkinkan, dan menyediakan indikator :focus-visible yang tidak hanya berbasis warna. Gunakan outline atau elemen semu yang tidak mengubah tata letak, dengan token untuk geometri cincin dan kontras terhadap komponen maupun latar belakang di sekitarnya. Pertahankan warna sistem dalam mode forced-colors. Validasi jalur keyboard lengkap, piksel yang dirender, zoom, dan pemeriksaan alat bantu manual.”

Solusi langkah demi langkah

Langkah 1: Tentukan target dan status fokus

Utamakan tombol, input, select, dan tautan bawaan. Div kustom memerlukan penanganan keyboard, sinkronisasi peran, nama, nilai, dan status. focus-visible membantu membedakan fokus penunjuk dan keyboard tetapi tidak boleh menghilangkan umpan balik keyboard.

Tentukan prioritas untuk status default, hover, focus-visible, selected, invalid, dan disabled agar cincin tetap dapat diidentifikasi saat gaya kesalahan atau pilihan diterapkan.

Langkah 2: Gambar tanpa mengubah tata letak

Jangan menambahkan lebar batas saat fokus; ini mengubah kotak dan mendorong elemen di sekitarnya. Utamakan outline, outline-offset, atau elemen semu. Untuk bentuk yang rumit, gabungkan bayangan dalam dan luar tetapi pastikan bayangan tersebut tidak terpotong (clipped).

.control:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

Evaluasi keliling yang dirender dari tombol membulat, tombol ikon, dan slider alih-alih garis persegi panjang yang terpotong oleh elemen induk.

Langkah 3: Ubah WCAG 2.4.13 menjadi token dan batas ambang

Pusatkan token lebar cincin, offset, warna fokus, latar belakang, dan status kesalahan. Uji kontras terhadap komponen yang tidak difokuskan dan latar belakang di sekitarnya, tidak hanya teks. Ambil sampel warna lokal terburuk ketika gradien, gambar, atau lapisan tembus pandang ada.

focus-ring-width >= 2 CSS px
focus-ring-contrast-against-adjacent >= required threshold
focus-ring-area >= minimum perimeter-area rule

Gunakan geometri dan piksel yang dirender untuk gerbang area dan kontras; warna pada berkas desain bukanlah bukti kepatuhan runtime.

Langkah 4: Dukung tema, warna paksa (forced colors), dan penggantian sistem

Berikan token fokus terpisah untuk tema terang, gelap, dan merek. Di bawah forced-colors: active, jangan sembunyikan indikator platform; warna sistem seperti ButtonText dapat mempertahankan visibilitas.

@media (forced-colors: active) {
  .control:focus-visible {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }
}

Jangan pernah menggunakan outline: none kecuali jika status yang sama menyediakan indikator terlihat yang sama jelasnya.

Langkah 5: Cakup kontrol dinamis dan pengguliran

Menu, dialog, combobox, dan daftar virtual harus diuji untuk pergerakan fokus, pengembalian fokus saat ditutup, dan cincin yang tetap terlihat saat menggulir. Transformasi, clip path, dan overflow tidak boleh menghapus indikator.

Dengan aria-activedescendant, indikator visual mengikuti item aktif meskipun fokus DOM tetap berada pada kontainer, dan tampilan keyboard serta pembaca layar harus selaras.

Langkah 6: Bangun penerimaan otomatis dan manual

Otomatiskan pemeriksaan untuk elemen yang dapat difokuskan, outline atau shadow yang dihitung, token tema, aturan forced-colors, dan tangkapan layar di berbagai status dan latar belakang. Gunakan Tab, Shift+Tab, Enter, Space, tombol panah, dan Escape secara manual; uji zoom 200% dan pengaturan kontras tinggi dengan perangkat input yang berbeda.

Catat komponen, status, latar belakang, geometri cincin, hasil kontras, langkah keyboard, dan tangkapan layar. Garis biru yang terlihat dalam berkas desain bukanlah bukti kepatuhan.

Jawaban model

“Saya menginventarisasi kontrol yang dapat dioperasikan dan mengutamakan semantik bawaan. :focus-visible menggunakan outline dan offset yang netral tata letak, sementara token menjaga konsistensi lebar cincin dan kontras. Fokus tidak boleh menambah lebar batas atau hanya bergantung pada warna. Saya menguji mode terang, gelap, dan forced-colors serta mempertahankan visibilitas sistem.”

“Untuk menu, dialog, daftar virtual, dan kontrol non-persegi panjang, saya memverifikasi pergerakan fokus, pengembalian fokus, pemotongan, dan indikasi item aktif. Otomasi menangkap gaya terhitung dan piksel; pemeriksaan manual mencakup jalur keyboard, zoom 200%, dan kontras tinggi.”

Kesalahan umum

• Hanya mengubah warna teks atau batas → cincin menyatu dengan latar belakang → uji warna cincin dan warna sekitar secara terpisah.
• Menambah lebar batas → tata letak bergeser → gunakan outline atau elemen netral tata letak.
• Memaksakan outline: none → pengguna keyboard kehilangan umpan balik → sediakan indikator terlihat yang setara.
• Hanya menguji tema terang → warna gelap atau forced-colors menghilang → cakup setiap mode tema.
• Hanya menggunakan tangkapan layar persegi panjang → geometri membulat dan terpotong terlewatkan → uji bentuk yang dirender dan pengguliran.
• Menempatkan fokus pada div → semantik dan output alat bantu menyimpang → utamakan kontrol bawaan dan ARIA yang valid.

Tindak lanjut dan tanggapan

Tindak lanjut 1: Apakah outline lebih baik daripada box-shadow?

Tidak ada pemenang mutlak. Outline bersifat netral tata letak dan memiliki semantik platform; shadow dapat membuat cincin berlapis. Pilih berdasarkan pemotongan (clipping), geometri membulat, perilaku forced-colors, dan hasil piksel yang dirender.

Tindak lanjut 2: Mengapa :focus-visible tidak dapat menggantikan :focus?

Ini adalah heuristik peramban untuk menentukan kapan menampilkan fokus. Fitur ini tidak boleh menghapus semantik fokus atau membiarkan jalur keyboard dan teknologi bantu tanpa umpan balik.

Tindak lanjut 3: Apakah batas merah kesalahan menggantikan cincin fokus?

Tidak. Kesalahan mengomunikasikan masalah; cincin mengomunikasikan target saat ini. Keduanya harus tetap terlihat tanpa hanya bergantung pada warna.

Tindak lanjut 4: Bagaimana cara menguji latar belakang gambar atau gradien?

Ambil sampel warna lokal terburuk yang berdekatan dengan cincin yang dirender, tambahkan lapisan bawah buram atau cincin kedua jika diperlukan. Warna rata-rata pada desain bukanlah bukti.

Tindak lanjut 5: Bagaimana cara mencegah overflow memotong cincin?

Periksa overflow, clip path, dan transformasi pada elemen leluhur; gunakan cincin dalam, padding, atau elemen semu tingkat komponen agar pas dengan geometri alih-alih menonaktifkan gaya fokus.