Bagaimana untuk Melaksanakan Gaya Fokus Papan Kekunci Sahaja dan Mengekalkan Kebolehcapaian?

Laksanakan Gaya Fokus Papan Kekunci Sahaja

Latar Belakang:
Anda mungkin tidak memilih gaya fokus lalai pada elemen. Walau bagaimanapun, anda masih mahu pengguna yang mempunyai kebolehaksesan papan kekunci melihat cincin fokus. Mengekalkan kebolehaksesan sambil menyesuaikan gaya fokus boleh menjadi mencabar. Artikel ini meneroka penyelesaian untuk mendayakan gaya fokus hanya apabila menggunakan papan kekunci.

Penyelesaian:

1. Alih Keluar Gaya Fokus Lalai:

Gunakan CSS untuk mengalih keluar gaya fokus lalai daripada semua elemen boleh fokus. Ini menghalang penggayaan yang mengelirukan apabila fokus tidak diingini.

2. Buat Elemen Boleh Fokus Tersuai:

Untuk elemen bekas seperti span atau div, gunakan atribut tabindex untuk menjadikannya boleh difokuskan.

3. Gunakan Gaya Fokus Tersuai:

a. Fokus Elemen Dalaman:

• Tambahkan gaya fokus pada elemen dalam dalam elemen bekas.
• Ini memastikan gaya fokus boleh dilihat dalam elemen dengan berbilang lapisan.

b. Fokus Elemen Luar:

• Tambahkan pendengar acara pada elemen luar untuk mengalih keluar gelang fokus pada klik atau sentuh tetikus.
• Ini mengekalkan kebolehaksesan sambil menghalang gaya fokus yang tidak perlu semasa tetikus interaksi.

Kod Contoh:

<code class="css">button, a, span {
  -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;
}

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

.btn:focus,
.btn__content:focus {
    outline: none;
}</code>

<code class="html"><button id="btn" class="btn" type="button">
    <span class="btn__content" tabindex="-1">
        I'm a button!
    </span>
</button></code>

Kesimpulan:
Dengan melaksanakan gaya fokus tersuai pada elemen dalam bersarang dan mengalih keluar gaya fokus lalai daripada elemen luar, anda boleh mendayakan gaya fokus papan kekunci sahaja. Ini membolehkan anda mengekalkan kebolehaksesan sambil menyesuaikan penampilan fokus.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Gaya Fokus Papan Kekunci Sahaja dan Mengekalkan Kebolehcapaian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!