Saya tiba-tiba menemukan masalah yang sangat aneh hari ini. Beberapa situs web yang berfokus pada CSS, XHTML, Web 2.0 dan standar Web sedang mendiskusikan cara menghilangkan kotak putus-putus (garis besar) di sekitar hyperlink ketika mouse diklik, seperti garis besar: tidak ada atau garis besar: 0 . Mungkin terkadang tampilan default berupa bingkai titik-titik (outline) akan mempengaruhi tampilannya, namun keberadaannya pasti ada alasannya: yaitu untuk meningkatkan kegunaan website, terutama untuk memberikan kemudahan bagi orang yang menggunakan navigasi keyboard. Saat kami mendiskusikan semantik dan kemudahan penggunaan, kami selalu melakukan hal-hal yang bertentangan dengan hal tersebut. Atur latar belakang tautan menjadi merah saat fokus dipicu, dll. Tentu saja, Anda dapat mendesain gaya yang lebih kompleks sesuai kebutuhan, dan Anda juga dapat mengatur fokus dan mengarahkan kursor ke gaya yang sama. Namun ada satu hal, Anda tidak dapat memblokir mekanisme pemicu fokus.
1. Kotak putus-putus (garis besar) menghadirkan kemudahan navigasi keyboard
Saya mempunyai kebiasaan ketika membaca artikel: Saya jarang menggunakan mouse dan kebanyakan mengandalkan keyboard. Yang paling banyak digunakan adalah tombol Tab, PageUp, PageDown, Enter dan tombol empat arah. Tombol Tab digunakan untuk menavigasi hyperlink. Anda dapat beralih di antara hyperlink yang berbeda. Setelah memilih link, tekan Enter secara langsung untuk masuk (kini Anda dapat menggunakan tombol Tab untuk melihat efeknya di halaman ini). Ketika tombol Tab berfokus pada tautan, bingkai titik-titik (garis besar) akan muncul di sekitar tautan, yang menunjukkan bahwa tautan tersebut dalam fokus dan dapat diakses setelah konfirmasi. Tentu banyak orang mungkin berkata, nyaman sekali menggunakan mouse, mengapa harus menggunakan keyboard? Di sini saya ingin memberikan beberapa alasan.
Dikatakan bahwa salah satu kriteria untuk menjadi ahli komputer sejati adalah apakah Anda dapat menyelesaikan semua operasi tanpa menggunakan mouse. Kadang-kadang ketika saya membaca sebuah artikel, memegang kopi di tangan kanan saya dan mengetik keyboard dengan tangan kiri tidak mempengaruhi pembacaan saya.
Kebutuhan khusus kelompok orang tertentu. Situs web Anda bukan hanya untuk Anda. Anda tidak dapat memengaruhi cara orang lain menggunakan situs web Anda.
Gaya baru saat menggunakan tombol Tab untuk fokus pada tautan (mungkin berbeda di berbagai browser, namun setiap browser memiliki fungsi ini, yang menunjukkan kebutuhannya)
2. Pengalaman pengguna yang lebih buruk
Gunakan outline:none atau outline:0 untuk menghapus bingkai titik-titik luar. Meskipun tidak ada perubahan yang terlihat dari tautan, setidaknya informasi tautan dapat dilihat dari bilah status. Namun pengalaman pengguna yang lebih buruk lagi adalah menggunakan acara onfocus JavsScript. Saat pengguna berfokus pada suatu tautan, fokus akan langsung dibatalkan, yang berarti Anda tidak akan pernah bisa fokus pada hyperlink ini, jadi jika Anda tidak menggunakan mouse, Anda pasti bisa. 't. Kunjungi tautan apa pun di halaman ini. Beberapa ahli telah mengembangkan metode menggunakan JQuery untuk menghapus garis besar. Jika Anda Google "menghapus garis putus-putus dari tautan", Anda akan mendapatkan puluhan ribu hasil. Tampaknya banyak orang membutuhkannya dan sedang menelitinya. Namun dia memang melanggar prinsip kemudahan penggunaan Web dan tidak mempertimbangkan pengalaman pengguna sama sekali.
3. Pilihan alternatif
Jika Anda benar-benar berpikir tampilan bingkai titik-titik akan memengaruhi tampilan, Anda pasti punya pilihan yang lebih baik. Yaitu dengan menggunakan :focus pseudo-class di CSS. Misalnya menggunakan
a:fokus { warna latar:#f00 }
/*atau*/
a:hover, a:fokus {dekorasi teks:garis bawah;}
Jadi jangan pernah menghilangkan kotak putus-putus di sekitar hyperlink, setidaknya untuk tidak menghalangi pemicuan fokus.