Elemen Interaktif Native

Sepanjang section ini kita membangun FAQ, dialog konfirmasi, popover, indikator kemajuan, dan kalkulator — hampir semuanya tanpa JavaScript untuk perilaku dasarnya. Chapter penutup ini merangkum peta lengkapnya: elemen-elemen interaktif apa saja yang sudah disediakan HTML, keunggulan apa yang dibawa elemen native, dan kapan keputusan beralih ke solusi custom menjadi masuk akal.

Keunggulan Elemen Native #

Aturannya: setiap pola interaksi umum sudah punya elemen bawaannya, dan memakai elemen bawaan itu adalah pilihan baku sebelum menimbang alternatif. Empat keunggulan menjelaskan posisinya:

Aksesibel sejak awal: role, status, dan pengumuman pembaca layar terpasang bawaan — summary mengumumkan status terbuka, output menjadi live region, dialog diumumkan sebagai jendela dialog.
Keyboard siap pakai: Tab, Enter, Space, dan Esc sudah terpetakan ke perilaku yang benar tanpa satu handler pun dari kita.
Tanpa pemeliharaan skrip: mekanisme diuji oleh jutaan pengguna lintas browser; perbaikan bug perbaikan perilaku datang dari pembaruan browser, bukan dari rilis kode kita.
Konsisten antar aplikasi: pengguna mengenali elemen yang sama di berbagai situs, dan tim pengembang mengenali markup yang sama di berbagai proyek.

Peta Elemen Interaktif Native #

Elemen	Interaksi	Chapter
`a`	navigasi ke alamat	Links dan Navigasi
`button`	aksi: submit, buka dialog, toggle	Button vs Link
`details` / `summary`	buka-tutup konten, akordeon `name`	Details dan Summary
`dialog`	kotak dialog modal dan non-modal	Elemen dialog
`popover`	elemen melayang dengan top layer	Popover
`input`, `select`, `textarea`	kontrol isian form	Forms
`label`	penamaan kontrol yang dapat diklik	Forms
`output`	hasil perhitungan, live region	Output

Ketika sebuah kebutuhan cocok dengan satu baris tabel di atas, kebutuhan itu selesai di sisi HTML. JavaScript tinggal melengkapi nilai dan reaksi, seperti yang kita lakukan pada event close dialog dan kalkulator output.

Risiko Solusi Custom #

Membangun pola yang sama sendiri — div dengan event klik, panel tersembunyi dengan class CSS — berarti mengambil alih seluruh pekerjaan yang barusan dijelaskan sebagai keunggulan. Kita harus mengatur fokus masuk dan keluar, memetakan keyboard, menulis aria-expanded dan role yang tepat, menjaga penutupan lewat Esc, lalu merawat semuanya selama umur aplikasi. Setiap detail yang terlewat menjadi hambatan nyata bagi pengguna keyboard dan pembaca layar. Solusi custom tetap sah untuk kebutuhan yang benar-benar khusus — tetapi ia keputusan yang harus dibayar, bukan kebiasaan bawaan.

Invoker Commands API: Arah yang Baru #

Arah pengembangan HTML berlanjut ke deklaratif. Invoker Commands API — atribut command dan commandfor pada button — memungkinkan tombol mengendalikan dialog dan popover tanpa JavaScript: commandfor merujuk elemen sasaran, command menyatakan aksinya, misalnya "show-modal" atau "hide". API ini mencapai Baseline 2025 (Chrome 135, Firefox 144, Safari 26.2) sebagai fitur yang baru tersedia, sehingga untuk beberapa waktu masih perlu penyusunan cadangan. Perkembangan seperti ini menegaskan tren utama section kita: mekanisme interaksi terus berpindah dari skrip ke markup.

Ringkasan #

Elemen native membawa aksesibilitas, dukungan keyboard, bebas pemeliharaan skrip, dan konsistensi — empat hal yang harus dibangun sendiri pada solusi custom.
Peta native meliputi a, button, details/summary, dialog, popover, kontrol form, label, dan output.
Solusi custom sah untuk kebutuhan khusus, tetapi membawa tanggung jawab fokus, keyboard, dan ARIA penuh.
Invoker Commands API (Baseline 2025: Chrome 135, Firefox 144, Safari 26.2) melanjutkan arah deklaratif — tombol mengendalikan dialog dan popover dari markup.

Section berikutnya membahas kumpulan materi yang tertanam: audio, video, dan konten pihak ketiga.