Bagaimanakah Saya Boleh Lumpuhkan Gaya Fokus Semasa Mengekalkan Kebolehcapaian Papan Kekunci?

Barbara Streisand
Lepaskan: 2024-10-31 02:41:31
asal
991 orang telah melayarinya

How Can I Disable Focus Styles While Retaining Keyboard Accessibility?

Bolehkah saya Lumpuhkan Fokus Apabila Ia Tidak Diperlukan?

Anda mahu melumpuhkan fokus apabila ia tidak diperlukan kerana anda tidak menyukai penampilan navigasi anda apabila fokus adalah di atasnya. Ia menggunakan gaya yang sama seperti .aktif dan ia mengelirukan. Walau bagaimanapun, anda tidak mahu menyingkirkannya untuk orang yang menggunakan papan kekunci.

Isu Mungkin Selesai

Sesetengah poster telah menyebut kelas pseudo :focus-visible, yang kini mempunyai sokongan pelayar yang baik. Mengikut spesifikasi, penyemak imbas kini seharusnya hanya menunjukkan fokus apabila ia membantu pengguna, seperti apabila pengguna berinteraksi dengan halaman melalui papan kekunci atau beberapa peranti bukan penunjuk lain.

Ini bermakna dalam kebanyakan penyemak imbas, apabila pengguna mengklik/mengetik butang (atau elemen lain yang boleh difokuskan), Ejen Pengguna tidak akan menunjukkan cincin fokus walaupun butang difokuskan, kerana dalam kes ini cincin fokus tidak membantu pengguna.

Keserasian Ke Belakang

Masalah yang mungkin berlaku dengan menggunakan :focus-visible seperti ini ialah penyemak imbas yang tidak menyokongnya akan menunjukkan cincin fokus lalai, yang mungkin tidak jelas atau kelihatan bergantung pada reka bentuk.

Jawapan Asal

Jika penyelesaian :fokus-boleh dilihat tidak mencukupi untuk keserasian ke belakang, anda boleh mencapai gaya fokus papan kekunci sahaja untuk butang, pautan dan elemen bekas lain dengan penyelesaian berikut:

button {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  outline: none;
  font-size: inherit;
}

.btn {
  all: initial;
  margin: 1em;
  display: inline-block; 
}

.btn__content {
  background: orange;
  padding: 1em;
  cursor: pointer;
  display: inline-block;
}


/* Fixing the Safari bug for `<button>`s overflow */
.btn__content {
    position: relative;
}

/* All the states on the inner element */
.btn:hover > .btn__content  {
    background: salmon;
}

.btn:active > .btn__content  {
    background: darkorange;
}

.btn:focus > .btn__content  {
    box-shadow: 0 0 2px 2px #51a7e8;
    color: lime;
}

/* Removing default outline only after we've added our custom one */
.btn:focus,
.btn__content:focus {
    outline: none;
}
Salin selepas log masuk

Teknik ini meletakkan semua gaya pada elemen dalam bekas, menghalang gaya fokus daripada muncul apabila tetikus digunakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Gaya Fokus Semasa Mengekalkan Kebolehcapaian Papan Kekunci?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!