Erişilebilirlik & UX • 2025

A11y standartları (WCAG 2.2) artık yalnızca uyum gereksinimi değil, daha çok kişiye ulaşmanın anahtarı. Yapay zekâ; alternatif metin üretimi, otomatik etiketleme, kontrast denetimi ve kişisel ihtiyaçlara göre uyarlanabilir arayüz tasarımında yeni bir katman sağlıyor.

B10 Digital Agency • 10 Ekim 2025 • Okuma süresi: ~7 dk

Semantik Yapı: Erişilebilirliğin Temel Katmanı

Semantik HTML, ekran okuyucular ve yardımcı teknolojiler için yol haritasıdır. Yapay zekâ, sayfa yapınızı tarayıp semantik açıkları belirleyebilir.

• Doğru etiketler: header, main, nav, footer, section, article.
• Hiyerarşik başlıklar: h1 → h2 → h3 sırası (görünüm için CSS kullanın, semantik için başlık seviyesini bozmayın).
• Form semantiği: Her input için label veya aria-label.

Semantik düzen, erişilebilirlik testlerinin %50’sini peşinen çözer.

Otomatik Etiketleme & Alternatif Metin (AI Destekli)

AI, görseller için bağlama uygun alt metin üretebilir, eksik form etiketlerini tespit eder.

• Alt metin: Görselin amacı + bağlamı; dekoratif görseller için alt="".
• Form ipuçları: Placeholder yerine aria-describedby ile kalıcı yardım metni.
• Otomatik audit: Kontrast, odak halkası, landmark eksikleri için AI raporu.

Adaptif Arayüz: Kullanıcıya Göre Kendini Ayarlayan UI

Uyarlanabilir tasarım, kullanıcı tercihlerini ve cihaz yeteneklerini algılayıp arayüzü buna göre optimize eder.

• Hareket duyarlılığı: @media (prefers-reduced-motion) ile animasyonları sadeleştirin.
• Kontrast modu: @media (prefers-contrast: more) ile yüksek kontrast teması.
• Yazı boyutu: rem tabanlı tipografi, clamp() ile esnek ölçek.
• Klavyeyle kullanım: Odak sırası (tab order) ve görünür focus ring.

Pratik Kod Örnekleri

<!-- 1) Erişilebilir buton -->
<button aria-pressed="false">Bildirimleri Aç</button>

<!-- 2) Görsel alt metin -->
<img src="team.jpg" alt="B10 ekibi sunum yaparken" />

<!-- 3) Form etiketleme -->
<label for="email">E-posta</label>
<input id="email" name="email" type="email" aria-describedby="emailHelp">
<small id="emailHelp">Kurumsal e-posta adresinizi girin</small>

<!-- 4) Hareket duyarlılığı -->
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

WCAG 2.2 Odaklı Kontrol Listesi

AI ile A11y Test Otomasyonu

AI, Lighthouse/Axe raporlarını yorumlayıp düzeltme önerisi haline getirir; hatta “komut dosyası” olarak PR açabilir.

• Otomatik issue üretimi: Kontrast hataları için CSS patch önerisi.
• Metin sadeleştirme: Okunabilirlik (B1-B2) seviyesine otomatik yakınsama.
• Rol & landmark kontrolü: Yanlış role kullanımına uyarı.

Erişilebilirlik, “özel durum” değil; daha iyi ürün tasarlamanın en kısa yoludur.

B10 Yaklaşımı: Uyarlanabilir UX Denetimi

B10 Digital Agency, komponent kütüphanelerini A11y temelli tasarlar; AI ile otomatik alt metin, kontrast ve form etiket denetimleri yapar, PR’ları projenin CI/CD hattına bağlar.

• Design token → yüksek kontrast tema varyantı
• Focus-visible & skip-to-content şablonları
• AI üretimli alt metin ve altyazı pipeline’ı