Gunakan tombol

• Di antarmuka web, menggunakan alih-alih adalah pilihan yang benar dari sisi aksesibilitas dan fungsionalitas
• `` 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
• `` secara bawaan menyediakan aksesibilitas, fokus, dan penanganan input keyboard, sehingga menjadi solusi yang sederhana dan standar

---

Pendekatan yang salah: membuat tombol dengan ``

• Di kalangan pengguna React atau HTMX, cukup banyak kasus implementasi interaksi seperti membuka modal dengan bentuk ``
  • Contoh kode:

    Open Modal
    
    

• 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 `` secara default

Fitur bawaan yang disediakan ``

• Elemen `` 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 , **diperlukan banyak atribut dan skrip**, tetapi dengan , semuanya bisa diselesaikan hanya dalam satu baris

  Open Modal
  

Kesimpulan: yang sederhana adalah yang terbaik

• `` 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

[come2mecome]

Tulisan yang sangat bagus. Inti dari isi artikelnya bisa diringkas sebagai "mari gunakan tag HTML secara bermakna." Jika kita menyediakan event klik dengan tag div (atau tag lainnya), menurut saya itu sama sekali tidak berbeda dengan masa ketika dulu kita menyusun layout dengan tag table.

[carnoxen]

Tentu, memasukkan atribut aria-* bisa membuatnya lebih jelas, tapi daripada repot begitu mending pakai tag yang semestinya wkwkwk

[roxie]

Jadi nostalgia ya wkwkwk

[carnoxen]

Situs lembaga pemerintah di negara kita tampaknya sering memakai ``...

[GN⁺]

Komentar Hacker News

• Salah satu keluhan saya adalah situs web yang mengimplementasikan navigasi dengan handler onclick kalau cukup pakai tag ``, maka buka tab baru, integrasi perangkat aksesibilitas, menu klik kanan, dan semuanya langsung berfungsi dengan baik secara otomatis kalau itu navigasi, pakailah link alih-alih sup JavaScript

  • Dalam beberapa tahun terakhir, contoh implementasi seperti ini makin banyak mungkin karena pengaruh framework atau sekadar ketidakpedulian tetap saja, cara tradisional hampir selalu lebih baik dari sisi UX saya berharap ada sedikit ketidaknyamanan bagi orang-orang yang mencoba menggantikan tag ``
  • Menurut saya masalahnya adalah developer yang mulai dari React langsung lompat ke “hal-hal yang menyenangkan” tanpa mempelajari konsep dasar HTML orang-orang seperti ini membuat pola yang salah lalu developer berikutnya menirunya begitu saja kasus di mana saya benar-benar harus menata `` agar terlihat seperti tombol sangat jarang
  • Scroll berbasis JS juga harus dihapus saya sering scroll dengan tombol tengah mouse, dan banyak situs merusak ini
  • Ini mengingatkan saya pada link checker Microsoft Office 365 klik kiri membuka halaman pemeriksaan keamanan, tetapi klik tengah langsung menuju link tujuan
  • Bahkan di proyek React yang baru-baru ini saya ikuti, semua navigasi dibuat dengan onClick bahkan elemen yang pada dasarnya adalah link semuanya ditangani dengan click handler, dan saya tidak mengerti kenapa

• Sebagian besar tombol harus secara eksplisit menuliskan type="button" nilai bawaannya adalah submit, jadi kalau berada di dalam form akan otomatis mengirim mungkin sebagian developer tidak tahu ini, jadi mereka memakai ``

  • Saya rasa informasi inti ini hilang dari tulisan panjang OP tombol dengan tipe default berperilaku aneh dan kadang melewati handler JS
  • Nilai default itu setara dengan , dan berbeda
  • Saya juga belajar ini dari pengalaman langsung
  • Kalau memakai , Anda bisa menghindari masalah `type="submit"` pada awalnya kosong sehingga Anda hanya menambahkan fungsi yang diperlukan, dan nanti juga lebih mudah diubah sebaliknya, untuk memahami perilaku default ``, Anda harus membaca dokumentasi pada akhirnya ini soal memilih kontrol eksplisit vs fitur bawaan

• Akan lebih bagus kalau tulisan itu diperluas ke arah “mari pakai saja elemen HTML yang memang dibuat untuk tujuan itu” banyak developer SPA tidak terlalu paham makna elemen HTML, jadi mereka terus-menerus menciptakan ulang roda

  • Saya berharap elemen-elemen itu lebih mudah di-styling misalnya date picker bawaan terlalu jelek sehingga akhirnya diganti dengan versi berbasis JS
  • Ungkapan “gunakan saja platform apa adanya” sering muncul di frontend sejak HTML5, tetapi belum menyebar ke mana-mana
  • Kenyataannya, kebanyakan developer hampir tidak mengenal elemen HTML dan mencoba menyelesaikan semuanya dengan satu DIV
  • Sekitar tahun 2010, gaya tombol berbeda-beda di tiap browser sehingga harus dibuat sendiri jadi memang ada latar belakang kenapa tombol kustom bermunculan

• Sekarang ada generasi yang harus menekan-nekan layar ke sana kemari hanya untuk mencari area yang bisa diklik sepuluh tahun lalu seseorang membuat drag link lebih penting daripada memilih teks, dan sekarang memilih teks hampir mustahil untuk memperbaiki ini, mungkin kita harus mem-fork browser

  • Saya punya kebiasaan menyeret link untuk membukanya di tab latar belakang kalau menahan Alt (atau Option), Anda bisa memilih teks di dalam link
  • Di iOS, saat mencoba menyalin nomor telepon tetapi malah otomatis melakukan panggilan juga menjengkelkan dengan cara yang mirip itu benar-benar perilaku yang tidak diinginkan
  • Teks yang tidak bisa dipilih itu bikin gila di macOS, kalau memakai aplikasi TextSniper, Anda bisa memilih area lalu menyalin teks lewat OCR berkat itu Google Analytics jadi sedikit lebih bisa dipakai
  • Saya juga sering gagal saat mencoba memilih sebagian teks di dalam link masalah seperti ini seharusnya lebih sering dibicarakan
  • Ada juga ekstensi browser untuk memilih teks link dulu namanya Select Like A Boss, sekarang Drag-Select Link Text

• Saya sempat lama kebingungan karena stylesheet default Chrome punya button {align-items: flex-start}, yang memicu bug ukuran flexbox meskipun begitu, saya tetap berusaha memakai elemen HTML yang benar sebisa mungkin, tetapi untuk side project kecil kadang `` terasa lebih praktis

  • Properti appearance: none berguna untuk mereset gaya tombol saya membuat kelas .unbuttonify agar sesuatu tetap berperilaku seperti tombol tetapi tampil berbeda
  • Saya ingin menekankan bahwa developer frontend harus memahami dasar-dasar CSS

• Sebisa mungkin, elemen harus digunakan sesuai tujuan aslinya

• Saya punya dua keluhan soal tombol yang pertama, pada akhirnya Anda tetap harus mengganti stylenya lagi, dan yang kedua, ada peringatan bahwa tombol tidak bisa dinest ini dalam praktiknya cukup sering ditemui

• LLM sering menghasilkan pola yang salah seperti ini mereka sering mengabaikan fitur bawaan browser lalu membuat implementasi yang rumit saya sering menyuruh Claude untuk menyederhanakan kode seperti itu di TypeScript juga ada kecenderungan membuat cara penanganan error jadi aneh

  • LLM memang hebat dalam kemampuan menulis kode, tetapi lemah dalam naluri rekayasa perangkat lunak
  • Karena sifat prediksi tokennya, LLM lebih sering memilih pola yang kompleks

• Saya sebisa mungkin menggunakan tombol sebagai default tetapi kalau dalam praktiknya sesuatu memang harus berperilaku seperti link, saya memakai tag ``

  • Kalau URL berubah, itu link; kalau tidak berubah, itu tombol
  • Kalau itu “hyperlink yang memindahkan pengguna di dalam web app”, maka itu tag ``

• Saya penasaran kenapa ada pendapat yang menyarankan memakai ``

  • Mungkin karena `` lebih menguntungkan untuk kustomisasi tampilan yang aneh akibatnya jadi tidak terlihat maupun berperilaku seperti tombol
  • Misalnya situs seperti TV Tropes pernah mengimplementasikan daftar panjang yang dilipat-buka seperti “folder” dengan ``
  • Alasan yang paling umum adalah malas menimpa gaya default tombol

[nemorize]

Gunakan tombol

background, border, outline, appearance, -webkit-appearance, cursor
Terlalu banyak stylesheet bawaan yang harus ditimpa sedih sedih

[rtyu1120]

Makanya ada CSS Reset.