Cara menggunakan API Popover untuk UI yang boleh diakses

API Popover menyelesaikan kerumitan mewujudkan unsur-unsur seperti modal yang boleh diakses dengan secara automatik mengendalikan fokus perangkap, latar belakang lengai, pelepasan utama, dan peranan ARIA tanpa JavaScript atau ARIA markup tambahan. 2. Ia menggunakan atribut Popover dan popovertoggletarget untuk mengawal penglihatan, dengan tiga jenis: auto, modal, dan petunjuk, di mana modal sesuai untuk dialog dan petunjuk untuk tips yang tidak menyekat. 3. Kaedah JavaScript seperti ShowPopover (), HidepOpover (), dan TogglePopover () membolehkan kawalan programatik untuk interaksi lanjutan. 4. Faedah kebolehcapaian termasuk pengurusan fokus automatik, sokongan papan kekunci, dan pengurangan aria pergantungan, menjadikan tafsiran pembaca skrin lebih dipercayai. 5. Amalan terbaik termasuk menyediakan butang dekat yang kelihatan, menggunakan HTML semantik di dalam popovers, mengelakkan bersarang, dan menguji dengan pembaca papan kekunci dan skrin. 6. Sokongan penyemak imbas boleh didapati di Chrome dan Edge 114, dengan Firefox dan Safari dalam pembangunan, yang memerlukan penolakan atau polyfills untuk pelayar yang lebih tua menggunakan pengesanan ciri. 7. API adalah langkah ke arah lapisan yang boleh diakses, disyorkan untuk modal atau petunjuk mudah, dengan kejatuhan yang anggun dan ujian pengguna sebenar untuk memastikan keterangkuman.

API Popover adalah ciri platform web baru yang menjadikannya lebih mudah untuk mewujudkan dialog, dialog, alat, atau panel sampingan yang boleh diakses, seperti gusti dengan Aria dan JavaScript yang kompleks. Ia direka untuk mengurangkan boilerplate dan meningkatkan kebolehcapaian secara lalai. Jika anda membina UI yang moden, boleh diakses, API Popover bernilai memahami dan menggunakannya.

Berikut adalah cara menggunakannya dengan berkesan untuk mewujudkan antara muka yang boleh diakses.

Apa yang diselesaikan oleh API Popover

Sebelum API ini, pemaju terpaksa mengurus secara manual:

• Fokus memerangkap
• Latar belakang modal (latar belakang "inert")
• Melarikan diri pengendalian kunci
• Peranan dan Atribut Aria (seperti aria-modal , role="dialog" )
• Pemecatan Klik-Outside

Semua ini penting untuk akses tetapi mudah untuk mendapatkan salah. API Popover mengendalikan sebahagian besarnya secara automatik.

Sintaks asas dan tingkah laku

API memperkenalkan atribut popover baru dan satu set kaedah JavaScript untuk mengawal penglihatan.

 <div id = "my-popover" popover>
  <p> Ini adalah popover! </P>
  <sotret> Tutup </butang>
</div>

<butang popovertoggleTarget = "my-popover"> togol popover </butang>

Dengan hanya dua baris ini:

• Popover menunjukkan/menyembunyikan apabila butang diklik.
• Kandungan latar belakang menjadi lengai (tidak fokus).
• Menekan melarikan diri menutup popover.
• Fokus secara automatik terperangkap di dalam popover.

Tiada JavaScript atau Aria diperlukan.

Jenis popovers

Gunakan atribut popover dengan nilai untuk menentukan tingkah laku:

 <!-menyembunyikan ketika mengklik di luar atau menekan melarikan diri->
<div popover = "auto"> Auto Popover </div>

<!-modal: blok latar belakang, memerlukan penutupan yang jelas->
<div popover = "modal"> modal popover </div>

<!-bukan modal: latar belakang tetap interaktif->
<div popover = "petunjuk"> Petunjuk popover </div>

Untuk UI yang boleh diakses, modal adalah yang paling biasa (misalnya, dialog), sementara hint berfungsi untuk petua alat atau tips yang tidak menyekat.

Mengawal popovers dengan javascript

Anda juga boleh menggunakan kaedah untuk kawalan lebih lanjut:

 const popover = document.getElementById ('My-Popover');

// menunjukkan
popover.showpopover ();

// sembunyikan
popover.HidepOpover ();

// togol
popover.togglePopover ();

Ini berguna apabila anda memerlukan logik di luar toggling mudah (contohnya, menunjukkan pada hover, atau selepas pengesahan bentuk).

Faedah akses keluar dari kotak

API Popover meningkatkan kebolehcapaian dengan:

• ✅ Menguruskan fokus secara automatik
• ✅ Membuat kandungan tidak aktif Inert (seperti atribut inert )
• ✅ Menyokong navigasi dan pemecatan papan kekunci
• ✅ Mengurangkan pergantungan pada aria (kurang ruang untuk kesilapan)

Sebagai contoh, pembaca skrin akan merawat popover="modal" sebagai dialog modal yang benar-tanpa memerlukan role="dialog" atau aria-modal="true" .

Amalan terbaik untuk UIS yang boleh diakses

Untuk memanfaatkan API Popover:

• Sentiasa memberikan kawalan dekat yang kelihatan
  Walaupun melarikan diri kerja, sesetengah pengguna (terutamanya pengguna sentuhan atau pembaca skrin) memerlukan butang "tutup" yang jelas.

• Gunakan HTML semantik di dalam popovers
  Balut kandungan dialog dalam <section> atau gunakan tajuk yang sesuai. Contohnya:

   <div popover = "modal">
    <h2> Sahkan padam </h2>
    <p> Adakah anda pasti mahu memadam item ini? </P>
    <utton> padam </butang>
    <Button PopovertogGleTarget = "My-Popover"> Batal </butang>
  </div>

• Elakkan popovers bersarang
  Spesifikasi itu tidak melarangnya, tetapi ia boleh mengelirukan fokus dan jangkaan pengguna.

• Uji dengan papan kekunci dan pembaca skrin
  Walaupun dengan API, menguji aliran pengguna sebenar. Pastikan fokus memasuki popover dan kembali dengan betul selepas ditutup.

Sokongan dan sandaran penyemak imbas

Sehingga 2024, API Popover disokong dalam Chrome dan Edge (versi 114), dengan Firefox dan Safari bekerja di atasnya.

Untuk penyemak imbas yang tidak disokong, anda memerlukan sandaran. Pertimbangkan peningkatan progresif:

 jika (! ('showpopover' dalam htmlelement.prototype)) {
  // Melaksanakan sandaran dengan aria dan pengurusan fokus manual
  setupfallbackDialog ();
}

Atau gunakan polyfill ringan seperti Polyfill Popover UI Terbuka .

API Popover memudahkan mewujudkan lapisan yang boleh diakses tanpa mengorbankan kawalan. Ia bukan pengganti lengkap untuk semua dialog tersuai, tetapi untuk banyak kes penggunaan-terutamanya modal atau petunjuk mudah-ia adalah penyelesaian yang kukuh dan aksesibiliti.

Pada asasnya: Gunakan popover apabila anda boleh, uji dengan pengguna sebenar, dan jatuh kembali dengan anggun. Ini adalah langkah ke arah UI web yang lebih mudah diakses secara lalai.

Atas ialah kandungan terperinci Cara menggunakan API Popover untuk UI yang boleh diakses. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!