Kapan Tombol Bukan Tombol?

Katakanlah Anda memiliki bagian dari antarmuka yang diklik pengguna dan sesuatu terjadi. Kedengarannya seperti tombol bagi saya, tapi sebut saja itu "hal yang klik" untuk saat ini. Saya tahu, Anda yakin itu juga tombol: Itu bulat dan menonjol dengan warna tomat yang bagus, meminta untuk berinteraksi. Tapi mari kita pikirkan sejenak. Ini akan menghemat waktu dalam jangka panjang, saya janji.

Bagaimana jika teks dalam hal yang diklik ini adalah "Baca lebih lanjut", dan mengkliknya mengarahkan pengguna ke artikel di halaman lain? Hmm. Dan bagaimana jika ada kata bergaris bawah biru, "Tutup", yang menutup dialog sembulan? Apakah ini tautan hanya karena berwarna biru dan digarisbawahi? Tentu saja tidak.

Wah! Sepertinya tidak ada cara untuk mengetahui apakah itu tautan atau tombol hanya dengan melihatnya. Itu gila! Kita perlu memahami apa yang dilakukan benda ini sebelum memilih elemen yang tepat. Tetapi bagaimana jika kita belum tahu apa fungsinya atau hanya bingung? Nah, ada diagram alur yang berguna untuk kita:

1. Ini adalah tombol.
2. Jika tidak, maka itu adalah tautan.
3. Itu dia.

Jadi, apakah semuanya tombol? Tidak, tetapi Anda selalu dapat memulai dengan tombol untuk hampir semua elemen yang dapat diklik atau berinteraksi dengan cara yang serupa. Dan jika ada yang kurang, seperti navigasi ke halaman lain, gunakan link saja. Dan tidak, pointer bukan alasan untuk membuatnya <a href> . Kami memiliki cursor: pointer untuk itu.

Baiklah, ini adalah <button> — kami setuju akan hal itu. Mari letakkan di template kita dan beri gaya sesuai dengan desain: beberapa padding, pembulatan, isian tomat, teks putih, dan bahkan beberapa gaya fokus. Oh, itu sangat baik dari Anda.

 <button type="button" class="button"> Something </button> <style> .button { display: inline-block; padding: 10px 20px; border-radius: 20px; background-color: tomato; color: white; } .button:focus { outline: none; box-shadow: 0 0 0 5px #006AE3; } </style>

Itu tidak butuh waktu lama. Anda ingin membangunnya dengan cepat dan mengambil makan siang karena Anda lapar. Ok, mari kita lihat bagaimana tampilannya dan mulai.

Ya Tuhan! Ada yang salah dengan browser. Mengapa tombol ini sangat jelek? Teksnya kecil, meskipun kami telah secara eksplisit mengatur body ke 16px , dan bahkan font-family salah. Perbatasan bulat dengan bayangan semu konyol begitu retro sehingga bahkan belum menjadi tren.

Ahh, itu gaya default browser. Anda perlu membatalkannya dengan hati-hati atau bahkan menambahkan Normalize.css atau Reset.css… atau Anda bisa menggunakan <div> dan melupakannya. Bukankah memecahkan masalah dengan cepat adalah apa yang mereka bayarkan untuk Anda? Anda lapar dan ini tidak membantu sama sekali. Tapi Anda seorang profesional: Tenangkan diri Anda dan pikirkan.

Apa perbedaan antara <button> dan <div> ? <button> adalah elemen interaktif, artinya dapat berinteraksi dengannya. Itu dalam. Anda dapat mengkliknya, Anda dapat memfokuskannya menggunakan keyboard, dan juga menyampaikan peran button yang dapat diakses ke pembaca layar, sehingga memungkinkan pengguna untuk memahami bahwa itu adalah sebuah tombol.

Menakjubkan! Anda tidak hanya mengetahui elemen <button> HTML, tetapi Anda juga mengetahui satu atau dua hal tentang ARIA dan dukungan pembaca layar. Anda bahkan mungkin telah mencoba VoiceOver atau NVDA untuk menguji seberapa mudah akses antarmuka Anda.

Jadi, Anda telah memutuskan untuk melakukan trik. Anda tidak akan mengacaukan gaya browser, dan Anda akan membuat elemen terlihat seperti tombol interaktif yang tepat untuk pengguna yang mungkin membutuhkannya. Itu pintar!

 <div class="button" tabindex="0" role="button"> Something </div>

Sekarang tidak hanya terlihat benar, tetapi juga dapat difokuskan melalui keyboard berkat atribut tabindex="0" , dan pembaca layar akan memperlakukannya sebagai tombol yang tepat karena Anda telah menambahkan role="button" dengan bijak. Git commit && dorong! Ada beberapa tugas tambahan untuk hal ini, tapi kita sudah selesai dengan penataannya. Apa yang mungkin salah? Waktunya makan siang. Hebat, ayo pergi!

Satu jam kemudian…

Itu makan siang yang menyenangkan! Mari kita kembali ke hal clicky kita. Kita perlu menyelesaikan beberapa tugas sebelum melanjutkan. Mari kita lihat… Kita perlu memanggil fungsi doSomething setelah tombol diklik, dan harus ada cara untuk menonaktifkan tombol tersebut agar tidak dapat diklik. Kedengarannya mudah. Mari tambahkan pendengar acara ke tombol ini:

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); }); function doSomething() { console.log('Something!'); } </script>

Selesai. Pengguna sekarang dapat mengkliknya dengan mouse di desktop dan mengetuknya dengan jari di layar sentuh. Acara klik akan diaktifkan dengan andal, dan Anda akan melihat banyak Sesuatu! di konsol Anda. Apa tugas selanjutnya?

Tunggu! Kami perlu memastikan itu berfungsi sama untuk pengguna keyboard. Karena kami memiliki tabindex="0" ini pada tombol, itu dapat difokuskan, dan setelah difokuskan, pengguna harus dapat menekan bilah spasi atau tombol "Enter" untuk memicu apa pun yang telah kami lampirkan.

Jadi, kita perlu melampirkan pendengar acara lain untuk menangkap semua keyup, dan kita akan memicu fungsi kita hanya untuk kunci tertentu. Terima kasih Tuhan bahwa perangkat sentuh cukup pintar untuk mengubah semua ketukan menjadi klik; jika tidak, kita juga harus melampirkan banyak acara sentuh.

 <script> const buttons = document.querySelectorAll('.button'); [...buttons].forEach(button => { button.addEventListener('click', doSomething); button.addEventListener('keyup', (event) => { if (event.key == 'Enter' || event.key == ' ') { doSomething(); } }); }); function doSomething() { console.log('Something!'); } </script>

Fiuh! Sekarang hal clicky kami sepenuhnya dapat diakses dari keyboard. Aku sangat bangga padamu! Dan JavaScript benar-benar ajaib — apa yang akan kita lakukan tanpanya?

Baiklah, apa tugas terakhirnya: "Tombol harus memiliki status dinonaktifkan yang mengubah tampilan dan perilakunya menjadi sesuatu yang mati rasa." Mati rasa? Saya kira itu berarti sesuatu yang abu-abu dan tidak responsif terhadap interaksi. Oke, mari kita tambahkan status di style sheet menggunakan penamaan BEM.

 <div class="button button--disabled" tabindex="0" role="button"> Something </div> <style> .button--disabled { background-color: #9B9B9B; } </style> 

Itu terlihat nyaman bagi saya. Kapan pun tombol perlu dinonaktifkan, kami akan menambahkan button--disabled untuk membuatnya abu-abu. Tapi itu belum cukup mati: Itu masih bisa fokus dan dipicu baik oleh pointer maupun dari keyboard.

Sial, ini semakin rumit.

Tidak hanya itu, tombol tersebut seharusnya tidak dapat diakses dalam urutan tab, artinya atribut tabindex tidak boleh ada di sana. Dan kita perlu memeriksa apakah tombol memiliki status dinonaktifkan dan kemudian berhenti memicu fungsi kita. Juga, pengubah ini dapat diterapkan secara dinamis. Meskipun CSS tidak menjadi masalah untuk mencocokkan elemen dengan pemilih dengan cepat dan menerapkan gaya, kita mungkin memerlukan semacam pengamat mutasi untuk memicu perubahan lain untuk tombol ini.

Saya tau? Kami pikir ini akan menjadi tombol kecil sederhana yang memicu fungsi dan memiliki status dinonaktifkan. Kami telah mencoba memperbaikinya dengan aksesibilitas dan semua itu, dan sekarang kami berada jauh di dalam lubang kelinci ini.

Mari kita ambil beberapa makanan takeaway. Kami tidak akan berada di rumah untuk makan malam pada saat kami selesai dan menguji ini dengan benar. W3C berdarah! Mengapa mereka tidak mencoba membuat hidup kita lebih mudah? Seolah-olah mereka peduli dengan kita!

Faktanya, mereka melakukan…

Mari kita mundur beberapa langkah sebelum melompat ke dalam kekacauan ini. Mengapa kita tidak mencoba melakukan hal-hal ini menggunakan elemen <button> ? Ada beberapa trik yang berguna, bukan hanya gaya browser yang jelek. Oh, dan jangan lupa type="button" — Anda tidak ingin tombol "Tutup" popup mengirimkan formulir secara tidak sengaja, karena type="submit" adalah nilai default.

Rupanya, ketika <button> difokuskan dan bilah spasi atau tombol "Enter" ditekan, itu akan memicu acara click , seperti yang dilakukan perangkat seluler ketika mereka mendapatkan ketukan, tepukan, jilatan, atau apa pun yang dapat mereka terima. hari ini. Satu pendengar acara lebih sedikit dalam kode kami! Bagus.

 // A click is enough! button.addEventListener('click', doSomething);

Untuk status nonaktif, atribut disabled tersedia untuk elemen <button> , serta untuk semua elemen formulir, termasuk <fieldset> . Tidak bercanda. Tahukah Anda bahwa Anda dapat menonaktifkan sejumlah besar input yang dikelompokkan bersama hanya dengan menerapkan satu atribut ke induk <fieldset> ?

 <fieldset disabled> <legend>A bunch of numb inputs</legend> <p> <label> <input type="radio" name="option"> Of course it's a link </label> </p> <p> <label> <input type="radio" name="option"> Obviously, it's a button </label> </p> <p> <label> <input type="radio" name="option"> I just wanna go home </label> </p> <button type="button">Button</button> </fieldset>

Sekarang kamu tau! Atribut ini tidak hanya menonaktifkan semua peristiwa pada elemen formulir, tetapi juga menghapusnya dari urutan tab. Masalah terpecahkan!

 <button disabled type="button" class="button"> Something </button>

Tapi tunggu, masih ada lagi! Ini juga memicu kelas semu :disabled di CSS, yang berarti bahwa kita dapat menyingkirkan pengubah BEM untuk mendeklarasikan gaya dan menggunakan pengubah dinamis bawaan sebagai gantinya.

 .button:disabled { background-color: #9B9B9B; }

Untuk gaya browser yang jelek, kita tidak harus menggunakan semua Normalize.css untuk memperbaiki satu tombol. Gunakan sebagai sumber kebijaksanaan: Tiga baris tambahan di bawah ini akan memperbaiki sebagian besar perbedaan yang mengganggu dari <div> . Jika Anda membutuhkan lebih banyak, Anda dapat menyalin bagian yang relevan darinya.

 .button { font-size: 100%; font-family: inherit; border: none; }

Selesai. Bagaimanapun juga, HTML tidak terlalu buruk!

Tetapi jika itu mengejutkan Anda sesekali, pastikan untuk memeriksa spesifikasi HTML untuk jawabannya. Ini menjadi jauh lebih ramah selama bertahun-tahun, dan penuh dengan contoh penggunaan dan aksesibilitas yang baik. Dan, tentu saja, HTML5 Doctor yang bagus masih merupakan tempat yang dapat diandalkan untuk mengetahui perbedaan antara elemen <section> dan <article> dan untuk memeriksa apakah kerangka dokumen belum (tidak juga). Ada kemungkinan Anda juga akhirnya akan membaca dokumentasi HTML oleh Mozilla, dan Anda juga tidak akan menyesalinya.

Tugas ini sekarang selesai! Apa berikutnya? Kalender korsel tarik-turun dengan bidang pencarian? Astaga! Semoga beruntung dengan itu. Tapi ingat: <button> adalah teman Anda!

Bacaan Lebih Lanjut tentang SmashingMag:

• Cara Mendesain Tombol yang Lebih Baik
• Membangun Tombol Toggle Inklusif
• Desain Tombol Hantu: Apakah Ini Benar-Benar Masih Ada (Dan Mengapa)?
• Pola Desain: Saat Melanggar Aturan Tidak masalah