Pakai elemen native, bukan div yang dipaksa
Aturan pertama ARIA justru menyuruhmu tidak memakai ARIA bila sudah ada elemen HTML yang sesuai. <div role="button" tabindex="0"> menuntut JavaScript tambahan agar bisa ditekan dengan Enter dan Space, dan bagian itu paling sering terlupa. <button> membawa semuanya secara gratis: bisa difokuskan dengan Tab, merespons Enter dan Space, diumumkan sebagai tombol, serta mengikuti pengaturan sistem pengguna. Pola yang sama berlaku untuk link: kalau tujuannya berpindah halaman, pakai <a>, bukan div yang diberi event klik.
👀 Contoh dulu
<!-- div ini butuh JS tambahan untuk Enter & Space --> <div role="button" tabindex="0">Hapus</div> <!-- gratis: fokus, Enter, Space, semantik --> <button>Hapus</button>
Hasilnya: Keduanya bisa diklik mouse, tapi hanya <button> yang otomatis bisa ditekan dengan Enter dan Space.
💡 Aturan pertama ARIA: jangan pakai ARIA kalau ada elemen HTML native yang sesuai.
📝 Sekarang giliranmu
Ganti div yang berpura-pura jadi tombol di bawah menjadi elemen <button> yang sebenarnya (teksnya tetap Simpan).