Mari kita jujur. Di era framework modern seperti Tailwind CSS, Bootstrap, React, Vue, maupun Angular, hampir semua developer pernah menulis kode seperti ini agar proses styling terasa lebih fleksibel.

Secara visual, tampilannya tampak sempurna. Warnanya menarik, sudutnya membulat, kursor berubah menjadi ikon tangan ketika diarahkan ke elemen tersebut, dan ketika diklik menggunakan mouse, fungsinya berjalan dengan baik.

Namun, bagaimana jika pengguna tidak menggunakan mouse?

Bagi pengguna yang mengandalkan keyboard atau screen reader, elemen tersebut dapat menjadi masalah. Browser tidak mengenal <div> sebagai tombol sehingga berbagai kemampuan aksesibilitas yang tersedia pada elemen <button> tidak akan diperoleh secara otomatis.

Pada artikel ini kita akan membahas mengapa penggunaan <div> sebagai tombol bukanlah praktik yang disarankan, serta bagaimana memperbaikinya menggunakan elemen HTML yang memang dirancang untuk tujuan tersebut.

Mengapa <div> + onclick Kurang Tepat?

Elemen <div> merupakan elemen generik yang tidak memiliki perilaku interaktif secara bawaan.

Ketika sebuah <div> digunakan sebagai tombol, developer harus menambahkan sendiri berbagai perilaku yang sebenarnya sudah disediakan oleh browser apabila menggunakan elemen <button>.

Berikut beberapa konsekuensinya.

1. Tidak Dapat Diakses Menggunakan Keyboard Secara Otomatis

Cobalah buka halaman web Anda, kemudian tekan tombol Tab.

Apabila tombol dibuat menggunakan <button>, fokus keyboard akan berpindah ke tombol tersebut secara otomatis.

Sebaliknya, elemen <div> tidak termasuk dalam urutan fokus keyboard sehingga biasanya akan dilewati begitu saja.

Akibatnya, pengguna yang hanya menggunakan keyboard tidak dapat mengaktifkan tombol tersebut.

2. Tidak Mendukung Enter dan Space Secara Bawaan

Sebagian developer mencoba mengatasi masalah sebelumnya dengan menambahkan:

Memang elemen tersebut sekarang dapat menerima fokus.

Namun masih ada masalah lain.

Elemen <button> secara otomatis dapat diaktifkan menggunakan tombol:

1. Enter
2. Space (Spasi)

Sebaliknya, <div> tidak memiliki perilaku tersebut.

Artinya developer masih harus menambahkan JavaScript untuk menangani penekanan tombol keyboard.

3. Screen Reader Tidak Mengenalinya Sebagai Tombol

Screen reader menggunakan informasi semantik dari HTML untuk memberitahu pengguna jenis suatu elemen.

Jika menggunakan:

screen reader akan mengumumkan bahwa elemen tersebut adalah sebuah tombol.

Sebaliknya, apabila menggunakan:

screen reader umumnya hanya mengenali elemen tersebut sebagai teks atau elemen generik, kecuali developer menambahkan atribut ARIA dan perilaku keyboard secara lengkap.

Akibatnya, pengguna tidak mengetahui bahwa elemen tersebut sebenarnya dapat diaktifkan.

Solusi yang Direkomendasikan

Gunakan elemen HTML yang memang dirancang sebagai tombol.

Perbedaannya sangat sederhana.

Menjadi:

Perubahan kecil ini memberikan banyak keuntungan secara otomatis.

1. Dapat menerima fokus menggunakan tombol Tab.
2. Mendukung tombol Enter dan Space tanpa JavaScript tambahan.
3. Dikenali sebagai tombol oleh screen reader.
4. Memiliki perilaku yang konsisten di berbagai browser.
5. Lebih sesuai dengan HTML Semantik dan praktik WCAG.

"Tetapi Styling <button> Kurang Menarik..."

Alasan ini cukup sering disampaikan oleh developer.

Memang, setiap browser memiliki tampilan bawaan (user agent stylesheet) yang berbeda untuk elemen <button>.

Namun, solusi yang tepat bukan menggantinya dengan <div>, melainkan menyesuaikan tampilannya menggunakan CSS atau framework yang digunakan.

Sebagai contoh:

Setelah itu Anda bebas memberikan desain menggunakan CSS, Bootstrap, Tailwind CSS, atau framework lainnya.

Dengan demikian Anda tetap memperoleh seluruh manfaat aksesibilitas tanpa kehilangan kebebasan dalam mendesain antarmuka.

Catatan: Framework seperti Tailwind CSS tidak secara otomatis menghapus seluruh gaya bawaan <button>. Anda tetap perlu memberikan kelas utilitas yang sesuai apabila ingin mengubah tampilannya.

Kapan Menggunakan <button> dan Kapan Menggunakan <a>?

Ini merupakan pertanyaan yang sangat sering muncul.

Prinsip sederhananya adalah:

Aturan yang mudah diingat adalah:

Jika melakukan aksi, gunakan <button>. Jika berpindah ke lokasi lain, gunakan <a>.

Kesalahan yang Sering Terjadi

Praktik Instan: Audit Proyek Anda

Coba lakukan pemeriksaan sederhana pada proyek yang sedang Anda kerjakan.

1. Buka editor kode (misalnya Visual Studio Code).
2. Gunakan fitur Find in Files (Ctrl + Shift + F atau Cmd + Shift + F).
3. Cari penggunaan:

atau

Kemudian periksa setiap hasil pencarian.

Tanyakan pada diri Anda:

1. Apakah elemen tersebut sebenarnya berfungsi sebagai tombol?
2. Apakah pengguna keyboard dapat mengaksesnya?
3. Apakah screen reader mengenalinya sebagai tombol?

Jika jawabannya tidak, pertimbangkan menggantinya dengan elemen <button>.

Perubahan yang tampak sederhana ini dapat memberikan dampak besar bagi pengguna keyboard, pengguna screen reader, dan siapa pun yang mengandalkan teknologi bantu untuk mengakses website.

Ringkasan

Elemen HTML memiliki fungsi yang berbeda-beda. Menggunakan elemen sesuai peruntukannya bukan hanya membuat kode lebih rapi, tetapi juga memberikan banyak manfaat aksesibilitas secara otomatis.

Daripada membuat tombol dari <div> atau <span>, gunakanlah elemen <button> yang memang dirancang untuk menerima fokus keyboard, mendukung interaksi melalui Enter dan Space, serta dikenali dengan benar oleh browser dan screen reader.

Dengan mengikuti prinsip sederhana ini, Anda tidak hanya menulis kode yang lebih sesuai dengan standar HTML, tetapi juga membangun pengalaman web yang lebih inklusif dan lebih mudah digunakan oleh semua orang.