Yapay zekanın web geliştirmede en çok hata yaptığı 10 konu

Philip Walton

Yayınlanma tarihi: 11 Kasım 2026

Bu hafta, web platformu uzmanlığını, en iyi uygulamaları ve tarayıcı uyumluluğu verilerini doğrudan kodlama temsilcilerinize yerleştiren bir dizi beceri olan Modern Web Rehberi'nin 1.0 sürümünü yayınladık. Modern Web Rehberi ile amacımız, yapay zeka kodlama temsilcilerini kullanan geliştiricilerin modern web platformunun gücünden ve özelliklerinden tam olarak yararlanmasına yardımcı olmak ve nihayetinde kullanıcılar için web deneyimlerini iyileştirmektir.

Mayıs ayında Modern Web Rehberi'nin erken erişimini ilk kez kullanıma sunduğumuzdan beri kodlama temsilcileri daha da iyi hale geldi ve birçok muhteşem yeni öncü model yayınlandı. En sık duyduğumuz sorulardan biri şu: Bu yeni öncü modeller zaten web geliştirme ile ilgili en iyi uygulamaları takip etmiyor mu?

Maalesef yanıt "hayır". Yanıtın "hayır" olduğunu biliyoruz çünkü bunu test ediyoruz.

Modern Web Rehberi'ndeki her kılavuz, kılavuzdaki en iyi uygulamalar doğru şekilde uygulandığında karşılanması gereken bir dizi beklentiyi tanımlar. Değerlendirme paketimiz, Modern Web Rehberi'nin yüklü olduğu bir temsilciye (rehberli temsilci) ve Modern Web Rehberi'nin yüklü olmadığı başka bir temsilciye (rehbersiz temsilci) aynı istemi vererek bu kılavuzları test eder. Her iki çalıştırmanın çıkışı, kılavuzda tanımlanan beklentilere göre kontrol edilir.

Yönlendirmeli ve yönlendirmesiz geçme oranlarını karşılaştırdığınızda, yapay zeka modellerinin (en yeni öncü modellerin bile) modern web geliştirme ile ilgili en iyi uygulamaları kendi başlarına güvenilir bir şekilde takip etmediğini görebilirsiniz.

Rehberlik sunulmayan kodlama temsilcileri, değerlendirme paketimizdeki kontrollerin ortalama olarak yalnızca %50'sini geçerken Modern Web Rehberi kullanıldığında bu oran yaklaşık %90'a çıkıyor.

Her bir kılavuz için çalıştırdığımız belirli kontrollerin tam listesini ve her modelin bu kontrollerde nasıl puan aldığını görmek için değerlendirme kontrol panelimize göz atabilirsiniz.

Ancak genel bir bakış için bu yayında, yapay zeka modellerinin sürekli olarak yanlış yaptığı en sorunlu 10 alan ele alınmaktadır. Bu alanlar, web geliştiricilerinin günlük çalışmalarında en çok karşılaşabilecekleri erişilebilirlik, kullanıcı deneyimi, performans ve güvenlik gibi temel disiplinleri kapsar.

1. Erişilebilirlik: Klavye odağı ve inert yönetimi

Klavye veya ekran okuyucuyla gezinen kullanıcılar için etkileşimli kullanıcı arayüzlerini kullanılabilir kılan şey, tahmin edilebilir odak sırasıdır. Bu özellik olmadan odak, gizli arka plan içeriğine kayabilir veya onlarca ek sekme durağına takılabilir.

Odak ve inert yönetimi, değerlendirmelerimizdeki en büyük erişilebilirlik eksikliklerinden biridir ve Modern Web Rehberi ile en çok iyileştirilen alanlardan biridir. En yaygın hatalar şunlardır:

• Odağı yeni açılan görünümlere taşımamak ve geri giderken odağı tetikleyici öğeye geri yüklemeyi unutmak.
• Özel kalıcı pencerelerde kalıcı pencere <dialog> kullanmak veya arka plan içeriğini inert olarak işaretlemek yerine manuel JavaScript sekme tuzaklarına ve aria-modal="true" özelliğine güvenme.
• Araç çubuğundaki veya yönlü ızgaradaki her öğeyi, hareketli tabindex ile tek bir sekme durağı kullanmak yerine ayrı bir sekme durağı olarak gösterme.
• Bitişik arka planlara göre 3:1 kontrast oranına sahip olmayan özel :focus-visible ana hatlar oluşturma.

2. Erişilebilirlik: Azaltılmış hareket desteği

Beklenmedik sayfa hareketleri ve büyük ölçekli animasyonlar yalnızca dikkat dağıtmakla kalmaz, aynı zamanda vestibüler bozuklukları veya hareket hassasiyeti olan kullanıcılarda baş dönmesi, mide bulantısı ya da baş ağrısını tetikleyebilir.

Yapay zeka modelleri, standart CSS geçişleri veya animasyon kareleri eklerken genellikle prefers-reduced-motion kontrolü yapmayı unutmaz. Ancak kolay kaydırma, görünüm geçişleri veya kaydırmaya dayalı animasyonlar gibi daha yeni özellikleri kullanırken genellikle azaltılmış hareketi unuturlar veya uygularken hata yaparlar:

• Kök öğede scroll-behavior:smooth değerini genel ve koşulsuz olarak ayarlama.
• Azaltılmış hareket kontrolü olmadan kaydırmaya dayalı CSS animasyonları kullanılıyor.
• Kaydırma sırasında azaltılmış hareketi etkinleştirmek için bant öğelerindeki transition sürelerini kaldırma ancak daha sonra dönüştürme özelliklerini de kaldırmayı unutarak kaydırma sırasında öğelerin boyutunun değişmesine neden olma.
• Azaltılmış hareket etkin olduğunda *, *::before ve *::after için genel bir 0.01ms süreli sıfırlama uygulanıyor ve hareket içermeyen tüm temel geçişler de (kullanıcı arayüzü durum değişikliklerini iletmek için gerekli) siliniyor.
• @view-transition kuralını yalnızca azaltılmış hareket kontrolünün arkasına geçirmek yerine, dokümanlar arası görünüm geçişlerini koşulsuz olarak etkinleştirme ve azaltılmış hareket etkinken ::view-transition-* animasyonlarını geçersiz kılma.

3. Erişilebilirlik: Form doğrulama, biçim ipuçları ve otomatik doldurma durumları

Formlar, web'deki en kritik kullanıcı yolculuklarının temel taşlarından biridir. Ödeme formundaki küçük bir sorun, işletmenin kârlılığı üzerinde büyük bir etkiye sahip olabilir.

Yapay zeka modelleri, form oluştururken temel bilgilerin çoğunu doğru şekilde uygular. Ancak doğrulama hataları, yer tutucuların ve biçim ipuçlarının doğru yerleştirilmesi, şifre yöneticileri ve otomatik doldurma özellikleriyle doğru entegrasyon gibi küçük ama kritik ayrıntılarda genellikle başarısız olurlar:

• CSS :user-invalid, özel JavaScript blur doğrulamasıyla yeniden uygulanıyor. Bu doğrulama, kullanıcılar dokunulmamış required alanları sekme tuşuyla geçer geçmez genellikle bu alanları işaretler.
• aria-invalid öğesinin görünür hatalarla senkronizasyonunun bozulmasına izin vermek, aria-invalid="true" öğesini blur üzerinde erken ayarlamak veya JavaScript'te aria-invalid öğesini senkronize etmeden CSS'de :user-invalid öğesini stillendirmek.
• aria-describedby ile bağlantılı kalıcı bir ipucu oluşturmak yerine, gerekli biçimleri (ör. kart son kullanma tarihi girişindeki MM/YY) göstermek için kaybolan placeholder metnine güvenme.
• Biçim ipuçlarını ve şifre kurallarını <input> alanının üstü yerine altına yerleştirmek. Bu durumda, kullanıcının bu bilgileri okuması gerektiğinde mobil klavyeler ve otomatik doldurma popover'ları bu bilgileri gizleyebilir.
• :autofill girişleri, rengi düzeni değiştirmeyen renk dışı bir ipucuyla (ör. içe yerleştirilmiş box-shadow) eşleştirmek yerine yalnızca kenarlık rengini değiştirerek vurgulama.

4. Kullanıcı deneyimi: Kaydırma ve dokunma hareketleri

Temsilciler, zorunlu JavaScript kullanarak dokunma hareketlerini uygulama ve kendi özel fizik mantıklarını yazma konusunda başarılıdır. Bu uygulamalar işe yarar ancak JavaScript destekli dokunma etkileşimleri, kullanıcıların yerel uygulama muadillerinden beklediği kadar sorunsuz bir deneyim sunmaz.

Bu etkileşimlerin çoğu CSS ve yerel kaydırma API'leriyle uygulanabilir. Böylece tarayıcı, hareket fiziğini ana iş parçacığının dışında çalıştırabilir. Ancak değerlendirmelerimizde yapay zeka modellerinin genellikle şu özellikleri gözden kaçırdığını gördük:

• CSS kaydırarak tutturma yerine pointermove veya touchmove dinleyicileriyle kaydırarak kapatma ya da kaydırarak gösterme hareketlerini uygulama.
• Sekme kaydırma arayüzlerinde overscroll-behavior-x:none kullanılmaması, kaydırma sırasında yanlışlıkla tarayıcıda geri veya ileri gezinmeyi tetikleyebilir.
• Kaydırma animasyonları kullanmak yerine JavaScript geri çağırmalarında ana iş parçacığında kaydırma ilerleme efektlerini yönlendirme.
• Kaydırma tabanlı kaydırma işlemi panellerinde klavye odağını düzgün şekilde desteklememe.

5. Kullanıcı deneyimi: İletişim kutuları, popover'lar ve üst katman geçişleri

Değerlendirmelerimizde, modeller genellikle kalıcı iletişim kutuları ve popover'lar etrafında kaydırma yaparken, bunları kapatırken veya içerirken zorunlu JavaScript geçici çözümlerine başvurur.

Temsilciler, üst katman yer paylaşımları için tasarlanmış modern HTML ve CSS özelliklerini kullanmak yerine genellikle giriş ve çıkış durum makinelerini, geçmiş kancalarını ve gövde kaydırma kilitlerini manuel olarak oluşturur. Bu yöntemlerin bakımı daha zordur ve kullanıcı arayüzünde küçük hatalara yol açabilir.

Bu etkileşimleri doğru şekilde tasarladığınızda, kullanıcıların güvenmediği bir deneyimi güvenilir ve kusursuz bir deneyime dönüştürebilirsiniz. En sık karşılaştığımız hatalar şunlardır:

• Yalnızca popover kullanmak yerine, hafif kapatma için manuel tıklama işleyicileriyle özel position:fixed yer paylaşımları oluşturma.
• @starting-style ve transition-behavior ile saf CSS'de yapmak yerine CSS geçiş sınıflarını açıp kapatarak ve requestAnimationFrame() ve transitionend dinleyicileriyle (setTimeout() yedekleriyle) koordinasyon sağlayarak giriş ve çıkış animasyonları oluşturma.
• Aşırı kaydırmayı kontrol altına almak için <dialog> öğesi kullanmak yerine <html> üzerinde overflow:hidden ayarı yaparak açık bir modalın arkasındaki sayfa kaydırmayı kilitleme.
• Android geri hareketlerini algılamak ve açık modalları kapatmak için popstate dinleyicileri ekleme (modal <dialog> öğesinin yerel geri düğmesi kapatma işlevi yerine).

6. Kullanıcı deneyimi: Koyu mod ve temaya uyarlanabilir kontroller

Kullanıcılar göz yorgunluğunu ve parlamayı azaltmak için koyu modu etkinleştirir. Bu nedenle, sayfa yüklenirken parlak beyaz bir ışık, teması olmayan form kontrolleri veya işletim sistemi tercihiyle senkronize olmayan bir açma/kapatma düğmesi deneyimi hemen olumsuz etkiler.

Koyu mod açma/kapatma düğmesi basit görünebilir ancak değerlendirmelerimizdeki rehberlik edilmeyen modeller, tema değiştirme ve yerel form kontrollerini doğru şekilde yapmak için gereken önemli platform ayrıntılarını sürekli olarak kaçırıyor:

• <head> içinde <meta name="color-scheme" content="light dark"> eksik. Bu durum, koyu mod kullanıcılarının harici stil sayfaları yüklenirken beyaz bir tuval görmesine neden oluyor.
• color-scheme ayarlanmadan özel renklerle koyu temalar veya koyu yüzeyli bileşenler oluşturulması, yerel kaydırma çubuklarının ve form kontrollerinin açık modda kalmasına neden olur.
• Etkin color-scheme değerini otomatik olarak takip eden temaya uyarlanabilir renk jetonlarını tanımlarken CSS light-dark() işlevini göz ardı etme.
• localStorage içinde açık bir geçersiz kılma ayarlayan ve işletim sistemi varsayılanına dönme seçeneği sunmayan, yalnızca açık veya koyu renkli bir açma/kapatma düğmesi sağlama.
• storage etkinlik işleyici eklemeyi unutmak, kullanıcı temaları değiştirdiğinde diğer açık sekmelerin senkronizasyonunu bozmak.

7. Performans: Çalışma zamanı yanıt hızı ve akıcılığı

Kullanıcılar, web sayfasının yüklenmesi tamamlandıktan sonra zamanlarının çoğunu bu sayfada geçirir. Bu nedenle, yavaş etkileşimler ve sarsıntılı geçişler, kullanıcı deneyimine ilk yüklemenin yavaş olması kadar zarar verebilir.

Değerlendirmelerimizde, modeller genellikle Lighthouse gibi araçlarda yıllardır tanıtılan klasik yükleme süresi en iyi uygulamalarını takip eder ve genellikle belirgin ağır döngüleri bir Web Worker'a devretmeyi bilir. Ancak INP'yi optimize etmek için gerekli olan ana iş parçacığı yanıt verme hızı konusunda sürekli olarak zorlanıyorlar: düzen çalışmasını izole etme, görevleri önceliğe göre planlama ve ana iş parçacığı dışında oluşturma işi yapan yeni HTML ve CSS özelliklerinden yararlanma.

Örneğin, temsilcilerin genellikle şunları yaptığını görüyoruz:

• Tarayıcı desteklediğinde, kullanıcı tarafından görülebilen görevleri scheduler.postTask() ile önceliklendirmek veya scheduler.yield() ile görev devamlılığından yararlanmak yerine arka plan veya düşük öncelikli işler için özel setTimeout() sıraları oluşturma.
• content-visibility:auto ve contain-intrinsic-size uygulamadan karmaşık düzenler (yoğun veri tabloları gibi) oluşturmak. Bu durumda, kullanıcı etkileşimlerinden sonraki güncellemeler tam sayfa yeniden akışı tetikler.
• content-visibility:hidden (inert ile eşlenmiş) yerine display:none kullanarak etkin olmayan SPA görünümlerini gizleme (veya kaldırma). İlk yöntem, önbelleğe alınmış oluşturma durumunu yok eder. Bu nedenle, geri geçiş tam düzeni ve boyamayı tetikler.
• content-visibility:auto öğesini contentvisibilityautostatechange etkinliğiyle eşlemek yerine (mümkün olduğunda) Intersection Observer geri çağırmalarıyla ekran dışı <canvas> animasyonlarını ve arka plan döngülerini duraklatmak, öğeler görünür hale gelmeden önce tarayıcının önceden oluşturma marjını kaçırır.
• Mümkün olduğunda CSS kaydırma durumu sorguları yerine (Intersection Observer yedekleriyle) sürekli düzen hesaplamalarını zorunlu kılan scroll etkinlik işleyicileri kullanarak kaydırma imkanı sağlayan kullanıcı arayüzü ipuçları oluşturma.

8. Performans: Düzen kaymaları ve görsel titreme

Beklenmedik düzen kaymaları, okuyucunun odağını bozar ve kullanıcıların beklenmedik düğmeleri tıklamasına neden olabilir. Bu durum bazen geri alınamaz sonuçlara yol açabilir.

Modeller, düzen kaymalarını önlemek için standart <img> öğelerine width ve height özelliklerini güvenilir bir şekilde ekler. Ancak <video> öğelerinden, web yazı tipi değişikliklerinden, mobil tarayıcı araç çubuklarından ve istemci tarafı denemelerden kaynaklanan diğer yaygın düzen kayması ve boyama öncesi yanıp sönme kaynaklarını sürekli olarak gözden kaçırır. Bunların tümü CLS'yi etkileyebilir.

• <video> öğelerinde açık width ve height özelliklerini atlama (böylece yüklenmemiş oynatıcılar varsayılan olarak 300×150 olur ve meta veriler yüklendikten sonra düzeni değiştirir) veya aspect-ratio ve object-fit özelliklerini doğrudan medya öğelerinde ayarlamak yerine medya sarmalayıcı öğelerini biçimlendirme.
• Web yazı tipleri, font-size-adjust olmadan sistem yedek yazı tipleriyle eşleştiriliyor. Bu durum, web yazı tipleri değiştirildiğinde paragrafların ve başlıkların görünür şekilde yeniden akmasına neden oluyor.
• Dinamik veya küçük görüntü alanı birimleri (dvh, svh) yerine statik vh birimleriyle boyutlandırılan hero bölümleri ve tam ekran düzenleri, mobil tarayıcı araç çubukları genişleyip daraldıkça içeriğin atlamasına neden olur.
• Mümkün olduğunda blocking="render" içeren komut dosyaları kullanmak yerine, istemci tarafı A/B testleri için eski opacity:0 veya visibility:hidden titreme önleyici snippet'ler ve çok saniyeli zaman aşımları ile içeriği gizleme (LCP'yi geciktirme ve görünmez öğeleri tıklanabilir bırakma).
• rel="expect" ve blocking="render" ile ilk oluşturmayı bekletmek yerine, kritik ekranın üst kısmındaki işaretleme ayrıştırılmadan önce dokümanlar arası görünüm geçişlerini tetiklemek, yarı ayrıştırılmış öğelerin geçişin ortasında görünmesine neden olur.

9. Güvenlik: DOM XSS savunmaları ve HTML temizleme

Tek bir siteler arası komut dosyası çalıştırma (XSS) kusuru, saldırganın kullanıcılarınızın tarayıcılarında rastgele kod çalıştırmasına, oturum verilerini çalmasına veya kullanıcılar adına işlem yapmasına olanak tanır. Bu nedenle, güvenli HTML temizleme, Güvenilir Türler ve katı CSP'ler gibi tarayıcı tarafından uygulanan savunmalar çok önemlidir.

Modeller, bu güvenlik endişelerini proaktif olarak nadiren ele alır. Örneğin, tam değerlendirme paketimizdeki tüm görevlerde modeller, açık bir istem olmadan İçerik Güvenliği Politikası (İGP) veya kökler arası erişime kapalı başlığı eklemedi.

İstemler doğrudan güvenlik talep ettiğinde bile, rehberlik edilmeyen modeller güvenlik kontrollerimizin yarısından fazlasında başarısız olmaya devam ediyor ve kırılgan özel yedeklere veya eksik politikalara başvuruyor. DOM XSS'ye karşı savunma yaparken bu durum açıkça görülür:

• Yerel temizleme kullanılamadığında DOMPurify gibi onaylanmış bir kitaplık kullanmak yerine, setHTML() yedek olarak veya Güvenilir Türler politikasının içinde, elle oluşturulmuş DOMParser izin verilenler listesi temizleyicileri yazma.
• Desteklendiğinde yerel setHTML() kullanmak ve DOMPurify'ı yalnızca yedek olarak geç yüklemek yerine her sayfa yüklemesinde DOMPurify'ı istekli bir şekilde paketleme.
• Havuz yaptırımını ihlal eden, izin veren (input) => input geçişli Güvenilir Türler politikaları kaydediliyor.
• Satır içi komut dosyalarını SHA-256 karmalarıyla kilitlemek yerine statik sayfalardaki Güvenilir Türler'i ana makine izin verilenler listesi script-src 'self' CSP'leriyle eşleme.
• Tek seferlik rastgele sayı tabanlı script-src İçerik Güvenliği Politikaları yapılandırılırken 'strict-dynamic' ve 'report-sample' atlanıyor.

10. Güvenlik: Geçiş anahtarıyla oturum açma, yeniden kimlik doğrulama ve kimlik bilgisi yaşam döngüsü

Geçiş anahtarları, kullanıcılar için güvenliği ve işletmeler için oturum açma dönüşümlerini artırır ancak bunları uygulamak (temsilcilerin yardımıyla bile) zordur.

WebAuthn'de, değerlendirmelerimizde yönlendirilmemiş modellerin neredeyse tamamen kaçırdığı belirli serileştirme, özellik algılama ve sinyal API'leri bulunur. Bir yapay zeka modelinden geçiş anahtarı ile oturum açma, yönetim veya ek kimlik doğrulama eklemesini isterseniz genellikle manuel bayt kodlama yardımcıları yazar, yönetim kullanıcı arayüzündeki özellik kontrollerini atlar veya kimlik bilgilerini şifre yöneticileriyle senkronize etmez:

• parseCreationOptionsFromJSON(), parseRequestOptionsFromJSON() ve credential.toJSON() gibi yerleşik serileştirme yöntemlerini kullanmak yerine, birincil yol veya yedek standart kod olarak atob() ve btoa() Base64URL dönüştürme yardımcılarını manuel olarak oluşturma.
• Sunucu bilinmeyen bir kimlik bilgisi kimliği bildirdiğinde oturum açma sırasında PublicKeyCredential.signalUnknownCredential() atlanıyor ve silinen veya iptal edilen geçiş anahtarları kullanıcıların şifre yöneticilerinde kalıyor.
• Geçiş anahtarı oluşturma ve yönetme kullanıcı arayüzü oluşturulmadan önce PublicKeyCredential.getClientCapabilities() atlanıyor.
• Geçiş anahtarı ile yeniden kimlik doğrulama istekleri başlatılırken AbortController ve AbortSignal parametreleri atlanıyor.
• Basitleştirilmiş oturum açma istemleri için uiMode:"immediate" yerine kaynak denemesi mediation:"immediate" seçeneğini iletme.

Bu boşlukları kapatın

Bu 10 alan, kapsamlı bir liste olmaktan uzaktır ve belirli bilgi eksikliklerinin zaman içinde değişmesini bekliyoruz. Modeller bu açığı kapatacak ve web platformu gelişmeye devam edecek.

İyi haber şu ki Modern Web Rehberi tüm bu eksiklikleri gideriyor ve platformla birlikte gelişmeye devam edecek.

Modern Web Rehberi'ni kullanmaya başlamak için aşağıdaki komutu çalıştırın veya temsilcinizin eklenti pazarında arayın:

npx modern-web-guidance@latest install

Modellerin web geliştirme ile ilgili başka görevlerde hata yaptığını gördünüz mü? Bunu bilmek isteriz. Modern Web Rehberi GitHub deposunda sorun kaydı açın veya projeye katkıda bulunarak diğer geliştiriciler için bu eksiklikleri gidermemize yardımcı olun.