Membuat Tombol yang Dinonaktifkan Lebih Inklusif

Mari kita bicara tentang tombol yang dinonaktifkan. Secara khusus, mari kita bahas mengapa kita menggunakannya dan bagaimana kita bisa melakukan lebih baik daripada disabled di HTML (misalnya <button disabled> ) untuk menandai tombol sebagai nonaktif.

Ada banyak kasus penggunaan di mana tombol nonaktif sangat masuk akal, dan kami akan membahas alasannya sebentar lagi. Namun di seluruh artikel ini, kita akan melihat formulir yang memungkinkan kita menambahkan sejumlah tiket ke keranjang belanja.

Ini adalah contoh dasar yang baik karena ada situasi yang jelas untuk menonaktifkan tombol "Tambahkan ke keranjang": ketika tidak ada tiket untuk ditambahkan ke keranjang.

Tapi pertama-tama, mengapa tombol dinonaktifkan?

Mencegah orang melakukan tindakan yang tidak valid atau tidak tersedia adalah alasan paling umum yang mungkin kami gunakan untuk tombol nonaktifkan. Dalam demo di bawah ini, kami hanya dapat menambahkan tiket jika jumlah tiket yang ditambahkan ke keranjang lebih dari nol. Cobalah:

Izinkan saya untuk melewatkan penjelasan kode dalam demo ini dan memfokuskan perhatian kita pada hal yang penting: tombol "Tambahkan ke keranjang".

 <button type="submit" disabled="disabled"> Add to cart </button>

Tombol ini dinonaktifkan oleh atribut yang disabled (Perhatikan bahwa ini adalah atribut boolean, yang artinya dapat ditulis sebagai disabled atau disabled="disabled" .)

Semuanya tampak baik-baik saja… jadi apa yang salah dengan itu?

Sejujurnya, saya dapat mengakhiri artikel di sini meminta Anda untuk tidak menggunakan tombol yang dinonaktifkan karena tombol tersebut payah , dan sebaliknya menggunakan pola yang lebih baik . Tapi mari kita bersikap realistis: terkadang menonaktifkan tombol adalah solusi yang paling masuk akal.

Dengan demikian, untuk tujuan demo ini, kami akan berpura-pura bahwa menonaktifkan tombol "Tambahkan ke keranjang" adalah solusi terbaik ( peringatan spoiler: bukan). Kami masih dapat menggunakannya untuk mempelajari cara kerjanya dan meningkatkan kegunaannya sepanjang proses.

Jenis interaksi

Saya ingin menjelaskan apa yang saya maksud dengan tombol nonaktif yang dapat digunakan. Anda mungkin berpikir, Jika tombol dinonaktifkan, seharusnya tidak dapat digunakan, jadi… apa masalahnya? Bersabarlah denganku.

Di web, ada beberapa cara untuk berinteraksi dengan halaman. Menggunakan mouse adalah salah satu yang paling umum, tetapi ada juga yang lain, seperti orang awam yang menggunakan keyboard untuk menavigasi karena gangguan motorik.

Cobalah untuk menavigasi demo di atas hanya dengan menggunakan tombol Tab untuk maju dan Tab + Shift untuk mundur. Anda akan melihat bagaimana tombol yang dinonaktifkan dilewati. Fokus beralih langsung dari input tiket ke tautan "istilah tiruan".

Menggunakan tombol Tab , itu mengubah fokus dari masukan ke tautan, melewati tombol "Tambahkan ke keranjang".

Mari berhenti sejenak dan rekap alasan yang mengarahkan kita untuk menonaktifkan tombol di tempat pertama versus apa yang sebenarnya telah kita capai.

Sangat umum untuk mengasosiasikan "berinteraksi" dengan "mengklik" tetapi keduanya adalah konsep yang berbeda. Ya, c lick adalah salah satu jenis interaksi, namun hanya satu di antara yang lain, seperti hover dan focus.

Dengan kata lain…

Semua klik adalah interaksi, tetapi tidak semua interaksi adalah klik.

Tujuan kami adalah untuk mencegah klik, tetapi dengan disabled , kami mencegah tidak hanya klik, tetapi juga fokus, yang berarti kami mungkin melakukan sebanyak mungkin kerugian. Tentu, perilaku ini mungkin tampak tidak berbahaya, tetapi menyebabkan kebingungan. Orang dengan disabilitas kognitif mungkin kesulitan memahami mengapa mereka tidak dapat memfokuskan tombol.

Dalam demo berikut, kami sedikit mengubah tata letak. Jika Anda menggunakan mouse, dan mengarahkan kursor ke tombol kirim, keterangan alat akan ditampilkan menjelaskan mengapa tombol tersebut dinonaktifkan. Itu keren!

Tetapi jika Anda hanya menggunakan keyboard, tidak ada cara untuk melihat tooltip itu karena tombol tidak dapat difokuskan dengan disabled . Hal yang sama juga terjadi pada perangkat sentuh. Aduh!

Dengan menggunakan mouse, keterangan alat pada tombol "Tambahkan ke keranjang" terlihat saat mengarahkan kursor. Tapi tooltip hilang saat menggunakan tombol Tab .

Izinkan saya untuk sekali lagi melewati penjelasan kode. Saya sangat merekomendasikan membaca “Inclusive Tooltips” oleh Haydon Pickering dan “Tooltips pada saat WCAG 2.1” oleh Sarah Higley untuk memahami sepenuhnya pola tooltip.

ARIA untuk menyelamatkan

Atribut yang disabled <button> melakukan lebih dari yang diperlukan. Ini adalah salah satu dari sedikit kasus yang saya ketahui di mana atribut HTML asli dapat lebih merugikan daripada menguntungkan. Menggunakan atribut ARIA dapat melakukan pekerjaan yang lebih baik, memungkinkan kami menambahkan tidak hanya fokus pada tombol, tetapi melakukannya secara konsisten untuk menciptakan pengalaman inklusif bagi lebih banyak orang dan kasus penggunaan.

Atribut yang disabled aria-disabled="true" . Cobalah demo berikut, sekali lagi, hanya dengan menggunakan keyboard. Perhatikan bagaimana tombol, meskipun ditandai nonaktif, masih dapat diakses oleh fokus dan memicu tooltip!

Menggunakan tombol Tab , tombol "Tambahkan ke keranjang" difokuskan dan ini menunjukkan tooltip.

Keren, ya? Perubahan kecil seperti itu untuk peningkatan besar!

Tapi kami belum selesai. Peringatan di sini adalah kita masih perlu mencegah klik secara terprogram, menggunakan JavaScript.

 elForm.addEventListener('submit', function (event) { event.preventDefault(); /* prevent native form submit */ const isDisabled = elButtonSubmit.getAttribute('aria-disabled') === 'true'; if (isDisabled || isSubmitting) { // return early to prevent the ticket from being added return; } isSubmitting = true; // ... code to add to cart... isSubmitting = false; })

Anda mungkin sudah familiar dengan pola ini sebagai cara untuk mencegah klik ganda mengirimkan formulir dua kali. Jika Anda menggunakan disabled karena alasan itu, saya memilih untuk tidak melakukannya karena itu menyebabkan hilangnya fokus keyboard sementara saat formulir dikirimkan.

Perbedaan antara disabled dan aria-disabled

Anda mungkin bertanya: jika aria-disabled tidak mencegah klik secara default, apa gunanya menggunakannya? Untuk menjawabnya, kita perlu memahami perbedaan antara kedua atribut tersebut:

Fitur / Atribut disabled aria-disabled="true"
Cegah klik
Cegah hover
Mencegah fokus
Gaya CSS default
Semantik

Satu-satunya tumpang tindih antara keduanya adalah semantik. Kedua atribut tersebut akan mengumumkan bahwa tombol tersebut memang dinonaktifkan, dan itu hal yang baik.

Berlawanan dengan atribut disabled aria-disabled adalah tentang semantik. Atribut ARIA tidak pernah mengubah perilaku atau gaya aplikasi secara default. Satu-satunya tujuan mereka adalah membantu teknologi pendukung (misalnya pembaca layar) untuk mengumumkan konten halaman dengan cara yang lebih bermakna dan kuat.

Sejauh ini, kita telah membicarakan tentang dua jenis orang, mereka yang mengklik dan mereka yang Tab . Sekarang mari kita bicara tentang tipe lain: mereka yang memiliki gangguan penglihatan (mis. Kebutaan, rabun) yang menggunakan pembaca layar untuk menavigasi web.

Orang yang menggunakan pembaca layar, sering kali lebih memilih untuk menavigasi bidang formulir menggunakan tombol Tab . Sekarang lihat bagaimana VoiceOver di macOS melompati tombol disabled

Pembaca layar VoiceOver melewati tombol "Tambahkan ke keranjang" saat menggunakan tombol Tab .

Sekali lagi, ini adalah bentuk yang sangat minim. Dalam kasus yang lebih lama, mencari tombol kirim yang tidak langsung ada bisa mengganggu. Bayangkan formulir di mana tombol kirim disembunyikan dan hanya terlihat ketika Anda mengisi formulir secara lengkap. Itulah yang dirasakan sebagian orang ketika disabled digunakan.

Untungnya, tombol yang disabled tidak sepenuhnya tidak dapat dijangkau oleh pembaca layar. Anda masih dapat menavigasi setiap elemen satu per satu, dan akhirnya Anda akan menemukan tombolnya.

Pembaca layar VoiceOver dapat menemukan dan mengucapkan tombol "Tambahkan ke keranjang".

Meski memungkinkan, ini adalah pengalaman yang mengganggu. Di sisi lain, dengan aria-disabled , pembaca layar akan memfokuskan tombol secara normal dan mengumumkan statusnya dengan benar. Perhatikan bahwa pengumuman di antara pembaca layar sedikit berbeda. Misalnya, NVDA dan JWAS mengatakan "tombol, tidak tersedia" tetapi VoiceOver mengatakan "tombol, redup".

Pembaca layar VoiceOver dapat menemukan tombol "Tambahkan ke keranjang" menggunakan tombol Tab karena aria-disabled .

Saya telah memetakan bagaimana kedua atribut menciptakan pengalaman pengguna yang berbeda berdasarkan alat yang baru saja kita gunakan:

Alat / Atribut disabled aria-disabled="true"
Mouse atau tap Mencegah klik tombol. Memerlukan JS untuk mencegah klik.
Tab Tidak dapat memfokuskan tombol. Mampu memfokuskan tombol.
Pembaca layar Tombol sulit ditemukan. Tombol mudah ditemukan.

Jadi, perbedaan utama antara kedua atribut tersebut adalah:

  • disabled mungkin melewatkan tombol saat menggunakan tombol Tab , menyebabkan kebingungan.
  • aria-disabled akan tetap memfokuskan tombol dan mengumumkan bahwa tombol itu ada, tetapi belum diaktifkan; dengan cara yang sama Anda mungkin melihatnya secara visual.

Dalam kasus ini, penting untuk mengetahui perbedaan halus antara aksesibilitas dan kegunaan. Aksesibilitas adalah ukuran seseorang dapat menggunakan sesuatu. Kegunaan adalah ukuran seberapa mudah sesuatu digunakan.

Mengingat itu, apakah disabled dapat diakses? Iya . Apakah itu memiliki kegunaan yang baik? Saya rasa tidak .

Bisakah kita berbuat lebih baik?

Saya tidak akan merasa nyaman dengan diri saya sendiri jika saya menyelesaikan artikel ini tanpa menunjukkan kepada Anda solusi inklusif yang nyata untuk contoh formulir tiket kami. Jika memungkinkan, jangan gunakan tombol yang dinonaktifkan . Biarkan orang mengekliknya kapan saja dan, jika perlu, tampilkan pesan kesalahan sebagai umpan balik. Pendekatan ini juga memecahkan masalah lain:

  • Lebih sedikit gesekan kognitif: Izinkan orang mengirimkan formulir kapan saja. Ini menghilangkan ketidakpastian apakah tombol tersebut bahkan dinonaktifkan sejak awal.
  • Kontras warna: Meskipun tombol yang dinonaktifkan tidak harus memenuhi kontras warna WCAG 1.4.3 , saya yakin kami harus menjamin bahwa elemen selalu terlihat dengan baik, apa pun statusnya. Tetapi itu adalah sesuatu yang tidak perlu kita khawatirkan sekarang karena tombolnya sudah tidak dinonaktifkan lagi.

Pikiran terakhir

Atribut yang disabled <button> adalah kasus khusus yang, meskipun sangat dikenal oleh komunitas, mungkin bukan pendekatan terbaik untuk menyelesaikan masalah tertentu. Jangan salah paham karena saya tidak mengatakan bahwa disabled selalu buruk. Masih ada beberapa kasus di mana masih masuk akal untuk menggunakannya (misalnya penomoran halaman).

Sejujurnya, saya tidak melihat disabled persis sebagai masalah aksesibilitas. Yang menjadi perhatian saya lebih merupakan masalah kegunaan. Dengan menukar atribut disabled aria-disabled , kami dapat membuat pengalaman seseorang jauh lebih menyenangkan.

Ini adalah satu langkah lagi dalam perjalanan saya di aksesibilitas web. Selama bertahun-tahun, saya telah menemukan bahwa aksesibilitas lebih dari sekadar memenuhi standar web. Berurusan dengan pengalaman pengguna itu rumit dan sebagian besar situasi memerlukan kompromi dan kompromi dalam cara kami mendekati solusi. Tidak ada peluru perak untuk aksesibilitas sempurna.

Tugas kita sebagai pembuat web adalah mencari dan memahami berbagai solusi yang tersedia. Hanya dengan begitu kita bisa membuat pilihan terbaik. Tidak ada gunanya berpura-pura bahwa masalah tidak ada.

Pada akhirnya, ingatlah bahwa tidak ada yang mencegah Anda membuat web menjadi tempat yang lebih inklusif.

Bonus

Masih di sana? Izinkan saya menyebutkan dua hal terakhir tentang demo ini yang menurut saya layak:

1. Wilayah Langsung akan mengumumkan konten dinamis

Dalam demo, dua bagian konten berubah secara dinamis: tombol pengiriman formulir dan konfirmasi sukses ("Menambahkan tiket [X]!").

Namun, perubahan ini terlihat secara visual, bagi orang dengan gangguan penglihatan yang menggunakan pembaca layar, itu bukanlah kenyataan. Untuk mengatasinya, kita perlu mengubah pesan tersebut menjadi Live Region. Mereka memungkinkan teknologi pendukung untuk mendengarkan perubahan dan mengumumkan pesan yang diperbarui saat itu terjadi.

Ada kelas khusus .sr-only dalam demo yang menyembunyikan <span> berisi pesan pemuatan, tetapi memungkinkannya diumumkan oleh pembaca layar. Dalam hal ini, aria-live="assertive" diterapkan ke <span> dan menyimpan pesan yang berarti setelah formulir dikirim dan sedang dalam proses pemuatan. Dengan cara ini, kami dapat mengumumkan kepada pengguna bahwa formulir berfungsi dan bersabar saat dimuat. Selain itu, kami melakukan hal yang sama pada elemen umpan balik formulir.

 <button type="submit" aria-disabled="true"> Add to cart <span aria-live="assertive" class="sr-only js-loadingMsg"> <!-- Use JavaScript to inject the the loading message --> </span> </button> <p aria-live="assertive" class="formStatus"> <!-- Use JavaScript to inject the success message --> </p>

Perhatikan bahwa aria-live harus ada di DOM sejak awal, meskipun elemen tersebut belum menyimpan pesan apa pun, jika tidak, Teknologi Bantu mungkin tidak berfungsi dengan baik.

Formulir kirim pesan umpan balik yang diumumkan oleh pembaca layar.

Masih banyak lagi yang bisa Anda ceritakan tentang aria-live kecil ini dan hal-hal besar yang dilakukannya. Ada juga gotcha. Misalnya, jika diterapkan secara tidak benar, atribut tersebut dapat menyebabkan lebih banyak kerugian daripada kebaikan. Ada baiknya membaca "Using aria-live" oleh Ire Aderinokun dan "Loading Skeletons" dari Adrian Roselli untuk lebih memahami cara kerjanya dan cara menggunakannya.

2. Jangan gunakan pointer-events untuk mencegah klik

Ini adalah implementasi alternatif (dan salah) yang pernah saya lihat di web. Ini menggunakan pointer-events: none; di CSS untuk mencegah klik (tanpa atribut HTML). Tolong jangan lakukan ini. Inilah Pena jelek yang mudah-mudahan akan menunjukkan alasannya. Saya ulangi, jangan lakukan ini.

Meskipun CSS itu memang mencegah klik mouse, ingatlah bahwa itu tidak akan mencegah fokus dan navigasi keyboard, yang dapat menyebabkan hasil yang tidak terduga atau, lebih buruk lagi, bug.

Dengan kata lain, menggunakan aturan CSS ini sebagai strategi untuk mencegah klik, tidak ada gunanya (mengerti?). 😉


Postingan Membuat Tombol Nonaktif Lebih Inklusif muncul pertama kali di CSS-Tricks .

Anda dapat mendukung CSS-Tricks dengan menjadi Supporter MVP .

May 12, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *