Yapay zeka ajanları artık web sitelerini insanlar gibi değil, makineye özel bir veri yapısı olan erişilebilirlik ağacı (accessibility tree) üzerinden okuyor. Ancak Search Engine Journal’ın 24 Haziran 2026’da yayımladığı analize göre bu ağaç giderek bozuluyor ve hem ekran okuyucu kullanıcıları hem de AI ajanları için siteler okunamaz hale geliyor. Bu rehberde, erişilebilirlik ağacının ne olduğunu, neden kritik olduğunu ve adım adım nasıl onarılacağını ele alacağız.
Erişilebilirlik Ağacı Nedir?
Erişilebilirlik ağacı (accessibility tree), tarayıcının DOM’u alıp ekran okuyucular ve yardımcı teknolojiler için anlamlı bir yapıya dönüştürdüğü soyutlama katmanıdır. Her HTML öğesi, rolü, adı, durumu ve değeriyle birlikte bu ağaca bir düğüm olarak eklenir. Örneğin bir <button> öğesi “button” rolüyle, “Gönder” adıyla ve “disabled” durumuyla ağaçta yer alır.
2026 itibarıyla bu ağaç yalnızca ekran okuyucular için değil, aynı zamanda ChatGPT, Google Gemini, Microsoft Copilot ve Anthropic Claude gibi AI ajanlarının web sitelerini gezmesi için de birincil veri kaynağı haline geldi. AI ajanları, bir kullanıcı adına rezervasyon yaparken, form doldururken veya bilgi ararken bu ağaca dayanarak sayfanın yapısını anlamaya çalışır. Eğer ağaç bozuksa, AI ajanı yanlış düğmeye tıklayabilir, formu eksik doldurabilir veya hiç işlem yapamayabilir.
AI Ajanları Neden Erişilebilirlik Ağacını Kullanıyor?
Geleneksel web kazıma (scraping) yöntemleri, HTML kaynağını doğrudan parse eder ve CSS seçicilerle veriyi çeker. Ancak modern web uygulamaları dinamik JavaScript ile çalışıyor; içerikler modal pencerelerde, shadow DOM’larda ve lazy-load edilen bileşenlerde gizli. AI ajanları için en güvenilir yol, tarayıcının zaten işlenmiş ve anlamlı hale getirdiği erişilebilirlik ağacını kullanmaktır. OpenAI’ın 25 Haziran 2026’da yayımladığı “How agents are transforming work” başlıklı raporunda da belirtildiği gibi, ajan tabanlı sistemler sayfanın görsel render’ına değil, semantik yapısına güveniyor.
Search Engine Journal’ın analizine göre sorun şu: Geliştiriciler erişilebilirlik ağacını ekran okuyucu kullanıcıları için bir “ekstra” olarak görüp ihmal ediyorlar. Oysa artık bu ağaç, AI ajanlarının sitenizle etkileşim kurmasının da temeli. Bozuk bir erişilebilirlik ağacı, hem erişilebilirlik açısından hem de AI entegrasyonu açısından sitenizi kullanılamaz kılıyor.
Adım 1: Mevcut Erişilebilirlik Ağacını İnceleyin
Chrome DevTools’u açın (F12 veya Sağ tık > İncele) ve Elements panelinin sağ tarafındaki Accessibility sekmesine geçin. Bu sekme, seçili öğenin erişilebilirlik ağacındaki karşılığını gösterir. Eğer bir düğme “button” rolü yerine “generic” rolüyle görünüyorsa, bir sorun var demektir. Benzer şekilde, bir form alanının adı (name) boşsa, AI ajanı bu alanın ne için kullanıldığını anlayamaz.
Alternatif olarak Firefox’un Accessibility Inspector’ını kullanabilirsiniz. Firefox, ağacı tablo görünümünde sunar ve her düğümün rol, ad, durum ve değerlerini yan yana gösterir. Bu sayede eksik etiketleri ve yanlış rolleri hızlıca tespit edebilirsiniz.
Adım 2: Semantik HTML Kullanın
Erişilebilirlik ağacının sağlıklı olması için ilk kural: doğru HTML öğelerini kullanın. Bir düğme için <div onclick="..."> yerine <button> kullanın. Bir başlık için <span class="title"> yerine <h2> kullanın. Semantik HTML, tarayıcının doğru rolleri otomatik olarak atamasını sağlar ve yapay zeka ajanları bu rolleri doğrudan okuyabilir.
Sayfanızda <main>, <nav>, <article>, <section> ve <footer> gibi landmark öğelerini kullanın. Bu öğeler, hem ekran okuyucu kullanıcılarına hem de AI ajanlarına sayfanın yapısını anında gösterir. Search Engine Journal’ın raporunda, landmark öğesi olmayan sitelerin AI ajanları tarafından yanlış anlaşıldığı vurgulanıyor.
Adım 3: ARIA Etiketlerini Doğru Kullanın
ARIA (Accessible Rich Internet Applications) öznitelikleri, semantik HTML’nin yetersiz kaldığı durumlarda erişilebilirlik ağacını zenginleştirir. Ancak yanlış kullanıldığında ağacı daha da bozabilir. İlk kural: ARIA’yı yalnızca gerektiğinde kullanın. Eğer <button> zaten doğru rolü veriyorsa, role="button" eklemek gereksizdir ve bazen çakışmalara yol açar.
Özellikle şu ARIA özniteliklerine dikkat edin: aria-label veya aria-labelledby ile her interaktif öğeye açıklayıcı bir ad verin. aria-describedby ile ek bağlam sağlayın. Dinamik içerik güncellemelerinde aria-live kullanın, böylece AI ajanları ve ekran okuyucular değişikliklerden haberdar olur. Ancak aria-hidden="true" kullanırken dikkatli olun: bu öznitelik, öğeyi erişilebilirlik ağacından tamamen kaldırır ve AI ajanı o öğeyi göremez.
Adım 4: Form Etiketlemesini Düzeltin
Formlar, AI ajanlarının en sık etkileşim kurduğu öğelerdir. Bir AI ajanı “rezervasyon yap” talimatı aldığında, form alanlarını doldurması gerekir. Ancak her alanın ne için kullanıldığını anlamazsa, yanlış veri girer. Her form alanı için <label> öğesini kullanın ve for özniteliğiyle alanı ilişkilendirin. Placeholder metinları label yerine geçmez; erişilebilirlik ağacında bir ad (name) olarak görünmezler.
Özellikle şu kalıbı uygulayın:
<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" required autocomplete="email">
Bu kalıp, hem ekran okuyucu kullanıcılarına alanın amacını söyler hem de AI ajanlarına “bu alan e-posta için” bilgisini açıkça iletir. autocomplete özniteliği de AI ajanlarının ve tarayıcıların alan türünü anlamasına yardımcı olur.
Adım 5: Dinamik İçerik ve AI Ajanları
Modern web uygulamalarında içerikler anlık olarak yüklenir ve değişir. Modal pencereler açılır, bildirimler belirir, formlar hata mesajları gösterir. AI ajanları bu değişiklikleri yakalamak için erişilebilirlik ağacındaki güncellemelere güvenir. aria-live="polite" veya aria-live="assertive" ile dinamik bölgeleri işaretleyin. Böylece bir bildirim çıktığında, AI ajanı ve ekran okuyucu bunu anında algılar.
Modal pencereler için role="dialog" ve aria-modal="true" kullanın. Focus yönetimini doğru uygulayın: modal açıldığında odak modal içine taşınmalı, kapatıldığında tetikleyici öğeye geri dönmelidir. AI ajanları odak yönetimine de güvenir; aksi halde modal dışındaki öğelerle etkileşime girmeye çalışabilir.
Adım 6: Otomatik Test Araçlarıyla Doğrulayın
Erişilebilirlik ağacını manuel olarak incelemek yorucu olabilir. Otomatik test araçları süreci hızlandırır. Google Chrome’un yerleşik Accessibility sekmesinin yanı sıra, axe DevTools eklentisi en kapsamlı ücretsiz araçlardan biridir. axe, sayfanızı tarayıp erişilebilirlik ağacındaki ihlalleri listeler ve her biri için düzeltme önerisi verir.
WAVE (Web Accessibility Evaluation Tool), sayfanın görsel bir haritasını çıkararak erişilebilirlik ağacındaki eksikleri renk kodlarıyla gösterir. Google’ın NAI (Network for Accessibility Information) aracı ve Microsoft Copilot’un erişilebilirlik denetimi özellikleri de 2026 itibarıyla erişilebilirlik ağacı analizini destekliyor. Bu araçlarla sayfanızı tarayın ve tüm ihlalleri giderin.
Adım 7: AI Ajanı Perspektifinden Test Edin
Otomatik test araçları çoğu sorunu yakalar, ancak AI ajanlarının deneyimini tam olarak simüle edemez. Son adım olarak, gerçek bir AI ajanıyla sitenizi test edin. ChatGPT’nin veya Google Gemini’nin web tarama özelliğini kullanarak sitenizde belirli bir görev tamamlamasını isteyin: “Üyelik formunu doldur”, “Sepete ürün ekle”, “İletişim sayfasını bul” gibi. AI ajanının hangi adımlarda zorlandığını gözlemleyin; bu noktalar genellikle erişilebilirlik ağacının bozuk olduğu yerlerdir.
Bu test aynı zamanda sitenizin AI arama motorları (AI Overviews, Perplexity, ChatGPT Search) tarafından nasıl indekslendiğini de gösterir. AudioEye’nin 25 Haziran 2026’da yayımladığı 2026 Digital Accessibility Index raporuna göre, AI arama motorları kullanıcıları en az erişilebilir sayfalara yönlendirme eğiliminde. Sitenizin erişilebilirlik ağacı sağlamsa, AI aramalarında daha doğru ve daha üst sıralarda görünme şansınız artar.
Adım 8: Sürekli İzleme ve CI/CD Entegrasyonu
Erişilebilirlik ağacı bir kez tamir edildiğinde kalıcı olarak sağlıklı kalmaz. Her kod değişikliği, yeni bileşen veya üçüncü taraf eklenti ağacı bozabilir. Bu nedenle erişilebilirlik testini CI/CD süreçlerinize entegre edin. axe-core ve Pa11y gibi araçlar komut satırından çalışır ve her build’de erişilebilirlik denetimi yapar. Bir ihlal tespit edildiğinde build’i durdurarak bozuk kodun canlıya çıkmasını engelleyebilirsiniz.
Lighthouse CI da erişilebilirlik skoru için bir eşik belirlemenize olanak tanır. Örneğin erişilebilirlik skoru 90’ın altına düştüğünde build başarısız sayılabilir. Bu yaklaşım, erişilebilirlik ağacının uzun vadede sağlıklı kalmasını sağlar ve hem insan kullanıcılar hem de AI ajanları için sitenizin kullanılabilirliğini garanti altına alır.
Sonuç
Erişilebilirlik ağacı artık yalnızca ekran okuyucu kullanıcılarını ilgilendiren bir konu değil. AI ajanları, AI arama motorları ve otonom web etkileşim sistemleri hep aynı veri yapısına güveniyor. Search Engine Journal’ın vurguladığı gibi, bu ağaç bozulduğunda yalnızca erişilebilirlik değil, AI entegrasyonu da çöküyor. Yukarıdaki sekiz adımı uygulayarak sitenizi hem erişilebilirlik standartlarına hem de AI ajanları için uygun hale getirebilirsiniz. Unutmayın: erişilebilir bir site, aynı zamanda AI-dostu bir sitedir.
Kaynaklar
- Search Engine Journal — The Accessibility Tree Is How AI Agents Read Your Site & It’s Breaking (24 Haziran 2026)
- OpenAI — How Agents Are Transforming Work (25 Haziran 2026)
- PR Newswire / AudioEye — 2026 Digital Accessibility Index (25 Haziran 2026)
- W3C WAI — ARIA Standartları
- MDN — Accessibility Tree
- axe DevTools — Erişilebilirlik Test Aracı