Menguruskan Fokus Pengguna dengan: Fokus-Visible

Ini adalah yang kedua dalam siri reka bentuk bentuk yang boleh diakses. Jika anda terlepas ansuran pertama, lihat "Borang yang boleh diakses dengan kelas pseudo." Siaran ini memberi tumpuan kepada kelas pseudo

dan penggunaannya yang berkesan dalam pembangunan web. :focus-visible

Memahami Fokus

Sebelum menyelam ke

, mari kita semak :focus-visible kelas pseudo dalam CSS. :focus secara visual menunjukkan interaksi pengguna (papan kekunci, tetikus, trackpad, atau teknologi bantuan) dengan elemen. Unsur -unsur interaktif secara semulajadi, seperti pautan, butang, dan bidang bentuk, memerlukan petunjuk fokus yang jelas untuk mengekalkan kesedaran pengguna. focus

Elakkan css ini!

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

Mengeluarkan Garis Lalai

Mengeluarkan maklum balas visual yang penting untuk pengguna :focus semua . Sentiasa mengekalkan petunjuk fokus. Jika penyingkiran adalah benar -benar diperlukan, pastikan alternatif yang setara, yang boleh diakses secara visual disediakan. Sekiranya kebimbangan reka bentuk timbul, bekerjasama untuk mencari penyelesaian yang boleh diakses.

memperkenalkan: fokus-kelihatan

Pseudo-Class

menyediakan penunjuk fokus yang serupa dengan :focus-visible, tetapi dengan pengalaman pengguna yang lebih baik. Sintaksinya adalah mudah: :focus

<code>:focus-visible {
  /* ...styles... */
}</code>

untuk unsur -unsur tertentu:

<code>.your-element:focus-visible {
  /* ...styles... */
}</code>

membolehkan penunjuk fokus yang menarik secara visual tanpa kekacauan visual yang tidak perlu pada klik/paip tetikus. Jika tidak dilaksanakan, cincin fokus penyemak imbas lalai (sering dianggap tidak diingini) kekal. focus-visible

Sejarah: fokus-kelihatan

Sebelum

, gaya penyemak imbas lalai yang digunakan :focus-visible secara meluas, sering mengakibatkan "cincin fokus" yang tidak menarik. Ramai pemaju mengeluarkan cincin ini, secara tidak sengaja membuat isu kebolehcapaian untuk pengguna papan kekunci. :focus

Pelayar moden menggunakan heuristik (algoritma untuk mencari pilihan yang baik) untuk menentukan apabila cincin fokus bermanfaat, berdasarkan kaedah input pengguna (papan kekunci, tetikus, dll.). Ini bermakna penyemak imbas secara bijak memohon atau menghilangkan cincin fokus.

Pelaksanaan awal bergantung pada polyfills (seperti yang oleh Alice Boxhall dan Brian Kardell, dan Mozilla

) sebelum spesifikasi rasmi. Pelakon A11Y Rob Dodson menawarkan pandangan lebih lanjut mengenai evolusi ini. :moz-focusring

mengapa fokus perkara

Menyediakan petunjuk fokus yang jelas adalah yang paling penting untuk aksesibiliti. Pengguna, terutamanya mereka yang kurang upaya, perlu memahami lokasi dan interaksi mereka dalam laman web. Laman web kedua -dua Blind Brothers (

https://www.php.cn/link/A21852BF267634B8DB7F0633120E5620 ) berfungsi sebagai contoh yang kuat tentang bagaimana isyarat visual adalah penting untuk navigasi.

Demo dan kod

Kod berikut menunjukkan :focus-visible dalam tindakan. Cincin tumpuan hanya muncul apabila menavigasi dengan papan kekunci, menunjukkan heuristik pintar penyemak imbas.

<code>:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}</code>

sokongan penyemak imbas dan kejatuhan

Sokongan penyemak imbas berbeza -beza. Gunakan @supports (pertanyaan ciri) untuk gaya sandaran dalam pelayar yang tidak disokong:

<code>:focus-visible {
  /* ...styles... */
}</code>

Pertimbangan aksesibiliti tambahan

• Pastikan warna penunjuk fokus memenuhi garis panduan WCAG 2.2 bukan teks (tahap AA).
• Elakkan beban kognitif dengan mengekalkan gaya yang konsisten merentasi elemen interaktif.

Sokongan penyemak imbas (dari caniuse.com): (Jadual akan dicipta semula di sini dengan data Caniuse yang dikemas kini)

Bacaan Lanjut:

• https://www.php.cn/link/fdac69c3eee7bd0427535354eae235a4
• https://www.php.cn/link/54bca824f5fa890e036fb9191bcdc324

Atas ialah kandungan terperinci Menguruskan Fokus Pengguna dengan: Fokus-Visible. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!