Elemen Dialog HTML: Meningkatkan Kebolehcapaian dan Kemudahan Penggunaan

Elemen Dialog HTML: Meningkatkan Kebolehcapaian dan Kemudahan Penggunaan

Dialog ialah komponen biasa yang ditambahkan pada aplikasi, sama ada di web atau dalam aplikasi asli. Secara tradisinya, tiada cara standard untuk melaksanakannya di web, menyebabkan banyak pelaksanaan ad-hoc yang tidak bertindak secara konsisten merentas aplikasi web yang berbeza. Selalunya, ciri yang biasa dijangka tiada daripada dialog disebabkan kerumitan melaksanakannya.

Walau bagaimanapun, penyemak imbas web kini menawarkan elemen dialog standard.

Mengapa menggunakan elemen dialog?

Elemen dialog asli memperkemas pelaksanaan dialog, modal dan jenis dialog bukan modal lain. Ia melakukan ini dengan melaksanakan banyak ciri yang diperlukan oleh dialog untuk anda yang telah dimasukkan ke dalam penyemak imbas.

Ini membantu kerana ia mengurangkan beban pembangun apabila membuat aplikasi mereka boleh diakses dengan memastikan jangkaan pengguna mengenai interaksi dipenuhi, dan ia juga berpotensi memudahkan pelaksanaan dialog secara umum.

Penggunaan asas

Menambah dialog menggunakan

tag boleh dicapai dengan hanya beberapa baris kod.

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Kemudian jika anda ingin menutupnya, anda boleh memanggil kaedah .close() pada dialog, atau tekan kekunci escape untuk menutupnya, sama seperti kebanyakan mod lain berfungsi. Juga, perhatikan bagaimana tirai latar muncul yang menggelapkan seluruh halaman dan menghalang anda daripada berinteraksi dengannya. Kemas!

Kebolehcapaian dan pengurusan fokus

Mengendalikan fokus dengan betul adalah penting apabila menjadikan aplikasi web anda boleh diakses oleh semua pengguna. Biasanya anda perlu mengalihkan fokus semasa ke dialog aktif apabila menunjukkannya, tetapi dengan elemen dialog yang dilakukan untuk anda.

Secara lalai, fokus akan ditetapkan pada elemen boleh fokus pertama dalam dialog. Anda boleh menukar elemen mana yang menerima fokus terlebih dahulu dengan menetapkan atribut autofokus pada elemen yang anda mahu fokus mulakan, seperti yang dilihat dalam contoh sebelumnya di mana atribut itu telah ditambahkan pada tutup; elemen.

Menggunakan kaedah .showModal() untuk membuka dialog juga secara tersirat menambahkan peranan ARIA dialog pada elemen dialog. Ini membantu pembaca skrin memahami bahawa mod telah muncul dan skrin supaya boleh bertindak sewajarnya.

Menambah borang pada dialog

Borang juga boleh ditambahkan pada dialog, malah terdapat nilai kaedah khas untuknya. Jika anda menambah elemen dengan kaedah ditetapkan kepada dialog maka borang itu akan mempunyai beberapa gelagat berbeza yang berbeza daripada kaedah dapatkan dan hantar standard.

Pertama sekali, tiada permintaan HTTP luaran akan dibuat dengan kaedah baharu ini. Apa yang akan berlaku sebaliknya ialah apabila borang diserahkan, sifat returnValue pada elemen borang akan ditetapkan kepada nilai butang hantar dalam borang.

Jadi diberikan contoh borang ini:

<dialog>



<p>However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it.<br>
</p>

<pre class="brush:php;toolbar:false">document.getElementById('example-dialog').showModal();

Setelah respons yang anda inginkan kembali daripada pelayan, anda boleh menutupnya secara manual dengan menggunakan kaedah .close() pada dialog.

Mempertingkatkan tirai latar

Latar belakang di belakang dialog ialah latar belakang kelabu yang kebanyakannya lut sinar secara lalai. Walau bagaimanapun, tirai latar itu boleh disesuaikan sepenuhnya menggunakan ::elemen pseudo latar belakang. Dengan itu, anda boleh menetapkan warna latar belakang kepada sebarang nilai yang anda mahu, termasuk kecerunan, imej, dsb.

Anda juga mungkin mahu membuat mengklik tirai latar mengetepikan modal, kerana ini adalah ciri yang biasa dilaksanakan baginya. Secara lalai,

elemen tidak melakukan ini untuk kita. Terdapat beberapa perubahan yang boleh kita lakukan pada dialog untuk memastikan ini berfungsi.

Pertama, pendengar acara diperlukan supaya kita tahu bila pengguna mengklik keluar daripada dialog.

<form>



<p>The form element with the example-form id will have its returnValue set to Submit.</p>

<p>In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted.</p>

<p>You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog.</p>

<p>In this case, you can call event.preventDefault() in the submit event listener like so:<br>
</p>

<pre class="brush:php;toolbar:false">exampleForm.addEventListener('submit', (event) => {
  event.preventDefault();
});

Sendirian pendengar acara ini kelihatan pelik. Nampaknya mengetepikan dialog apabila dialog diklik, bukan tirai latar. Itu bertentangan dengan apa yang kita mahu lakukan. Malangnya, anda tidak boleh mendengar acara klik pada tirai latar kerana ia dianggap sebagai sebahagian daripada dialog itu sendiri. Menambahkan pendengar acara ini dengan sendirinya akan menjadikan klik di mana-mana pada halaman mengetepikan dialog.
Untuk membetulkannya, kita perlu membalut kandungan kandungan dialog dengan elemen lain yang akan menutup dialog dengan berkesan dan sebaliknya menerima klik. Elemen

yang mudah boleh dilakukan!

dialog.addEventListener('click', (event) => {
  if (event.target === dialog) {
    dialog.close();
  }
});

Div pembalut boleh dijadikan elemen blok sebaris untuk mengandungi jidar, dan dengan mengalihkan padding daripada dialog induk ke pembungkus, klik yang dibuat dalam bahagian empuk dialog kini akan berinteraksi dengan elemen pembungkus sebaliknya memastikan ia tidak akan ditolak.

Kesimpulan

Menggunakan elemen dialog menawarkan kelebihan yang ketara untuk mencipta dialog dan modal dengan memudahkan pelaksanaan dengan tingkah laku lalai yang munasabah, meningkatkan kebolehcapaian untuk pengguna yang memerlukan teknologi bantuan seperti pembaca skrin dengan menggunakan tugasan peranan ARIA automatik, sokongan yang disesuaikan untuk elemen borang dan fleksibel pilihan penggayaan.

Atas ialah kandungan terperinci Elemen Dialog HTML: Meningkatkan Kebolehcapaian dan Kemudahan Penggunaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!