Memahami Perbezaan Antara `:focus` dan `:focus-visible` dalam CSS

Memahami Perbezaan Antara :focus dan :focus-visible dalam CSS

Saya telah mempelajari bahagian saya yang saksama tentang kepentingan kebolehcapaian papan kekunci, jadi saya tahu bahawa petunjuk visual elemen yang difokuskan adalah sangat penting. Tetapi kelas pseudo :focus yang terkenal tidak selalunya paling sesuai untuk kerja ini. Di situlah :focus-visible masuk. Mari kita lihat perbezaan antara dua kelas pseudo ini dan terokai amalan terbaik untuk menggunakannya dengan berkesan.

Apakah itu :focus Pseudo-Class?

Kelas pseudo :focus ialah pemilih CSS yang menggunakan gaya pada mana-mana elemen yang menerima fokus, tidak kira bagaimana fokus itu dicetuskan. Ini termasuk acara fokus daripada navigasi papan kekunci, klik tetikus dan interaksi sentuhan.

Contoh Penggunaan :fokus

button:focus {
  outline: 2px solid blue;
}

Dalam contoh ini, butang akan memaparkan garis besar biru apabila ia difokuskan, sama ada pengguna mengklik padanya dengan tetikus, mengetiknya pada skrin sentuh atau menavigasi ke sana menggunakan papan kekunci.

Apakah itu Kelas Pseudo yang boleh dilihat fokus?

Kelas pseudo :focus-visible adalah lebih khusus. Ia hanya menggunakan gaya pada elemen apabila penyemak imbas menentukan bahawa fokus harus kelihatan. Ini biasanya berlaku apabila pengguna menavigasi melalui papan kekunci atau teknologi bantuan dan bukannya melalui input tetikus atau sentuhan.

Contoh Penggunaan :focus-visible

button:focus-visible {
  outline: 2px solid blue;
}

Di sini, butang hanya akan menunjukkan garis besar biru apabila difokuskan melalui navigasi papan kekunci atau kaedah input lain yang biasanya memerlukan penunjuk fokus yang boleh dilihat.

Perbezaan Utama Antara :focus dan :focus-visible

: fokus

• Gelagat: Digunakan pada mana-mana elemen yang menerima fokus, tanpa mengira kaedah input.
• Kes Penggunaan: Memastikan semua interaksi dengan elemen ditunjukkan secara visual, sama ada melalui tetikus, papan kekunci atau sentuhan.

: fokus-nampak

• Gelagat: Menggunakan gaya hanya apabila fokus sepatutnya kelihatan, seperti menggunakan papan kekunci atau teknologi bantuan.
• Kes Penggunaan: Sesuai untuk senario di mana anda ingin memberikan penunjuk fokus hanya kepada papan kekunci dan pengguna teknologi bantuan sambil mengelakkan garis besar yang tidak perlu untuk pengguna tetikus dan sentuhan, biasanya diperlukan oleh reka bentuk.

Implikasi Kebolehcapaian

: fokus

• Kebaikan:
• Menjamin semua pengguna dapat melihat apabila elemen difokuskan, yang penting untuk kebolehaksesan.
• Keburukan:
• Boleh membawa kepada pengalaman yang tidak optimum untuk pengguna tetikus, kerana gaya fokus mungkin muncul secara tidak perlu semasa interaksi tetikus.

: fokus-nampak

• Kebaikan:
• Meningkatkan pengalaman pengguna dengan menunjukkan penunjuk fokus hanya apabila perlu, sekali gus memastikan antara muka bersih untuk pengguna tetikus dan sentuhan.
• Menyesuaikan pengalaman untuk pengguna papan kekunci dan teknologi bantuan, memberikan mereka isyarat visual yang jelas.
• Keburukan:
• Pertimbangan tambahan mungkin diperlukan untuk memastikan penunjuk fokus tidak diabaikan secara tidak sengaja, terutamanya dalam penyemak imbas lama yang tidak menyokong :focus-visible.
  • Mungkin terdapat kes di mana anda ingin menunjukkan penunjuk fokus untuk semua pengguna, tanpa mengira kaedah input.

Amalan Terbaik untuk Menggunakan :focus dan :focus-visible

Untuk mencapai kebolehaksesan dan pengalaman pengguna yang terbaik, menggabungkan kedua-dua :focus dan :focus-visible dalam CSS anda selalunya merupakan idea yang baik.

Menggabungkan :fokus dan :fokus-boleh dilihat

button:focus {
  outline: 2px solid blue;
}

Berikut ialah contoh Stackblitz tentang rupa gaya sedemikian untuk anda cuba dan mainkan:

Petua Tambahan

• Uji dengan Papan Kekunci dan Teknologi Bantuan: Pastikan aplikasi web anda boleh dilayari menggunakan papan kekunci (Tab, Tab Shift, dsb.) dan penunjuk fokus boleh dilihat oleh mereka yang bergantung padanya. Bukan idea yang buruk untuk memasukkan ujian kebolehaksesan dalam suite ujian e2e anda.
• Sediakan Penunjuk Fokus yang Jelas: Pastikan penunjuk fokus menonjol dan mudah dilihat. Penunjuk fokus yang halus atau sukar dikesan boleh memberi kesan teruk kepada kebolehaksesan untuk pengguna yang bergantung pada navigasi papan kekunci.

Kesimpulan

Kelas pseudo :focus-visible menawarkan cara yang lebih halus untuk mengurus penunjuk fokus, meningkatkan kebolehcapaian dan pengalaman pengguna, terutamanya untuk papan kekunci dan pengguna teknologi bantuan. Dengan memahami perbezaan antara :focus dan :focus-visible, dan menggunakan amalan terbaik dalam CSS anda, anda boleh mencipta aplikasi web yang lebih mudah diakses dan mesra pengguna.

Ingat, kebolehcapaian tidak boleh difikirkan semula. Dengan menggunakan gaya fokus dengan teliti, anda memastikan bahawa semua pengguna, tanpa mengira cara mereka berinteraksi dengan tapak anda, boleh menavigasi dan berinteraksi dengan mudah.

Atas ialah kandungan terperinci Memahami Perbezaan Antara `:focus` dan `:focus-visible` dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!