Gunakan tombol

• Di antarmuka web, menggunakan <button> alih-alih <div> adalah pilihan yang benar dari sisi aksesibilitas dan fungsionalitas
• <div> tidak dikenali sebagai elemen interaktif oleh screen reader, dan juga tidak merespons fokus keyboard maupun input Enter, Spacebar
• Meskipun atribut seperti [role="button"] atau [tabindex="0"] ditambahkan, masalah urutan fokus dan penanganan event keyboard tetap ada
• Untuk mengatasi masalah ini, menambahkan banyak event listener dan conditional justru menimbulkan kompleksitas yang tidak perlu
• <button> secara bawaan menyediakan aksesibilitas, fokus, dan penanganan input keyboard, sehingga menjadi solusi yang sederhana dan standar

---

Pendekatan yang salah: membuat tombol dengan <div>

• Di kalangan pengguna React atau HTMX, cukup banyak kasus implementasi interaksi seperti membuka modal dengan bentuk <div onclick="...">
  • Contoh kode:

    <div onclick="showSignIn()">Open Modal</div>
    

• Masalah dari pendekatan ini
  • Screen reader tidak mengenali elemen tersebut sebagai elemen interaktif
  • Tidak bisa dipindahi fokus dengan keyboard
  • Hanya event click yang bekerja, dan tidak merespons input Enter maupun Spacebar

Batasan dari upaya “memperbaiki” aksesibilitas

• Jika atribut [role="button"] ditambahkan, masalah pengenalan oleh screen reader memang teratasi, tetapi
  masalah fokus maupun penanganan input keyboard tetap belum terselesaikan
• Dengan menambahkan [tabindex="0"], elemen bisa dibuat dapat difokuskan, tetapi
  ada risiko urutan fokus menjadi kacau atau perpindahan yang tidak terduga terjadi
• Untuk menangani input keyboard, event keydown harus didaftarkan secara global di document, lalu
  mendeteksi tombol Enter atau ' ' (spasi) untuk mencari elemen yang sedang difokuskan dan mengeksekusinya

  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter' && event.key !== ' ') return;
    const notRealBtn = document.activeElement.closest('[onclick]');
    if (!notRealBtn) return;
    // 실행 코드
  });
  

• Hasilnya, kita pada dasarnya mereimplementasikan secara rumit fitur yang sudah disediakan <button> secara default

Fitur bawaan yang disediakan <button>

• Elemen <button> secara otomatis mendukung hal-hal berikut
  • Peran implisit ([role="button"])
  • Kemampuan menerima fokus secara otomatis
  • Saat dalam keadaan fokus, menjalankan event click ketika menerima input Enter dan Spacebar
• Untuk membuat perilaku yang sama dengan <div>, diperlukan banyak atribut dan skrip, tetapi
  dengan <button>, semuanya bisa diselesaikan hanya dalam satu baris

  <button onclick="showSignIn()">Open Modal</button>
  

Kesimpulan: yang sederhana adalah yang terbaik

• <button> adalah cara paling sederhana untuk memenuhi standar aksesibilitas sekaligus mengurangi jumlah kode
• Tanpa penanganan event tambahan atau penambahan atribut yang tidak perlu, menggunakan elemen HTML standar lebih unggul dari sisi maintainability dan efisiensi
• Dengan pesan “semakin malas seorang developer, semakin penting menggunakan elemen yang benar”, tulisan ini menekankan
  pentingnya kebiasaan pengembangan yang memanfaatkan fitur bawaan dan menghindari kompleksitas yang tidak perlu