Enter The Dragon (Drop): Penataan Ulang Daftar yang Dapat Diakses

Selama bertahun-tahun menjadi pengembang web dengan fokus pada aksesibilitas, saya sebagian besar berurusan dengan komponen UI standar yang diadopsi secara luas, didukung dengan baik oleh teknologi bantu (AT). Untuk jenis widget ini, ada praktik penulisan ARIA yang ringkas serta alat hebat seperti axe-core yang dapat digunakan untuk menguji komponen web untuk masalah aksesibilitas. Membuat widget yang kurang umum, terutama yang tidak memiliki konvensi yang diadopsi secara luas untuk interaksi pengguna bisa sangat rumit.

Salah satu tantangan terberat yang pernah saya temui adalah daftar drag-and-drop yang dapat disusun ulang. Meskipun daftar yang dapat disusun ulang adalah widget yang agak umum digunakan dengan konvensi intuitif untuk pengguna mouse, tidak jelas bagaimana pengguna teknologi bantu khusus keyboard dapat melakukan tugas sederhana ini. Karena tidak adanya atribut ARIA yang didukung, Dragon Drop menggunakan wilayah langsung untuk menyampaikan informasi yang diperlukan bagi semua pengguna untuk menyusun ulang daftar.

Wilayah Hidup

Wilayah langsung adalah elemen HTML yang dilengkapi dengan atribut ARIA yang dapat digunakan untuk memberi tahu pembaca layar tentang perubahan konten. Mereka memungkinkan kami untuk memberikan pengumuman pembaca layar yang sepenuhnya disesuaikan tanpa harus memindahkan fokus! Wilayah langsung sangat bagus untuk pembaruan waktu nyata di bagian halaman yang jauh, pembaruan status, dan informasi sensitif waktu.

Mereka biasanya digunakan dalam log obrolan, indikator kemajuan, pembaruan skor olahraga, dan peringatan cuaca tetapi harus digunakan dengan hemat karena dapat dengan mudah membuat pengalaman yang terlalu bertele-tele bagi pengguna pembaca layar. Jika Anda baru mengenal wilayah langsung atau hanya ingin menjelajahi apa yang dapat mereka lakukan, lihat taman bermain wilayah langsung saya, yang memungkinkan Anda mengonfigurasi wilayah langsung kustom Anda sendiri.

Jika Anda ingin menggunakan wilayah langsung di aplikasi Anda, lihat modul Wilayah Langsung di npm.

 <div aria-live="assertive" role="log" aria-relevant="additions" aria-atomic="true"></div>

Mengapa Menggunakan Wilayah Langsung?

Di dunia yang ideal, saya hanya bisa mengandalkan atribut ARIA drag-and-drop aria-grabbed dan aria-dropeffect . Namun, pada kenyataannya, dukungan untuk atribut ini jarang terjadi, dan jika didukung, pengalaman tersebut membingungkan dan berlawanan dengan intuisi bagi pengguna pembaca layar. Selain itu, kedua atribut ini tidak digunakan lagi sejak ARIA 1.1, yang berarti kami tidak akan melihat dukungan untuk atribut ini berkembang di masa mendatang.

Percakapan W3C tentang penghentian ini dapat ditemukan di sini. Karena masalah ini, saya memutuskan untuk tidak menggunakan aria-grabbed dan aria-dropeffect di Dragon Drop. Memvariasikan dukungan untuk atribut ARIA dalam beragam teknologi bantu/pasangan browser cukup lazim di dunia aksesibilitas. Untungnya, atribut live region seperti role , aria-live , aria-relevant , dan aria-atomic cukup banyak didukung oleh pembaca layar seperti JAWS, NVDA, dan VoiceOver.

Aksesibilitas yang Dioptimalkan

Dragon Drop adalah modul penyusunan ulang daftar yang sangat dapat dikonfigurasi yang berfungsi untuk pengguna mouse, keyboard, dan teknologi bantu. Beberapa tahun yang lalu, ketika saya memutuskan untuk menulisnya, daftar pengurutan ulang yang mudah diakses telah muncul beberapa kali pada proyek yang sedang saya kerjakan tetapi saya belum melihat solusi yang berhasil. Dari lusinan plugin pengurutan ulang daftar drag-and-drop yang saya temukan, kebanyakan dari mereka tidak dirancang dengan mempertimbangkan aksesibilitas dan, akibatnya, sangat tidak dapat diakses.

Dragon Drop telah diuji dengan VoiceOver, JAWS, dan NVDA dan memungkinkan pengguna AT untuk berhasil menyusun ulang daftar.

Saya mulai menjawab semua pertanyaan yang mungkin dimiliki pengguna mana pun saat menemukan daftar yang dapat disusun ulang. Pertanyaan-pertanyaan ini telah dijawab untuk pengguna mouse yang dapat melihat melalui konvensi umum, tetapi bagaimana dengan pengguna lainnya?

Bagaimana Saya Bisa Mengambil Barang?

Dengan memberikan kontrol yang menyampaikan status item yang diambil, bersama dengan beberapa teks bantuan tingkat atas, kita dapat menjawab pertanyaan ini. Misalnya, kontrol dengan teks yang dapat diakses (dikumpulkan oleh AT meskipun nama, peran, dan nilainya) “Reorder Item 1, toggle button” memberi tahu pengguna bahwa itu adalah tombol yang ketika diaktifkan, akan mengambil item dan memulai pemesanan ulang.

Dragon drop menggunakan atribut aria-pressed untuk memberi tahu pengguna AT kapan item sedang "diseret" dan kapan tidak. Itu dapat dikonfigurasi untuk memungkinkan seluruh item dapat diseret, atau hanya "pegangan seret" anak, yang dalam kedua kasus tersebut keberadaan role="button" dan tabindex="0" dipastikan.

Saat item tarik diaktifkan, aria-pressed="true" diterapkan ke elemen dan pengumuman yang dapat dikonfigurasi, seperti "Item 1 diambil" dibacakan ke pembaca layar melalui wilayah langsung.

Bagaimana Saya Bisa Memindahkan Item?

Memanfaatkan aria-describedby untuk mengaitkan kontrol dengan teks bantuan yang berguna seperti "Aktifkan tombol atur ulang dan gunakan tombol panah untuk menyusun ulang daftar atau gunakan mouse Anda untuk menyeret/mengurutkan ulang." memberitahu pengguna bagaimana melakukan pemesanan ulang yang sebenarnya. Ini memungkinkan pengguna pembaca layar mengetahui bahwa saat item ditekan, tombol panah atas dan bawah akan memindahkan item ke atas dan ke bawah daftar masing-masing.

Bagaimana Saya Bisa Menjatuhkan Barang?

Karena atribut aria-pressed digunakan, pengguna dapat dengan mudah mengetahui cara menjatuhkan item. Dalam beberapa cara, bentuk atau bentuk, semua pembaca layar yang paling banyak digunakan menyampaikan keadaan tombol sakelar yang ditekan. Atribut aria-pressed diatur ke "false" saat item dijatuhkan dan pengumuman yang disesuaikan seperti "Item 1 drop" dibacakan ke pembaca layar.

Bagaimana Saya Tahu Ketika Daftar Telah Diurutkan Ulang?

Setiap kali tombol panah atas dan bawah digunakan untuk mengubah urutan daftar, kita perlu memastikan bahwa semua pengguna diberitahu tentang perubahan ini. Untuk pengguna yang tidak dapat melihat, kita harus sekali lagi mengandalkan wilayah langsung. Pengumuman yang dapat dikonfigurasi seperti "Daftar telah disusun ulang, Item 1 sekarang berada di urutan ke-4 dalam daftar." , dibacakan untuk menyampaikan status terbaru dari daftar yang disusun ulang. Ini penting karena pengguna yang dapat melihat memiliki umpan balik visual langsung dari urutan yang diubah dan bahwa informasi yang sama perlu disampaikan kepada pengguna AT.

Bagaimana Saya Membatalkan Pemesanan Ulang?

Karena kita tidak dapat mengandalkan konvensi yang diadopsi secara luas untuk interaksi seperti itu, kita cukup menyertakan petunjuk seperti "Press escape to cancel the reordering" dalam teks bantuan. Selain itu, kami menggunakan wilayah langsung untuk menyediakan pembacaan khusus yang memberi tahu pengguna tentang pembatalan tersebut.

Interaksi Keyboard

Melihat Naga Beraksi

Periksa demo Dragon Drop di mana Anda mengalami beberapa konfigurasi yang berbeda.

Menjatuhkan Naga Jatuhkan Ke Aplikasi Anda

Dragon Drop mengubah daftar biasa Anda menjadi daftar drag-and-drop yang dapat diatur ulang yang dapat diakses sepenuhnya:

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <script> const dragon = document.getElementById('dragon'); // Enter the dragon new DragonDrop(dragon); </script>

Instalasi

Dragon Drop adalah proyek open source (Lisensi MIT) dan dapat diinstal melalui npm:

 $ npm install drag-on-drop

Ini dapat digunakan dengan modul seperti browserify atau webpack:

 // if you're not down with ES6, you can require('drag-on-drop') import DragonDrop from 'drag-on-drop';

Dragon Drop juga dapat dengan mudah dijatuhkan ke halaman Anda dengan CDN unpkg:

 <script source="https://unpkg.com/drag-on-drop"></script> <script> var dragonDrop = new DragonDrop(listElement); </script>

Konfigurasi

Untuk mendukung berbagai kasus penggunaan, Dragon Drop sangat dapat dikonfigurasi.

Di bawah ini adalah konfigurasi default:

 { item: 'li', handle: 'button', activeClass: 'dragon-active', inactiveClass: 'dragon-inactive', announcement: { grabbed: el => `Item ${el.innerText} grabbed`, dropped: el => `Item ${el.innerText} dropped`, reorder: (el, items) => { const pos = items.indexOf(el) + 1; const text = el.innerText; return `The list has been reordered, ${text} is now item ${pos} of ${items.length}`; }, cancel: 'Reordering cancelled' } }

Pengumuman

Opsi konfigurasi "pengumuman" Dragon Drop adalah yang paling penting karena merupakan tulang punggung pengalaman pembaca layar yang disediakan Dragon Drop. Ini adalah objek yang berisi fungsi "grabbed" , "dropped" , "reorder" dan "cancel" yang memungkinkan pengumuman wilayah langsung khusus untuk semua interaksi yang terjadi.

Masing-masing fungsi ini harus mengembalikan string teks pengumuman yang ditambahkan ke wilayah langsung saat tindakan yang diberikan terjadi. Manfaat tambahan dari memanfaatkan fungsi-fungsi ini adalah mendukung pelokalan pesan wilayah langsung.

Untuk memfasilitasi pengumuman, elemen daftar tempat tindakan terjadi dan larik item dalam daftar dilewatkan sebagai argumen masing-masing.

 { announcement: { // grabbed is called when an item is picked up grabbed: (targetItem, items) => `${targetItem.innerText} grabbed`, // dropped is called when an item is dropped dropped: (targetItem, items) => `${targetItem.innerText} grabbed`, // reorder is called each time the order of the list is altered reorder: (targetItem, items) => { return `${targetItem.innerText} is now ${items.indexOf(targetItem) + 1} of ${items.length}` }, // cancel is called when a reordering is cancelled (via escape key) cancel: () => 'The initial order has been restored, reordering cancelled' } }

Teks Bantuan

Sangat penting bagi Anda untuk memberikan teks bantuan yang menjelaskan cara menggunakan daftar yang dapat disusun ulang. Ini adalah sesuatu yang Dragon Drop tidak lakukan untuk Anda agar tetap tidak terlalu berpendirian tentang bagaimana teks ini tersedia untuk teknologi bantu. Implementasi yang disarankan adalah menggunakan aria-describedby untuk mengaitkan teks bantuan dengan item interaktif seperti:

 <p>Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</p> <ul> <li> <button>Reorder Item 1</button> <span>Item 1</span> </li> <li> <button>Reorder Item 2</button> <span>Item 2</span> </li> <li> <button>Reorder Item 3</button> <span>Item 3</span> </li> </ul>

Dragon Drop Di GitHub

Dragon Drop versi ketiga baru saja dirilis. Jika Anda tertarik untuk menggunakannya, silakan merujuk ke dokumentasi Dragon Drop di GitHub. Terima kasih khusus ditujukan kepada pencipta Dragula, modul yang digunakan Dragon Drop untuk interaksi mouse, serta Aaron Pearlman yang mendesain logo yang luar biasa!

Masa Depan Naga

Jika interaksi drag-and-drop ditambahkan ke spesifikasi teknis WAI-ARIA di masa mendatang, fakta bahwa Dragon Drop bergantung pada interaksi non-standar dan wilayah langsung dapat berubah. Saya akan terus melakukan pengujian untuk memastikannya tetap didukung dengan baik oleh sebanyak mungkin pembaca layar dan tetap mengikuti perkembangan spesifikasi ARIA terbaru. Selain itu, ada beberapa fitur dalam pipeline termasuk dukungan untuk layar sentuh/perangkat seluler serta daftar multi-kolom (seperti papan sprint). Fitur lain yang mungkin akan ditambahkan di masa mendatang adalah komponen Dragon Drop React.

Saat ini, Dragon Drop dapat digunakan dengan React, seperti yang ditampilkan dalam demo di bawah, tetapi tidak ideal karena perubahan DOM yang disebabkan oleh penyusunan ulang daftar tidak diambil oleh React yang dapat menyebabkan perilaku yang tidak diharapkan. Saya mendorong siapa saja yang menemukan bug di Dragon Drop, atau bahkan memiliki ide untuk fitur untuk membuat masalah di GitHub. Semua umpan balik dan kontribusi disambut dan sangat dihargai!