10 hal teratas yang salah dilakukan AI dalam pengembangan web

Philip Walton

Dipublikasikan: 11 November 2026

Minggu ini, kami merilis Modern Web Guidance versi 1.0, serangkaian keterampilan yang membekali agen coding Anda secara langsung dengan keahlian platform web, praktik terbaik, dan data kompatibilitas browser. Tujuan kami dengan Modern Web Guidance adalah membantu developer yang menggunakan agen coding AI memanfaatkan sepenuhnya kecanggihan dan kemampuan platform web modern, dan pada akhirnya meningkatkan pengalaman web bagi pengguna.

Sejak kami pertama kali memperkenalkan pratinjau awal Modern Web Guidance pada bulan Mei, agen coding menjadi semakin baik, dan banyak model termutakhir baru yang luar biasa telah dirilis. Salah satu pertanyaan yang paling sering kami dengar adalah: bukankah model termutakhir baru ini sudah mengikuti praktik terbaik pengembangan web?

Sayangnya, jawabannya adalah "tidak"—dan kami tahu jawabannya adalah "tidak" karena kami mengujinya.

Setiap panduan dalam Modern Web Guidance menentukan serangkaian ekspektasi yang harus terpenuhi jika praktik terbaik dalam panduan telah diikuti dengan benar. Suite evaluasi kami kemudian menguji panduan tersebut dengan memberikan perintah yang sama kepada agen yang berjalan dengan Modern Web Guidance yang diinstal (agen terpandu) dan agen lain yang berjalan tanpa Modern Web Guidance yang diinstal (agen tidak terpandu). Output dari kedua operasi tersebut diperiksa berdasarkan ekspektasi yang ditentukan oleh panduan.

Saat membandingkan tingkat kelulusan yang dipandu dan tidak dipandu, Anda dapat melihat bahwa model AI—bahkan model termutakhir—tidak dapat diandalkan untuk mengikuti praktik terbaik pengembangan web modern dengan sendirinya.

Rata-rata, agen coding tanpa panduan hanya lulus sekitar 50% pemeriksaan dalam rangkaian evaluasi kami, dibandingkan dengan sekitar 90% saat Modern Web Guidance digunakan.

Anda dapat melihat dasbor evaluasi kami untuk melihat daftar lengkap pemeriksaan spesifik yang kami jalankan untuk setiap panduan, dan skor setiap model dalam pemeriksaan tersebut.

Namun, untuk ringkasan tingkat tinggi, postingan ini membahas 10 area paling bermasalah yang kami lihat model AI selalu salah, di berbagai disiplin ilmu utama yang kemungkinan besar akan dihadapi developer web dalam pekerjaan sehari-hari, seperti aksesibilitas, pengalaman pengguna, performa, dan keamanan.

1. Aksesibilitas: Fokus keyboard dan pengelolaan inert

Bagi orang yang bernavigasi dengan keyboard atau pembaca layar, urutan fokus yang dapat diprediksi adalah hal yang membuat UI interaktif dapat digunakan. Tanpa itu, fokus dapat beralih ke konten latar belakang yang tersembunyi atau terjebak dalam puluhan posisi tab tambahan.

Pengelolaan fokus dan inert adalah salah satu kesenjangan aksesibilitas terbesar dalam evaluasi kami, dan salah satu area yang paling meningkat dengan Modern Web Guidance. Kesalahan yang paling umum meliputi:

• Gagal memindahkan fokus ke tampilan yang baru dibuka dan lupa memulihkan fokus ke elemen pemicu saat kembali ke halaman sebelumnya.
• Mengandalkan perangkap tab JavaScript manual dan aria-modal="true" pada modal kustom, alih-alih menggunakan <dialog> modal atau menandai konten latar belakang inert.
• Mengekspos setiap item di toolbar atau petak arah sebagai perhentian tab terpisah, bukan menggunakan satu perhentian tab dengan tabindex yang berpindah-pindah.
• Membuat garis batas :focus-visible kustom yang tidak memiliki rasio kontras 3:1 terhadap latar belakang yang berdekatan.

2. Aksesibilitas: Dukungan pengurangan gerakan

Pergerakan halaman yang tidak terduga dan animasi berskala besar tidak hanya mengganggu—bagi pengguna dengan gangguan vestibular atau sensitivitas gerakan, hal ini dapat memicu pusing, mual, atau sakit kepala.

Model AI biasanya ingat untuk memeriksa prefers-reduced-motion saat menambahkan transisi CSS standar atau animasi keyframe. Namun, saat menggunakan fitur yang lebih baru seperti scroll yang mulus, transisi tampilan, atau animasi berbasis scroll, mereka sering lupa tentang gerakan yang dikurangi, atau membuat kesalahan saat menerapkannya:

• Menetapkan scroll-behavior:smooth secara global dan tanpa syarat pada elemen root.
• Menggunakan animasi CSS berbasis scroll tanpa pemeriksaan gerakan yang dikurangi.
• Menghapus durasi transition pada item carousel untuk mengaktifkan pengurangan gerakan selama scroll, tetapi kemudian lupa menghapus properti transformasi juga, sehingga menyebabkan item melompat ukurannya saat di-scroll.
• Menerapkan reset durasi 0.01ms menyeluruh pada *, *::before, dan *::after saat gerakan dikurangi aktif, sehingga menghapus semua transisi non-gerakan yang penting (diperlukan untuk mengomunikasikan perubahan status UI).
• Mengaktifkan transisi tampilan lintas dokumen tanpa syarat dan mengganti animasi ::view-transition-* saat gerakan yang dikurangi aktif, bukan hanya membatasi aturan @view-transition di balik pemeriksaan gerakan yang dikurangi.

3. Aksesibilitas: Validasi formulir, petunjuk format, dan status isi otomatis

Formulir adalah landasan dari sebagian besar perjalanan penting pengguna di web. Masalah kecil dalam formulir checkout dapat berdampak besar pada laba bersih bisnis.

Saat membuat formulir, model AI dapat melakukan banyak hal dasar dengan benar. Namun, formulir tersebut sering kali gagal dalam detail kecil, tetapi penting, seperti error validasi, penempatan placeholder dan petunjuk format yang tepat, serta integrasi yang benar dengan pengelola sandi dan fitur isi otomatis:

• Menerapkan ulang :user-invalid CSS dengan validasi blur JavaScript kustom, yang sering kali menandai kolom required yang belum disentuh segera setelah pengguna beralih ke kolom berikutnya.
• Membiarkan aria-invalid tidak sinkron dengan error yang terlihat, baik dengan menetapkan aria-invalid="true" secara prematur di blur, atau menata gaya :user-invalid di CSS tanpa menyinkronkan aria-invalid di JavaScript.
• Mengandalkan teks placeholder yang menghilang untuk menampilkan format yang diperlukan (seperti MM/YY pada input masa berlaku kartu), bukan merender petunjuk persisten yang ditautkan dengan aria-describedby.
• Menempatkan petunjuk format dan aturan sandi di bawah <input> (bukan di atasnya) sehingga dapat tertutup oleh keyboard seluler dan popover isi otomatis tepat saat pengguna perlu membacanya.
• Menandai input :autofill dengan mengubah warna batas saja, bukan memasangkan warna dengan isyarat non-warna yang tidak mengubah tata letak (seperti box-shadow inset).

4. Pengalaman pengguna: Gestur geser dan sentuh

Agen dapat menerapkan gestur sentuh menggunakan JavaScript imperatif dan menulis logika fisika kustom mereka sendiri. Implementasi ini berfungsi; namun, interaksi sentuh yang didukung JavaScript jarang terasa semulus yang diharapkan pengguna dari aplikasi native.

Banyak dari interaksi ini dapat diimplementasikan dengan CSS dan API scroll native, sehingga browser dapat menjalankan fisika gestur di luar thread utama. Namun, dalam evaluasi kami, model AI sering kali mengabaikan fitur-fitur ini:

• Menerapkan gestur geser untuk menutup atau geser untuk menampilkan dengan pemroses pointermove atau touchmove, bukan menggunakan CSS Scroll Snap.
• Menghilangkan overscroll-behavior-x:none pada antarmuka geser tab, yang dapat secara tidak sengaja memicu navigasi kembali atau maju browser saat geser berlebihan.
• Mendorong efek progres geser di thread utama dalam callback JavaScript, bukan menggunakan animasi berbasis scroll.
• Tidak mendukung fokus keyboard dengan benar pada panel tindakan geser berbasis scroll.

5. Pengalaman pengguna: Dialog, popover, dan transisi lapisan atas

Dalam evaluasi kami, model sering kali menggunakan solusi JavaScript imperatif saat menganimasikan, menutup, atau membatasi scroll di sekitar dialog modal dan popover.

Alih-alih mengandalkan fitur HTML dan CSS modern yang dibuat untuk overlay lapisan atas, agen sering kali membuat sendiri mesin status masuk dan keluar, hook histori, dan penguncian scroll isi yang lebih sulit dikelola dan rentan terhadap bug UI yang tidak kentara.

Jika Anda berhasil menerapkan interaksi ini dengan benar, pengalaman yang terasa rapuh dapat berubah menjadi pengalaman yang rapi dan dipercaya pengguna. Berikut ini kesalahan yang paling umum kami temukan:

• Membuat overlay position:fixed kustom dengan pengendali klik di luar manual untuk penutupan ringan, bukan hanya menggunakan popover.
• Membuat animasi masuk dan keluar dengan mengaktifkan/menonaktifkan class transisi CSS dan berkoordinasi dengan pemroses requestAnimationFrame() dan transitionend (dengan penggantian setTimeout()), bukan melakukannya dalam CSS murni dengan @starting-style dan transition-behavior.
• Mengunci scroll halaman di balik modal yang terbuka dengan menyetel overflow:hidden di <html>, bukan menggunakan elemen <dialog> untuk memuat overscroll.
• Menambahkan pemroses popstate untuk mendeteksi gestur kembali Android dan menutup modal yang terbuka, daripada menggunakan fungsi tutup tombol kembali native elemen <dialog> modal.

6. Pengalaman pengguna: Mode gelap dan kontrol adaptif tema

Pengguna mengaktifkan mode gelap untuk mengurangi kelelahan mata dan silau, sehingga flash putih terang saat pemuatan halaman, kontrol formulir tanpa tema, atau tombol yang tidak sinkron dengan preferensi OS mereka akan langsung merusak pengalaman.

Tombol mode gelap mungkin tampak mudah, tetapi model tanpa panduan dalam evaluasi kami secara konsisten melewatkan detail platform penting yang diperlukan untuk mengaktifkan pengalihan tema dan kontrol formulir native dengan benar:

• <meta name="color-scheme" content="light dark"> tidak ada di <head>, sehingga pengguna mode gelap melihat flash kanvas putih saat stylesheet eksternal dimuat.
• Menata gaya tema gelap atau komponen berlatar belakang gelap dengan warna kustom tanpa menyetel color-scheme, sehingga scrollbar native dan kontrol formulir terjebak dalam mode terang.
• Mengabaikan fungsi light-dark() CSS saat menentukan token warna adaptif tema yang otomatis mengikuti color-scheme aktif.
• Hanya menyediakan tombol beralih terang atau gelap yang menetapkan penggantian eksplisit di localStorage tanpa opsi untuk kembali ke default OS.
• Lupa menambahkan pemroses peristiwa storage, sehingga tab terbuka lainnya tidak disinkronkan saat pengguna mengubah tema.

7. Performa: Responsivitas dan kelancaran runtime

Pengguna menghabiskan sebagian besar waktu mereka di halaman web setelah halaman selesai dimuat, sehingga interaksi yang lambat dan transisi yang tersendat-sendat dapat mengganggu pengalaman pengguna sama seperti pemuatan awal yang lambat.

Dalam evaluasi kami, model umumnya mengikuti praktik terbaik waktu pemuatan klasik yang telah dipromosikan di alat seperti Lighthouse selama bertahun-tahun, dan biasanya tahu cara memindahkan loop berat yang jelas ke Web Worker. Hal yang secara konsisten menjadi tantangan bagi mereka adalah responsivitas thread utama, yang sangat penting untuk mengoptimalkan INP: mengisolasi pekerjaan tata letak, menjadwalkan tugas berdasarkan prioritas, dan memanfaatkan fitur HTML dan CSS baru yang melakukan pekerjaan rendering di luar thread utama.

Misalnya, kita sering melihat agen:

• Menjalankan antrean setTimeout() kustom untuk pekerjaan latar belakang atau prioritas rendah, alih-alih memprioritaskan tugas yang terlihat oleh pengguna dengan scheduler.postTask() atau memanfaatkan kelanjutan tugas dengan scheduler.yield() jika browser mendukungnya.
• Membuat tata letak yang kompleks (seperti petak data yang padat) tanpa menerapkan content-visibility:auto dan contain-intrinsic-size, yang berarti update setelah interaksi pengguna akan memicu penataan ulang halaman penuh.
• Menyembunyikan tampilan SPA yang tidak aktif dengan display:none (atau menghapusnya) alih-alih menggunakan content-visibility:hidden (yang dipasangkan dengan inert). Cara pertama akan menghancurkan status rendering yang di-cache, sehingga beralih kembali akan memicu tata letak dan rendering penuh.
• Menjeda animasi <canvas> di luar layar dan loop latar belakang dengan callback Intersection Observer, bukan menyambungkan content-visibility:auto dengan peristiwa contentvisibilityautostatechange (jika tersedia), sehingga melewatkan margin pra-render browser sebelum elemen di-scroll ke tampilan.
• Membangun petunjuk UI affordance scroll menggunakan pemroses peristiwa scroll yang memaksa penghitungan tata letak berkelanjutan, bukan menggunakan kueri status scroll CSS jika tersedia (dengan penggantian Intersection Observer).

8. Performa: Pergeseran tata letak dan kedipan visual

Pergeseran tata letak yang tidak terduga akan mengganggu fokus pembaca, dan dapat menyebabkan pengguna mengklik tombol yang tidak terduga—terkadang dengan konsekuensi yang tidak dapat diubah.

Model memang dapat diandalkan untuk menambahkan atribut width dan height ke elemen <img> standar untuk mencegah pergeseran tata letak, tetapi model tersebut secara konsisten melewatkan sumber umum pergeseran tata letak dan flash pra-render lainnya dari elemen <video>, pertukaran font web, toolbar browser seluler, dan eksperimen sisi klien—semuanya dapat memengaruhi CLS.

• Menghilangkan atribut width dan height eksplisit pada elemen <video> (sehingga pemutar yang tidak dimuat ditetapkan secara default ke 300×150 dan mengubah tata letak setelah metadata dimuat), atau menata gaya elemen wrapper media, bukan menetapkan aspect-ratio dan object-fit langsung pada elemen media.
• Menyandingkan font web dengan font pengganti sistem tanpa font-size-adjust, sehingga menyebabkan paragraf dan judul berubah posisi secara terlihat saat font web diganti.
• Menentukan ukuran bagian utama dan tata letak layar penuh dengan unit vh statis, bukan unit area pandang dinamis atau kecil (dvh, svh), sehingga menyebabkan konten melompat saat toolbar browser seluler diperluas dan ditarik.
• Menyembunyikan konten dengan cuplikan anti-pergantian tampilan halaman opacity:0 atau visibility:hidden lama dan waktu tunggu beberapa detik untuk pengujian A/B sisi klien (menunda LCP dan membuat elemen yang tidak terlihat dapat diklik), alih-alih menggunakan skrip dengan blocking="render" jika tersedia.
• Memicu transisi tampilan lintas dokumen sebelum markup paruh atas yang penting diuraikan, bukan menahan render pertama dengan rel="expect" dan blocking="render", sehingga menyebabkan elemen yang diuraikan sebagian muncul di tengah transisi.

9. Keamanan: Pertahanan DOM XSS dan sanitasi HTML

Satu kelemahan pembuatan skrip lintas situs (XSS) memungkinkan penyerang menjalankan kode arbitrer di browser pengguna Anda, mencuri data sesi, atau mengambil tindakan atas nama mereka. Inilah alasan pertahanan yang diterapkan browser seperti sanitasi HTML yang aman, Trusted Types, dan CSP yang ketat sangat penting.

Model jarang mengatasi masalah keamanan ini secara proaktif. Misalnya, di semua tugas dalam rangkaian evaluasi lengkap kami, model tidak menambahkan header Kebijakan Keamanan Konten (CSP) atau isolasi lintas origin tanpa perintah eksplisit.

Meskipun jika perintah meminta keamanan secara langsung, model tanpa panduan terus gagal dalam lebih dari separuh pemeriksaan keamanan kami, sehingga menghasilkan penggantian kustom yang rentan atau kebijakan yang tidak lengkap. Hal ini terlihat jelas saat bertahan dari DOM XSS:

• Menulis pembersih daftar yang diizinkan DOMParser buatan sendiri—baik sebagai penggantian setHTML() atau di dalam kebijakan Jenis Tepercaya—alih-alih menggunakan library yang telah diperiksa seperti DOMPurify saat pembersihan native tidak tersedia.
• Menggabungkan DOMPurify secara langsung pada setiap pemuatan halaman, bukan menggunakan setHTML() native jika didukung dan memuat DOMPurify secara lambat hanya sebagai penggantian.
• Mendaftarkan kebijakan Trusted Types passthrough (input) => input permisif yang melemahkan penegakan sink.
• Memasangkan Trusted Types di halaman statis dengan CSP script-src 'self' daftar yang diizinkan host, bukan mengunci skrip inline dengan hash SHA-256.
• Menghilangkan 'strict-dynamic' dan 'report-sample' saat mengonfigurasi Kebijakan Keamanan Konten script-src berbasis nonce.

10. Keamanan: Login dengan kunci sandi, autentikasi ulang, dan siklus proses kredensial

Kunci sandi meningkatkan keamanan bagi pengguna dan konversi login untuk bisnis, tetapi penerapannya (bahkan dengan bantuan agen) merupakan tantangan tersendiri.

WebAuthn memiliki API serialisasi, deteksi kemampuan, dan pensinyalan tertentu yang hampir sepenuhnya tidak dipahami oleh model tanpa panduan dalam evaluasi kami. Jika Anda meminta model AI untuk menambahkan login, pengelolaan, atau autentikasi ulang langkah tambahan dengan kunci sandi, model tersebut sering kali menulis helper encoding byte manual, melewati pemeriksaan kemampuan pada UI pengelolaan, atau membuat kredensial tidak sinkron dengan pengelola sandi:

• Membuat sendiri helper konversi Base64URL atob() dan btoa()—baik sebagai jalur utama maupun sebagai boilerplate penggantian redundan—alih-alih mengandalkan metode serialisasi bawaan seperti parseCreationOptionsFromJSON(), parseRequestOptionsFromJSON(), dan credential.toJSON().
• Menghilangkan PublicKeyCredential.signalUnknownCredential() selama login saat server melaporkan ID kredensial yang tidak diketahui, sehingga kunci sandi yang dihapus atau dicabut tetap ada di pengelola sandi pengguna.
• Melewati PublicKeyCredential.getClientCapabilities() sebelum merender UI pembuatan dan pengelolaan kunci sandi.
• Menghilangkan AbortController dan AbortSignal saat memulai permintaan autentikasi ulang kunci sandi peningkatan.
• Meneruskan opsi mediation:"immediate" uji coba origin, bukan uiMode:"immediate" untuk dialog login yang disederhanakan.

Menutup kesenjangan ini

Kesepuluh area ini masih jauh dari daftar lengkap, dan kami memperkirakan kesenjangan pengetahuan spesifik akan berubah seiring waktu. Model akan terus berkembang dan platform web akan terus berevolusi.

Kabar baiknya adalah Modern Web Guidance mengatasi semua kesenjangan ini, dan akan terus berkembang seiring dengan platform.

Untuk mulai menggunakan Modern Web Guidance, jalankan perintah berikut, atau telusuri di marketplace plugin agen Anda:

npx modern-web-guidance@latest install

Have you seen models get other web development tasks wrong? Kami ingin mengetahuinya. Laporkan masalah di repositori GitHub Modern Web Guidance atau bantu kami menutup kesenjangan tersebut untuk developer lain dengan berkontribusi pada project.