Pertarungan tertua di CSS: pengguna mouse tidak menyukai cincin fokus yang muncul di setiap klik, pengguna keyboard akan mati tanpanya. Browser menyelesaikan panggilan penilaian itu sendiri dengan kelas semu yang terlihat fokus: ia mencocokkan fokus gaya keyboard dan melewati fokus gaya mouse.
/* default: remove only for pointer focus, not for keyboard */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 2px;
}Tiga aturan
- Jangan pernah menghapus indikator yang terlihat untuk pengguna keyboard: dengan fokus terlihat, melepas cincin dan menggantinya dengan tangan memberikan kontrol desain penuh.
- Browser memilih heuristik: kecocokan fokus yang terlihat untuk navigasi keyboard, digabungkan untuk melewati klik mouse pada sebagian besar interaksi.
- Setiap kontrol terfokus masih memerlukan cincinnya: fokus terlihat sesuai dengan cincinnya, hal ini tidak menciptakan perilaku fokus.
Satu bagian halus yang perlu dihormati
Fokus terprogram: panggilan fokus() pada lompatan tautan atau pada target pesan kesalahan. Peramban berbeda-beda dalam hal apakah fokus tersebut terlihat; tentukan interaksi di stylesheet Anda secara eksplisit dan uji sekali dengan tab dan sekali dengan mengklik, lebih suka terlihat untuk keduanya jika ragu. Dering yang terlewat pada tautan lewati adalah laporan pembaca layar, bukan kecelakaan desain.
Situs ini mempertahankan cincin default platform, disesuaikan dengan satu warna merek yang jelas. WCAG 2.2 menjadikan fokus yang terlihat sebagai kriteria keberhasilan yang eksplisit; kelas semu yang membuat kedua penonton senang sangat gacor dan lebih tua dari kontroversi yang diselesaikannya.