AI ajanları için web sitesinde erişilebilirlik neden önemli?

AI ajanları için web sitesinde erişilebilirlik önemlidir; çünkü ajanlar sayfaları yalnızca görsel olarak değil, DOM ve erişilebilirlik ağacı üzerinden de yorumlar.

Bir kullanıcı ekranda başlığı, fiyatı veya gönder butonunu görebilir. Ancak AI ajanı bu bilgiyi HTML etiketlerinden, metin ilişkilerinden ve form rollerinden çıkarır. Bu yapı hatalıysa, içerik sayfada görünse bile ajan bilgiyi yanlış anlayabilir.

Erişilebilirlik bu nedenle yalnızca görme, işitme veya motor engelleri olan kullanıcılarla ilgili değildir. Semantik HTML, açık etiketler ve klavye ile çalışabilen bileşenler, makine yorumlamasını da kolaylaştırır.

Google’ın AI arama optimizasyonu rehberi, içeriklerin insanlar ve otomatik sistemler tarafından anlaşılabilir olmasını birlikte ele alır. Rehber, özel bir “AI etiketi” eklemekten çok, açık yapı, erişilebilir içerik ve doğru teknik uygulama gerektirdiğini gösterir.

Bu yaklaşım, arama görünürlüğünü garanti etmez. Ancak bir ajanın ürün karşılaştırması yapması, form doldurması veya iletişim bilgisi bulması için gerekli teknik zemini güçlendirir.

Aşağıdaki bölümlerde konu; DOM, başlık hiyerarşisi, formlar, butonlar, ürün bilgileri, JavaScript ve test adımları üzerinden incelenmektedir.

AI ajanları web sitesini nasıl okur?

AI ajanları web sitelerini okurken görünür metnin yanında DOM ağacını, HTML rollerini ve etkileşim durumlarını değerlendirir.

DOM, tarayıcının HTML belgesinden oluşturduğu belge ağacıdır. Başlıklar, paragraflar, bağlantılar, formlar ve butonlar bu ağaçta farklı düğümler olarak yer alır. Ajan, sayfanın görsel tasarımını her zaman insan gibi algılamaz.

Erişilebilirlik ağacı ise yardımcı teknolojilerin kullanması için oluşturulan daha sade bir temsil sunar. Bir düğmenin adı, rolü, durumu ve hangi metinle ilişkili olduğu burada önem kazanır. “Sepete ekle” metni bulunan bir buton, yalnızca ikon içeren bir öğeden daha anlaşılırdır.

Örneğin kart tasarımında ürün adı büyük puntoyla görünür olabilir. Fakat bu ad bir <h3> veya metin düğümü olarak tanımlanmamışsa, ajan ürünün adını fiyatından ayıramayabilir. Görsel düzen, makine için tek başına yeterli değildir.

Yanlış: Ürün adı yalnızca görsel bir başlık bileşeninde tutulur. Doğru: Ürün adı metin olarak yazılır, uygun başlık düzeyiyle işaretlenir ve ürün verisiyle ilişkilendirilir.

Bu durum, AI ajanlarının her sayfada aynı şekilde başarılı olacağı anlamına gelmez. Karmaşık tek sayfa uygulamalarında içerik, kullanıcı etkileşimi gerçekleşmeden DOM’a eklenmeyebilir. Ajanın eriştiği ortam JavaScript’i çalıştırmıyorsa, sonradan üretilen bilgi görünmeyebilir.

Bu nedenle ilk teknik soru şudur: Sayfanın temel amacı ve ana bilgileri, tarayıcı tarafından oluşturulan HTML ve erişilebilirlik ağacında açıkça bulunuyor mu?

Semantik HTML neden AI ajanları için önemlidir?

Semantik HTML, sayfadaki her içeriğe ve işleve anlamına uygun bir HTML öğesi verilmesini sağlar.

<button>, <a>, <nav>, <main> ve <form> gibi öğeler, hem tarayıcıya hem de yardımcı teknolojilere işlev bildirir. Aynı bilgiyi yalnızca <div> etiketleriyle oluşturmak mümkündür; fakat bu yaklaşım ek anlamlandırma gerektirir.

Bir bağlantı başka bir sayfaya götürür. Bir buton mevcut sayfada işlem başlatır. Bu ayrım, insan kullanıcı için bazen görünür tasarımla anlaşılabilir. AI ajanı ise doğru rol tanımlanmadığında ne olacağını tahmin etmek zorunda kalır.

Örneğin “Teklif al” metni bir bağlantıysa, hedef URL açıkça bulunmalıdır. Aynı metin bir butonsa, tıklama sonrası yapılacak işlem erişilebilir ad ve durum bilgisiyle tanımlanmalıdır. Bu iki öğeyi yalnızca CSS ile aynı görünür hale getirmek sorun değildir; HTML rollerini karıştırmak sorundur.

Semantik yapı ayrıca sayfa bölümlerini de ayırır. <main> ana içeriği, <nav> gezinmeyi, <footer> alt bilgiyi belirtir. Böylece ajan, menü bağlantılarını ürün açıklamasıyla karıştırmadan tarayabilir.

Semantik HTML her zaman tek başına yeterli değildir. Özel bir takvim, filtre veya modal bileşeni, doğru ARIA kullanımı ve klavye davranışı gerektirebilir. Gereksiz ARIA eklemek de hataya yol açabilir.

Temel kural basittir: Önce doğru HTML öğesi seçilir, yalnızca gerektiğinde ARIA ile ek bilgi verilir. Bu yaklaşım, kodu sadeleştirir ve test edilecek durum sayısını azaltır.

Başlık hiyerarşisi AI ajanlarının içerik ilişkisini nasıl etkiler?

Başlık hiyerarşisi, AI ajanının sayfadaki ana konu, alt konu ve içerik ilişkilerini belirlemesine yardımcı olur.

Bir sayfada genellikle tek bir ana başlık bulunur. Bunun altında konuya bağlı <h2> başlıkları, gerektiğinde bu bölümlere bağlı <h3> başlıkları yer alır. Başlık seçimi yazı boyutuna göre değil, içerik seviyesine göre yapılmalıdır.

Örneğin bir hizmet sayfasında “Web tasarım hizmetleri” ana başlıksa, “Süreç”, “Teslim kapsamı” ve “Sık sorulan sorular” alt başlık olabilir. “Mobil uyumluluk” ise “Teslim kapsamı” altında açıklanıyorsa, <h3> olarak kullanılabilir.

Başlıkların yalnızca görsel büyüklük için seçilmesi, içerik ağacını bozar. Bir tasarımcı küçük görünmesi için <h4> seçebilir. Ancak bu başlık, üstünde ilgili <h2> bulunmadan kullanılırsa ajanın konu ilişkisini anlaması zorlaşır.

Başlık metni de somut olmalıdır. “Çözümlerimiz” başlığı, “Kurumsal web sitesi tasarımı” kadar açıklayıcı değildir. Ajan bir sayfadan bilgi aktarırken, açık başlıkları daha az yorumla eşleştirir.

Başlık hiyerarşisi görsel tasarımı kısıtlamaz. CSS ile herhangi bir başlık seviyesi istenen boyuta getirilebilir. Sorun, görünümün ihtiyaçlarına göre anlamsal seviyenin değiştirilmesidir.

Başlık yapısını kontrol etmek için önce sayfanın metin görünümünü kapatıp yalnızca başlık listesini inceleyebilirsiniz. Liste, sayfanın ne anlattığını baştan sona gösterebiliyorsa yapı büyük ölçüde anlaşılırdır. Konu atlamaları varsa içerik ve kod birlikte düzeltilmelidir.

Formlar AI ajanları tarafından nasıl daha doğru doldurulur?

Formlar, her alanın açık etiketi, doğru türü, zorunluluk durumu ve hata mesajı bulunduğunda AI ajanları tarafından daha doğru işlenir.

Bir form alanının yanında yer alan görsel metin, teknik olarak etikete bağlı değilse yeterli değildir. <label for="email"> ile id="email" eşleşmesi, alanın ne istediğini açıkça belirtir. Placeholder metni, etiketin yerine kullanılmamalıdır.

Alan türü de önemlidir. E-posta için type="email", telefon için uygun bir telefon alanı, tarih için erişilebilir bir tarih kontrolü tercih edilmelidir. Böylece ajan, kullanıcıdan hangi formatta veri beklenmesi gerektiğini anlayabilir.

“Bilgi” veya “Değer” gibi genel alan adları makine yorumlamasını zorlaştırır. “Şirket adı”, “Yetkili kişinin e-posta adresi” ve “Tercih edilen görüşme tarihi” daha açıklayıcıdır. Form alanı sayısı azaltılabiliyorsa, gereksiz veri istemek de önlenmelidir.

Hata mesajı yalnızca kırmızı kenarlıkla gösterilmemelidir. Hangi alanın hatalı olduğu, hatanın nedeni ve nasıl düzeltileceği metinle yazılmalıdır. Hata durumu ilgili alana programatik olarak bağlanırsa ajan düzeltme adımını daha kolay izler.

Bir formun AI ajanı tarafından doldurulması her zaman istenmeyebilir. Kimlik doğrulama, ödeme veya hassas sağlık bilgisi isteyen formlarda güvenlik ve kullanıcı onayı önceliklidir. Erişilebilir yapı, otomatik işlem için sınırsız izin anlamına gelmez.

Formları incelerken aşağıdaki kontrol listesini kullanabilirsiniz:

• Her alanın görünür ve programatik etiketi var mı?
• Zorunlu alanlar metin veya uygun özelliklerle belirtiliyor mu?
• Alan türü, istenen veriyle eşleşiyor mu?
• Hata mesajı alanla ilişkilendiriliyor mu?
• Form klavye ile baştan sona kullanılabiliyor mu?
• Gönderim sonrası başarı veya hata durumu duyuruluyor mu?

Butonlar ve bağlantılar AI ajanlarının işlem yapmasını nasıl etkiler?

Buton ve bağlantıların doğru seçilmesi, AI ajanının bir öğeyi bilgi kaynağı mı yoksa işlem tetikleyicisi mi olarak yorumlayacağını belirler.

Bir bağlantı, kullanıcıyı belirli bir URL’ye götürür. Ürün detayına, fiyat sayfasına veya iletişim sayfasına giden öğeler <a> etiketiyle oluşturulmalıdır. Bir buton ise form gönderir, filtreyi uygular, modal açar veya sepete ürün ekler.

Her iki öğeye de “Tıklayın” yazmak yeterli değildir. Ajanın sayfada birden fazla “Tıklayın” metni görmesi, hangi işlemin yapılacağını belirsizleştirir. “Ürün detayını aç”, “Teklif formunu gönder” veya “Filtreyi temizle” gibi adlar daha işlevseldir.

İkon butonlarında erişilebilir ad zorunludur. Sadece büyüteç, çarpı veya üç nokta ikonu bulunan bir butonun ne yaptığı metinle tanımlanmalıdır. Bu metin görsel olarak gizlenebilir; ancak erişilebilirlik ağacında bulunmalıdır.

Dinamik bileşenlerde durum bilgisi de korunmalıdır. Menü açıldığında açık-kapalı durumu, akordeon genişlediğinde görünürlük durumu ve yükleme başladığında bekleme durumu doğru aktarılmalıdır.

Butonların çalışması için yalnızca onclick olayına güvenmek risklidir. Klavye desteği bulunmuyorsa, yardımcı teknoloji kullanan kişi işlemi başlatamaz. AI ajanı da aynı etkileşim sınırında kalabilir.

Bağlantı ve butonları test etmek için her öğenin adını, rolünü, hedefini ve işlem sonrası durumunu ayrı ayrı kaydedin. Aynı metne sahip öğeler farklı işlemler yapıyorsa, metinleri özelleştirin. Bu yöntem, özellikle ürün listeleri ve kampanya sayfalarında hataları görünür kılar.

Ürün, fiyat ve hizmet bilgileri nasıl yapılandırılmalıdır?

Ürün ve hizmet bilgileri, ad, açıklama, fiyat, stok veya uygunluk durumu gibi alanları birbirinden açıkça ayıracak şekilde yapılandırılmalıdır.

Bir ürün kartında fiyatın yalnızca görsel olarak büyük yazılması yeterli değildir. Para birimi, dönem ve vergi bilgisi gerekiyorsa metinde belirtilmelidir. “1.500” ifadesi, bunun Türk lirası mı, aylık mı veya tek seferlik mi olduğunu açıklamaz.

Hizmet sayfalarında da kapsam ve sınırlamalar yazılı olmalıdır. “Web sitesi kurulumu” ifadesi; sayfa sayısı, içerik girişi, bakım, alan adı veya hosting dahil olup olmadığını tek başına göstermez. Ajanın doğru özet üretmesi için bu ayrımlar açık metinle verilmelidir.

Yapısal veri, ürün ve hizmet bilgilerini destekleyebilir. Ancak yapılandırılmış veri, sayfada kullanıcıya gösterilmeyen bilgileri eklemek için kullanılmamalıdır. İşaretlenen fiyat, stok ve açıklama görünür içerikle tutarlı olmalıdır.

Tablo biçimi, karşılaştırma yapan ajanlar için yararlı olabilir. Sütun başlıkları ve satır ilişkileri doğru tanımlandığında, paketlerin farkı daha kolay çıkarılır. Sadece renk kullanarak “dahil” ve “hariç” ayrımı yapmak ise belirsizlik yaratır.

Bu bilgilerin her zaman otomatik olarak zengin sonuç üreteceği söylenemez. Arama motoru ve ajanlar farklı kurallarla çalışır. Ama açık alanlar, insan ve makine okuması arasındaki yorumu azaltır.

JavaScript ve CSS ile eklenen içerik AI ajanları tarafından görülür mü?

JavaScript ile sonradan eklenen içerik bazı sistemler tarafından görülebilir, ancak bu durum her AI ajanı ve erişim ortamı için garanti edilemez.

Tarayıcı sayfayı yüklediğinde JavaScript çalışır ve ürün listesi, fiyat veya soru-cevap alanı DOM’a eklenebilir. Ajan bu işlemi destekliyorsa içeriği okuyabilir. Desteklemiyorsa ilk HTML yanıtında bulunmayan bilgiye erişemeyebilir.

Bu nedenle temel içerik, mümkün olduğunda sunucu tarafında oluşturulmuş HTML içinde yer almalıdır. Özellikle sayfanın ana başlığı, hizmet açıklaması, fiyat bilgisi, form etiketleri ve temel iletişim bilgileri JavaScript olmadan da anlaşılabilir olmalıdır.

CSS ile gizlenen metinler konusunda da yöntem önemlidir. display:none veya visibility:hidden ile gizlenen içerik çoğu erişilebilirlik ağacında bulunmaz. Görsel tasarım için kullanılan ekran dışı metin teknik olarak farklı davranabilir.

Google’da CSS ile eklenen metinlerin indekslenmesi konusunda daha ayrıntılı teknik değerlendirme için Google’da CSS ile eklenen metin indekslenir mi? rehberine bakabilirsiniz. Buradaki temel ilke, kritik bilgiyi görsel hilelere bırakmamaktır.

JavaScript tamamen terk edilmemelidir. Filtreleme, hesaplama ve kişiselleştirme gibi işlevler JavaScript gerektirebilir. Ancak her işlev için başlangıç durumunun, butonunun ve sonuç mesajının erişilebilir olması gerekir.

Test sırasında sayfayı üç şekilde kontrol edin: JavaScript açıkken, JavaScript devre dışıyken ve ekran okuyucu ağacında. Üç görünüm arasında kritik içerik kayboluyorsa, ajanın sayfayı eksik yorumlama ihtimali artar.

WCAG 2.2 AA uyumu AI ajanları için yeterli midir?

WCAG 2.2 AA uyumu güçlü bir temel sağlar, ancak AI ajanlarının her işlemi doğru yapacağını tek başına garanti etmez.

WCAG; algılanabilirlik, kullanılabilirlik, anlaşılabilirlik ve sağlamlık ilkeleri üzerinden erişilebilirliği değerlendirir. Klavye kullanımı, renk kontrastı, odak göstergesi, hata tanımlama ve isim-rol-değer bilgisi bu kapsamda önemlidir.

AI ajanları açısından özellikle isim, rol ve durum bilgilerinin doğru verilmesi değerlidir. Bir bileşenin kullanıcıya ne olduğu, ne yaptığı ve hangi durumda bulunduğu programatik olarak anlaşılmalıdır. Bu bilgi, ajanların işlem planını daha az tahmine dayandırır.

Ancak WCAG bir ajan test standardı değildir. Bir sayfa WCAG kriterlerini karşılayabilir, fakat ürün fiyatını açıklayan metin yetersiz kalabilir. Tersine, bir ajan bazı bilgileri bulabilirken klavye erişimi olmayan kullanıcılar için sayfa yine sorunlu olabilir.

WCAG kontrolü için önce otomatik tarama, sonra klavye testi, ardından ekran okuyucu ve manuel içerik incelemesi yapılmalıdır. Otomatik araçlar renk kontrastı veya eksik etiket gibi bazı sorunları bulur. Bağlam hatalarını ise insan incelemesi gerekir.

Bu sürecin ayrıntılı adımları için Web sitesinde WCAG 2.2 AA uyumu nasıl kontrol edilir? sayfasını inceleyebilirsiniz. Test sonucunda her sorun; URL, bileşen, kriter, etki ve düzeltme önerisiyle kaydedilmelidir.

Ne zaman işe yaramaz? Sadece otomatik tarama yapıldığında. Araçlar, “Bu fiyat hangi pakete ait?” veya “Bu buton işlemden sonra ne yapıyor?” gibi anlamsal soruları çoğunlukla cevaplayamaz.

AI ajanları için erişilebilirlik nasıl test edilir?

AI ajanları için erişilebilirlik testi, insan kullanıcı testlerini DOM ve görev tamamlama kontrolleriyle birleştirmelidir.

İlk adım, test edilecek görevleri yazmaktır. Örneğin “Bir hizmetin fiyatını bul”, “İletişim formunu aç”, “Telefon numarasını kopyala” ve “Bir ürünün stok durumunu kontrol et” gibi dört görev seçilebilir.

İkinci adımda her görevin başlangıç noktası belirlenir. Ana sayfadan mı başlanacak, doğrudan ürün sayfası mı açılacak, çerez bildirimi veya giriş ekranı var mı? Bu koşullar kaydedilmezse test sonucu tekrarlanamaz.

1. Görevleri ve beklenen sonucu yazın.
2. Sayfanın HTML ve erişilebilirlik ağacını inceleyin.
3. Başlık, bağlantı, buton ve form adlarını listeleyin.
4. Görevi klavye ile tamamlamayı deneyin.
5. JavaScript kapalıyken kritik bilgiyi kontrol edin.
6. Ajanın bulduğu bilgiyi kaynak metinle karşılaştırın.
7. Hataları önem, tekrar sıklığı ve düzeltme maliyetine göre sıralayın.

Üçüncü adımda sadece görevin tamamlanıp tamamlanmadığına bakmayın. Ajan yanlış fiyatı bulduysa sonuç başarısızdır. Doğru sayfaya gidip yanlış form alanını doldurduysa yine başarısızdır.

Test kaydında görev süresi, kullanılan URL, bulunan metin ve hata türü tutulabilir. Bu veriler, değişikliklerden sonra önceki sonuçlarla karşılaştırma yapmayı sağlar. Sabit bir puan uydurmak yerine aynı görev setini düzenli aralıklarla çalıştırmak daha güvenilirdir.

Bu yöntem, erişilebilirliği yalnızca denetim raporu olmaktan çıkarır. Sayfanın gerçek kullanım senaryolarında bilgi bulma ve işlem yapma kapasitesini ölçer.

Web sitesinde AI ajanlarına uygun erişilebilirlik nasıl uygulanır?

AI ajanlarına uygun erişilebilirlik, içerik modelinden başlayıp HTML, bileşen, test ve bakım aşamalarına yayılan düzenli bir uygulama sürecidir.

İlk olarak sayfanın ana görevini belirleyin. Sayfa ürün satıyor, teklif topluyor, randevu alıyor veya yalnızca bilgi mi veriyor? Görev netleşmeden hangi başlığın, formun veya butonun kritik olduğunu ölçmek mümkün değildir.

İkinci olarak içerik alanlarını çıkarın. Ürün sayfasında ad, açıklama, fiyat, stok, teslimat ve çağrıya yönlendiren işlem bulunabilir. Her alanın görünür metinde, uygun HTML öğesinde ve gerekiyorsa yapılandırılmış veride tutarlı olup olmadığını kontrol edin.

Üçüncü olarak bileşen kütüphanesini gözden geçirin. Aynı modal, menü, kart veya form farklı sayfalarda kullanılıyorsa, erişilebilirlik düzeltmesini tek tek sayfalara değil ortak bileşene uygulayın.

Dördüncü olarak içerik ile tasarım arasındaki ayrımı koruyun. Landing page anatomisi ve dönüşüm optimizasyonu incelenirken de başlık, teklif, kanıt ve çağrı alanlarının semantik ilişkisi korunmalıdır. Görsel sıralama, HTML sırasını gereksiz biçimde bozmamalıdır.

Beşinci olarak gereksiz otomasyonu sınırlayın. Bir ajan formu doldurabiliyor diye ödeme, üyelik veya hassas veri gönderme işlemlerini onaysız bırakmak doğru değildir. Kritik işlemlerde kullanıcıya açık özet ve onay adımı gösterilmelidir.

Son olarak değişiklikleri sürümleyin. Yeni bir JavaScript bileşeni, form alanı veya tasarım sistemi güncellemesi erişilebilirlik ağacını etkileyebilir. Her yayından önce seçilmiş görevleri tekrar çalıştırın.

Web sitesi bütçesi ve teknik kapsamı değerlendirilirken erişilebilirlik sonradan eklenecek bir süs olarak görülmemelidir. İzmir’de web sitesi yaptırma maliyeti rehberinde olduğu gibi, sayfa sayısı ve işlev kapsamı baştan netleştirilirse test yükü de daha doğru planlanır.

Sonuç olarak amaç, AI ajanlarını memnun edecek özel bir arayüz tasarlamak değildir. Amaç, insanların ve makinelerin aynı bilgiyi açık, tutarlı ve güvenli biçimde anlayabilmesini sağlamaktır.