Gesaan dan konteks
Sistem reka bentuk memerlukan satu rawatan fokus papan kekunci untuk butang, input, menu dan kawalan tersuai. Pelaksanaan semasa hanya mengubah warna sempadan, hilang pada tema kontras rendah dan mengubah saiz komponen apabila fokus diterima. Reka bentuk pendekatan yang boleh diguna semula dan pintu ujian (test gate).
WCAG 2.2 menambah Focus Appearance sebagai kriteria kejayaan mengenai kawasan penunjuk dan kontras dengan warna bersebelahan. Temu duga ini menguji sama ada calon boleh menukar keperluan tersebut kepada keadaan komponen, token CSS, laluan papan kekunci dan semakan yang boleh diukur berbanding sekadar menambah garis bentuk (outline).
Perkara yang dinilai oleh penemu duga
Mencari perbezaan antara penunjuk dan komponen, pengiraan kawasan dan kontras, rawatan yang bukan berasaskan warna sahaja, kawalan bukan segi empat tepat dan bulat, tiada anjakan reka letak (layout shift), semantik asli, serta liputan :focus-visible, input penuding (pointer) dan mod forced-colors.
Soalan penjelasan
- Adakah sasaran WCAG 2.2 AA atau AAA, dan laluan manakah yang boleh dikendalikan dengan papan kekunci?
- Adakah gelang (ring) berada di luar, di dalam atau diimbangi (offset) daripada komponen?
- Apakah token tema dan peraturan forced-colors yang wujud?
- Adakah kawalan tersuai menggunakan elemen asli atau peranan dan keadaan yang betul?
- Bagaimanakah keadaan fokus, hover, dipilih dan tidak sah digabungkan?
- Bagaimanakah kawalan bulat, tatalan (scrolling) dan latar belakang imej akan diuji?
Jawapan 30 saat
“Saya akan menginventori elemen yang boleh dikendalikan, menggunakan kawalan asli jika boleh, dan menyediakan penunjuk :focus-visible yang bukan berasaskan warna sahaja. Gunakan outline atau elemen pseudo yang tidak mengubah reka letak, dengan token untuk geometri gelang dan kontras terhadap komponen serta latar belakang bersebelahan. Kekalkan warna sistem dalam mod forced-colors. Sahkan laluan papan kekunci lengkap, piksel yang dirender, zum dan semakan bantuan manual.”
Penyelesaian langkah demi langkah
Langkah 1: Tentukan sasaran dan keadaan fokus
Utamakan butang, input, select dan pautan asli. Div tersuai memerlukan pengendalian papan kekunci, peranan, nama, nilai dan penyegerakan keadaan. focus-visible membantu membezakan fokus penuding dan papan kekunci tetapi tidak boleh mengalih keluar maklum balas papan kekunci.
Tentukan keutamaan untuk keadaan default, hover, focus-visible, selected, invalid dan disabled supaya gelang kekal boleh dikenal pasti apabila gaya ralat atau pilihan digunakan.
Langkah 2: Lukis tanpa mengubah reka letak
Jangan tambah lebar sempadan semasa fokus; ia mengubah kotak dan menolak elemen bersebelahan. Utamakan outline, outline-offset atau elemen pseudo. Untuk bentuk yang kompleks, gabungkan bayang dalam dan luar tetapi sahkan bahawa ia tidak dipotong (clipped).
.control:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}Nilaikan perimeter yang dirender bagi butang bulat, butang ikon dan gelangsar (slider) dan bukannya garis segi empat tepat yang dipotong oleh elemen induk.
Langkah 3: Tukarkan WCAG 2.4.13 kepada token dan ambang
Pusatkan token lebar gelang, ofset, warna fokus, latar belakang dan keadaan ralat. Uji kontras terhadap komponen yang tidak difokuskan dan latar belakang bersebelahan, bukan sekadar teks. Ambil sampel warna tempatan yang paling teruk apabila kecerunan (gradients), imej atau lapisan lut sinar wujud.
focus-ring-width >= 2 CSS px
focus-ring-contrast-against-adjacent >= required threshold
focus-ring-area >= minimum perimeter-area ruleGunakan geometri dan piksel yang dirender untuk pintu kawasan dan kontras; warna fail reka bentuk bukanlah bukti pematuhan masa jalan (runtime).
Langkah 4: Sokong tema, warna paksa (forced colors) dan penggantian sistem
Berikan token fokus yang berasingan untuk tema cerah, gelap dan jenama. Di bawah forced-colors: active, jangan sembunyikan penunjuk platform; warna sistem seperti ButtonText boleh mengekalkan keterlihatan.
@media (forced-colors: active) {
.control:focus-visible {
outline: 2px solid ButtonText;
outline-offset: 2px;
}
}Jangan sekali-kali menggunakan outline: none melainkan keadaan yang sama membekalkan penunjuk kelihatan yang sama jelas.
Langkah 5: Liputi kawalan dinamik dan tatalan
Menu, dialog, combobox dan senarai maya mesti diuji untuk pergerakan fokus, pengembalian fokus semasa ditutup dan gelang yang kekal kelihatan semasa menatal. Transformasi, clip path dan limpahan (overflow) tidak boleh memadamkan penunjuk.
Dengan aria-activedescendant, penunjuk visual mengikut item aktif walaupun fokus DOM kekal pada bekas, dan paparan papan kekunci serta pembaca skrin mesti sepadan.
Langkah 6: Bina penerimaan automatik dan manual
Automatikkan semakan untuk elemen yang boleh difokuskan, outline atau shadow yang dikira, token tema, peraturan forced-colors dan tangkapan skrin merentas pelbagai keadaan dan latar belakang. Gunakan Tab, Shift+Tab, Enter, Space, kekunci anak panah dan Escape secara manual; uji zum 200% dan tetapan kontras tinggi dengan peranti input yang berbeza.
Rekodkan komponen, keadaan, latar belakang, geometri gelang, hasil kontras, langkah papan kekunci dan tangkapan skrin. Garisan biru yang kelihatan dalam fail reka bentuk bukanlah bukti pematuhan.
Jawapan model
“Saya menginventori kawalan yang boleh dikendalikan dan mengutamakan semantik asli. :focus-visible menggunakan outline dan ofset yang neutral reka letak, manakala token mengekalkan lebar gelang dan kontras yang konsisten. Fokus tidak boleh menambah lebar sempadan atau bergantung pada warna sahaja. Saya menguji mod cerah, gelap dan forced-colors serta mengekalkan keterlihatan sistem.”
“Bagi menu, dialog, senarai maya dan kawalan bukan segi empat tepat, saya mengesahkan pergerakan fokus, pengembalian fokus, pemotongan dan penunjuk item aktif. Automasi menangkap gaya yang dikira dan piksel; semakan manual meliputi laluan papan kekunci, zum 200% dan kontras tinggi.”
Kesilapan lazim
- Hanya menukar warna teks atau sempadan → gelang bercampur dengan latar belakang → uji warna gelang dan warna bersebelahan secara berasingan.
- Menambah lebar sempadan → reka letak beranjak → gunakan outline atau elemen neutral reka letak.
- Memaksa
outline: none→ pengguna papan kekunci kehilangan maklum balas → sediakan penunjuk kelihatan yang setara. - Hanya menguji tema cerah → warna gelap atau forced-colors hilang → liputi setiap mod tema.
- Hanya menggunakan tangkapan skrin segi empat tepat → geometri bulat dan dipotong terlepas pandang → uji bentuk yang dirender dan tatalan.
- Meletakkan fokus pada div → semantik dan output bantuan menyimpang → utamakan kawalan asli dan ARIA yang sah.
Soalan susulan dan jawapan
Soalan susulan 1: Adakah outline lebih baik daripada box-shadow?
Tiada pemenang sejagat. Outline adalah neutral reka letak dan mempunyai semantik platform; shadow boleh mencipta gelang berlapis. Buat pilihan berdasarkan pemotongan (clipping), geometri bulat, tingkah laku forced-colors dan hasil piksel yang dirender.
Soalan susulan 2: Mengapakah :focus-visible tidak boleh menggantikan :focus?
Ia merupakan heuristik pelayar untuk menentukan masa menunjukkan fokus. Ia tidak boleh mengalih keluar semantik fokus atau membiarkan laluan papan kekunci dan teknologi bantuan tanpa maklum balas.
Soalan susulan 3: Adakah sempadan merah ralat menggantikan gelang fokus?
Tidak. Ralat menyampaikan masalah; gelang menyampaikan sasaran semasa. Kedua-duanya mesti kekal kelihatan tanpa bergantung pada warna sahaja.
Soalan susulan 4: Bagaimanakah anda menguji latar belakang imej atau kecerunan?
Ambil sampel warna tempatan yang paling teruk bersebelahan dengan gelang yang dirender, tambah lapis bawah legap atau gelang kedua jika perlu. Purata warna reka bentuk bukanlah bukti.
Soalan susulan 5: Bagaimanakah anda menghalang overflow daripada memotong gelang?
Periksa overflow, clip path dan transformasi elemen leluhur; gunakan gelang dalam, padding atau elemen pseudo peringkat komponen untuk memuatkan geometri berbanding menyahdayakan penggayaan fokus.