Menjelaskan hubungan antara popovers dan dialog

Perbezaan antara

Popovers (menggunakan atribut ) dan popover dialog (elemen dan peranan yang boleh diakses) sering menyebabkan kekeliruan. Banyak artikel cuba menjelaskan perkara ini, namun isu itu berterusan. Penjelasan ini bertujuan untuk memberikan pemahaman yang pasti. <dialog></dialog> dialog Memahami Hubungan: Popovers dan Dialog

mari kita bergerak melampaui pelaksanaan teknikal dan memberi tumpuan kepada perspektif yang lebih luas. Popover adalah kandungan yang muncul apabila pengguna berinteraksi (klik, melayang, atau memberi tumpuan) pada elemen. Atribut ARIA

mengkategorikan popup ini menjadi peranan, termasuk

, aria-haspopup, menu, listbox, dan tree. Secara kritis, grid dialog adalah dialog taip Popover . Jenis dialog

memperluaskan peranan

, kami mempunyai tiga jenis utama:

dialog

modal:
• termasuk overlay dan fokus perangkap.
non-modal:
• tidak mempunyai overlay dan fokus perangkap.
Dialog Alert:
• Pembaca Skrin Alert Atas Penampilan; boleh menjadi modal atau bukan modal.
Ini seterusnya menyokong hubungan popover/dialog. Walaupun sesetengah orang percaya popovers adalah ketat bukan modal, ini tidak tepat. Pseudo-elemen

, sering hadir dalam popovers, mencadangkan

popovers boleh menjadi modal ::backdrop. Walau bagaimanapun, API tidak mempunyai kaedah (hadir dalam popover), menjadikannya kurang sesuai untuk mewujudkan dialog modal yang berfungsi sepenuhnya. Bangunan modaliti memerlukan ciri tambahan jika hanya menggunakan API showModal(). <dialog></dialog> Oleh itu, keupayaan popovers menjadi modal memperkuat idea bahawa popover dialog adalah jenis popover tertentu

.

Peranan yang boleh diakses untuk Popovers

Kebolehcapaian memerlukan popovers mempunyai peranan. Peranan yang sesuai termasuk yang disenaraikan dengan

:

,

, aria-haspopup, menu, dan listbox. Peranan yang lebih kompleks seperti tree dan grid juga pilihan. dialog dan treegrid kurang biasa tetapi berpotensi sah. alertdialog tooltip ToolTips: Visual vs. Accessibility status

secara visual, tooltip menyerupai popover -tetingkap kecil yang muncul pada hover. Melaksanakan petua dengan API

boleh dilaksanakan.

<div popover="" role="tooltip">...</div>

Walau bagaimanapun, garis panduan kebolehcapaian menentukan bahawa petua tidak boleh mengandungi kandungan interaktif. Petua alat interaktif sebenarnya adalah dialog, bukan petua. Seperti yang dinyatakan oleh Heydon Pickering, "Anda memikirkan dialog. Gunakan dialog." Inilah sebabnya

tidak termasuk aria-haspopup. tooltip

Peranan

status

ToolTips mempersembahkan cabaran aksesibiliti kerana sifat hover mereka sahaja. "Toggletips" Steve Faulkner dan cadangan Heydon Pickering untuk menggunakan alternatif tawaran

, menggunakan kawasan hidup untuk mengumumkan kandungan alat untuk menyaring pembaca. Walaupun status boleh digunakan untuk popover, sifat rantau hidupnya membezakannya dari peranan lain. Oleh itu, ia ditinggalkan dari model mental Popover teras. status

Ringkasan

• popover: istilah umum untuk mana-mana pop timbul permintaan. Dialog
• : Jenis popover tertentu membuat tetingkap atau kad baru.

ini menjelaskan keserasian API

dengan elemen popover: <dialog></dialog>

<div popover="">...</div>
<dialog popover="">...</dialog>

Peranan yang disyorkan untuk popovers termasuk:

, menu, listbox, tree, grid, treegrid, dan dialog. alertdialog dan status kurang konvensional tetapi mungkin, walaupun tidak serasi dengan tooltip. aria-haspopup

bacaan selanjutnya

• Aria-Haspopup Property (spesifikasi Wai-Aria, versi 1.2)
• Semantik dan atribut Popover: Peranan yang hendak digunakan ketika? (Hidde de Vries)
• tooltips & toggletips (komponen inklusif)
• Apakah perbezaan antara elemen dialog HTML dan popovers? (Chris Coyier)
(Nota: Sila ganti pautan yang ditandatangani dengan pautan sebenar ke artikel dan spesifikasi yang dirujuk.)

Atas ialah kandungan terperinci Menjelaskan hubungan antara popovers dan dialog. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!