Bagaimana untuk Mendayakan :fokus Hanya pada Penggunaan Papan Kekunci (atau Tekan Tab)?

Dayakan :fokus Hanya pada Penggunaan Papan Kekunci (atau Tekan Tab)

Ikhtisar

Melumpuhkan :fokus apabila tidak diperlukan boleh meningkatkan pengalaman pengguna dengan menghapuskan isyarat visual yang mengelirukan. Walau bagaimanapun, adalah penting untuk mengekalkan fungsi fokus untuk pengguna papan kekunci.

Penyelesaian Asal: Gaya Fokus Papan Kekunci Sahaja

Penyelesaian Roman Komarov menggunakan CSS dan HTML untuk mencapai gaya fokus papan kekunci sahaja. Ia merangkum elemen boleh fokus dalam elemen bekas dan hanya menggayakan elemen dalam, menjadikan keadaan fokus boleh diakses secara visual oleh pengguna papan kekunci.

Penyelesaian Yang Dipertingkat: :Kelas Pseudo yang boleh dilihat fokus

Kemas kini : Kelas pseudo yang boleh dilihat fokus menyediakan cara yang lebih elegan dan berkesan untuk mencapai gaya fokus papan kekunci sahaja. Pelayar kini menunjukkan fokus hanya apabila ia meningkatkan pengalaman pengguna, seperti semasa interaksi papan kekunci.

Untuk menggunakan :focus-visible, gantikan :focus dengan :focus-visible dalam peraturan CSS anda. Ini memastikan gaya fokus boleh dilihat hanya apabila diaktifkan oleh papan kekunci atau peranti bukan menuding.

Keserasian Ke Belakang

Penyemak imbas yang tidak menyokong :focus-visible akan menunjukkan gelang fokus lalai. Untuk memberikan pengalaman pengguna yang konsisten, Šime Vidas mencadangkan untuk mentakrifkan gaya fokus dalam :focus dan membalikkannya dalam :focus:not(:focus-visible).

Contoh CSS:

<code class="css">button:focus {
  outline: none;
  background: #ffdd00;
}

button:focus:not(:focus-visible) {
  background: white;
}</code>

Contoh HTML :

<code class="html"><button class="btn">
  <span class="btn__content" tabindex="-1">...</span>
</button></code>

Nota:

• Gunakan atribut tabindex untuk menjadikan elemen tidak boleh fokus boleh difokuskan.
• Pastikan CSS anda cukup khusus untuk mengatasi gaya fokus lalai .
• Pertimbangkan untuk menggunakan :focus-within untuk menggayakan elemen induk apabila anaknya fokus.

Kesimpulan

Dengan memanfaatkan kelas pseudo :focus-visible atau melaksanakan penyelesaian asal, pembangun boleh menyediakan gaya fokus papan kekunci sahaja tanpa menjejaskan pengalaman pengguna untuk pengguna papan kekunci dan tetikus.

Atas ialah kandungan terperinci Bagaimana untuk Mendayakan :fokus Hanya pada Penggunaan Papan Kekunci (atau Tekan Tab)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!