Yapay Zekanın Ürettiği Arayüzler Varsayılan Olarak Erişilebilir Değil
AI araçlarının ürettiği React bileşenleri görsel olarak kusursuz ama erişilebilirlik ağacında boş; beş katmanlı bir denetim sistemi çözümü açıklıyor.
Claude Code, Cursor veya Copilot gibi araçlarla saniyeler içinde üretilen React bileşenleri görsel olarak kusursuz görünse de, tarayıcının erişilebilirlik ağacında genellikle role generic, name none şeklinde görünür. Bu durum ekran okuyucu, klavye ve sesli kontrol kullanıcıları için bileşeni fiilen yok sayar hale getirir. Sorunun kökeni, LLM'lerin görsel çıktıyı optimize ederken DOM'un semantik katmanına neredeyse hiç bilgi eklememesidir; eğitim verisindeki div-ağırlıklı kod, görsel odaklı geri bildirim döngüleri ve token ekonomisi bu eğilimi pekiştirir.
Bir örnek bileşen üzerinden yapılan analiz, yirmi dokuz satırlık bir kod parçasında on ayrı erişilebilirlik hatası ortaya koyuyor: eksik landmark'lar, sahte butonlar, klavye etkileşimi olmayan kontroller, aria-expanded gibi durum bilgisinin bulunmaması ve etiketsiz ikonlar. Vercel'in v0'ı gibi Radix tabanlı shadcn/ui bileşenleri üreten özel araçlar bu sorunu büyük ölçüde çözse de, geliştiricilerin günlük kullandığı genel amaçlı araçlar hâlâ aynı div çorbasını üretiyor.
Çözüm, semantik doğruluğu her aşamada zorunlu kılan çok katmanlı bir denetim sistemi kurmaktan geçiyor: iş akışına gömülü prompt kısıtlamaları, statik analiz, çalışma zamanı testleri, CI entegrasyonu ve erişilebilir bileşen soyutlamaları. Mühendisler için bu, AI çıktısını görsel olarak değil, erişilebilirlik ağacı üzerinden doğrulamanın artık isteğe bağlı değil zorunlu bir mühendislik pratiği olduğu anlamına geliyor.