Saya memiliki persyaratan, untuk menampilkan dialog, yang mengintegrasikan beberapa input dari latar belakang (tidak semua), karena ini meningkatkan fungsionalitasnya. Jadi saya ingin mereka menyatu dengan dialog dan dapat diedit dari sana. Ini tidak terlalu sulit dilakukan dengan z-index, tetapi inputnya harus berada di luar markup dialog. Saya ingin tahu apakah ini berfungsi untuk pembaca layar (tebakan saya tidak) dan jika tidak: Apakah Anda punya saran bagaimana saya bisa membuat ini berfungsi, tanpa menyesuaikan setiap input dari seluruh formulir?

Berikut adalah contoh dari apa yang ingin saya capai dengan cara yang dapat diakses:

  function showDialog()
  {
    document.getElementById("dialog").style.display = 'table';
  }

  function hideDialog()
  {
    document.getElementById("dialog").style.display = 'none';
  }
  form > div
  {
    margin: 10px;
  }

  .layer
  {
    margin: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }

  .showThrough
  {
    position: relative;
    z-index: 1100;
  }
<form>
  <div class="showThrough">
    <label>Input 1:</label><input/>
  </div>
  <div>
    <label>Input 2:</label><input/>
  </div>
  <div class="showThrough">
    <label>Input 3:</label><input class="showThrough"/>
  </div>
  <input type="button" onclick="showDialog()" value="Show dialog"/>
  <input type="button" value="Submit"/>
  <div id="dialog" role="dialog" class="layer" style="display: none;">
    <input type="button" value="Close" onclick="hideDialog()"
      style="position: absolute; bottom: 15px; right: 15px;"/>
  </div>
</form>
1
Nils-o-mat 9 Maret 2020, 11:40

1 menjawab

Jawaban Terbaik

Masalah yang perlu Anda pikirkan

Masalah terbesar yang saya lihat di sebagian besar modal adalah mereka mengizinkan fokus di luarnya.

Anda tidak bisa hanya menghentikan pengguna menggunakan tombol tab karena itu bukan cara sebagian besar pengguna pembaca layar menavigasi halaman (mereka menggunakan pintasan untuk judul (h1-h6), hyperlink, input formulir, dll.).

Untuk alasan ini, Anda kemudian harus menambahkan aria-hidden="true" dan tabindex="-1" ke setiap elemen pada halaman yang bukan bagian dari modal dan kemudian menghapusnya lagi ketika modal ditutup (ini dapat diterapkan ke wadah karena semua anak mereka kemudian tidak akan dapat menerima fokus sehingga tidak seseram kedengarannya).

Anda juga perlu menggunakan metode ini pada semua bidang 'dinonaktifkan' Anda yang bukan bagian dari 'modal' (saya menempatkan ini dalam tanda kutip karena tidak dinonaktifkan dan ini sebenarnya bukan modal!).

Anda juga perlu memastikan bahwa modal dapat ditutup dengan kunci Esc sebagai perilaku yang diharapkan.

Anda juga perlu memastikan bahwa <input> pertama difokuskan secara terprogram ketika Anda meluncurkan modal Anda, sebaliknya ketika Anda menonaktifkan tombol 'kirim', fokusnya mungkin tidak mengarah ke tempat yang Anda inginkan.

Mengapa Anda melakukan ini, apakah ada cara yang lebih baik?

Anda belum menyatakan mengapa persyaratan ini ada, tetapi jika hanya untuk menyorot bidang penting, Anda mungkin lebih baik menggunakan garis besar tebal pada bidang tersebut yang diaktifkan dengan tombol Anda dan tidak mengganggu aliran dokumen.

Terkadang persyaratan tampak seperti ide yang bagus tetapi dalam contoh yang Anda tunjukkan (saya tahu itu dilucuti) saya merasa menjengkelkan karena tombol 'tutup' keluar dari dokumen dan menambahkan langkah ekstra karena harus menutup dialog ketika saya selesai (haruskah Anda tidak mengizinkan pengiriman dari dalam dialog?).

Jika ini adalah fitur yang diperlukan dan Anda tidak dapat meyakinkan kekuatan bahwa itu bukan ide yang baik (saya tahu seperti apa rasanya!), Anda mungkin lebih baik membuat modal yang sebenarnya dan kemudian mengisi bidang di utama formulir dengan JavaScript pada penutupan modal / pembaruan input karena ini akan mengurangi jumlah hal yang perlu Anda nonaktifkan pada halaman.

Yaitu Anda hanya mengkloning bidang yang diperlukan ke dalam modal Anda dan kemudian menggunakan tabindex="-1" dan aria-hidden="true" pada <header> dan <main> di seluruh dokumen untuk mengelola fokus.

Ini membuat halaman jauh lebih mudah dipelihara di masa mendatang karena Anda tidak perlu memperbarui skrip setiap kali Anda menambahkan bagian ke halaman.

Jika formulir Anda dinamis (bidang berubah) maka Anda bisa menggunakan JavaScript untuk membuat formulir di dalam modal (yaitu mengulang melalui bidang formulir, menemukan item 'showThrough' dan mengkloningnya ke dalam modal.) atau melakukannya di belakang akhir.

2
Community 20 Juni 2020, 09:12