Bawaan vs Kustom: Kapan Menggunakan Elemen Asli

Untuk setiap kontrol, Anda menghadapi satu pilihan: gunakan elemen HTML native atau buat elemen khusus sendiri. Elemen native hampir selalu lebih unggul.

button native dapat menerima fokus, diklik dengan mouse, papan ketik, dan sentuhan, serta diumumkan dengan benar. Anda cukup menulis satu tag, lalu platform menangani sisanya.

Jika Anda menata span agar terlihat seperti tombol, elemen itu tetap tidak memiliki peran, fokus, maupun dukungan papan ketik. Elemen tersebut hanya menipu mata.

Agar kontrol khusus berfungsi, Anda harus menambahkan peran, tabindex, dan penangan tombol untuk Enter dan Space. Itu banyak kode hanya untuk menyamai satu tag.

Bahkan kontrol khusus yang dibuat dengan cermat dapat melewatkan kasus tertentu: cincin fokus, status dinonaktifkan, dan sentuhan. Elemen native sudah menangani semuanya.

Hal ini berlaku untuk seluruh platform. select, kotak centang, atau details yang sebenarnya memberi Anda perilaku dan aksesibilitas yang tidak pernah dapat sepenuhnya ditandingi oleh tiruan div.

Kontrol formulir native dikirim bersama form, memvalidasi dirinya sendiri, dan otomatis terhubung dengan label. Membuat ulang semua itu secara manual jarang sepadan.

Gunakan elemen khusus hanya ketika tidak ada elemen native untuk pola tersebut, seperti antarmuka bertab atau pohon. Setelah itu, ikuti pola pembuatan yang sudah terbukti dengan cermat.

Khawatir tombol sebenarnya terlihat biasa saja? Anda dapat menata elemen native secara menyeluruh dengan CSS. Pertahankan semantiknya, lalu ubah tampilannya sesuka Anda.

Menggunakan elemen yang sebenarnya berarti lebih sedikit JavaScript, lebih sedikit kesalahan, dan kontrol yang tetap berfungsi meskipun peramban serta teknologi bantu diperbarui—tanpa usaha tambahan.

Jadikan ini aturan default Anda: native terlebih dahulu, elemen khusus hanya sebagai pilihan terakhir. Platform web adalah anugerah besar bagi aksesibilitas, jadi biarkan platform yang mengerjakannya.

Pilih native terlebih dahulu: tombol atau input yang sebenarnya memberi Anda fokus, tombol papan ketik, dan semantik secara gratis. Gunakan elemen khusus hanya jika tidak ada elemennya, dan atur elemen native dengan bebas. 🎉