Faz 3: Erişilebilirlik — WCAG Standartları ve a11y Gereksinimleri

Neden Önemli?

Dünya nüfusunun yaklaşık %16'sı (1.3 milyar kişi) bir engelle yaşamaktadır. Erişilebilir olmayan web siteleri bu devasa kullanıcı kitlesini dışlar — bu hem etik hem de ticari bir kayıptır.

ABD'de ADA (Americans with Disabilities Act) kapsamında erişilebilirlik davaları yılda 4.000'i aşmış durumda. Avrupa'da European Accessibility Act (EAA) 2025'te yürürlüğe girdi. Türkiye'de de 5378 sayılı Engelliler Kanunu dijital erişilebilirlik gereksinimleri içermektedir.

SEO açısından bakıldığında, erişilebilir siteler genellikle daha iyi yapılandırılmış, semantik HTML kullanan sitelerdir — bu da arama motorlarının içeriği daha iyi anlamasını sağlar. Google, Core Web Vitals değerlendirmesinde erişilebilirlik sinyallerini dolaylı olarak dikkate alır.

Kontrol Listesi

• Semantik HTML kullanımı: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer> elementlerinin doğru kullanımı. Div-soup yerine anlamlı HTML yapısı.
• Başlık hiyerarşisi: H1'den H6'ya kırılmayan, mantıklı bir başlık ağacı. Her sayfada tek H1, alt bölümler H2, alt-alt bölümler H3 şeklinde devam etmeli — seviye atlanmamalı.
• Renk kontrastı: WCAG AA standardına göre normal metin için minimum 4.5:1, büyük metin için 3:1 kontrast oranı. AAA için normal metin 7:1, büyük metin 4.5:1. Sadece renge dayalı bilgi iletimi yapılmamalı.
• Klavye navigasyonu: Tüm interaktif elementlere (butonlar, linkler, formlar, modaller) sadece klavye ile erişilebilmeli. Tab sırası mantıklı olmalı, focus trap doğru çalışmalı, skip-to-content linki bulunmalı.
• ARIA rolleri ve etiketleri: aria-label, aria-describedby, aria-expanded, aria-hidden, role attribute'larının doğru ve tutarlı kullanımı. ARIA'yı gereksiz yere kullanmayın — önce native HTML deneyin.
• Görsel alternatifler: Tüm <img> elementlerinde anlamlı alt metni. Dekoratif görsellerde alt="" (boş). Karmaşık görseller (infografik, grafik) için uzun açıklama (aria-describedby).
• Form erişilebilirliği: Her input'a <label> bağlantısı, hata mesajlarının aria-live ile duyurulması, zorunlu alanların aria-required ile işaretlenmesi, fieldset/legend kullanımı.
• Screen reader testi: NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) ile gerçek cihazda test. Otomatik araçlar (axe, Lighthouse) sorunların sadece %30-40'ını yakalar.
• Animasyon ve hareket: prefers-reduced-motion media query desteği. Otomatik oynayan video/animasyonlarda durdurma kontrolü. Yanıp sönen içerik sınırlaması (saniyede 3'ten fazla yanıp sönme epilepsi tetikleyebilir).
• Focus yönetimi: Özel bileşenlerde (modal, dropdown, tab panel) focus'un doğru yönetilmesi, focus ring'in görünür olması, :focus-visible kullanımı.

Teknik Gereksinimler

Skip-to-content linki:

<a href="#main-content" class="skip-link"> İçeriğe geç </a> /* CSS */ .skip-link { position: absolute; left: -9999px; z-index: 999; padding: 1rem; background: #0F2447; color: white; } .skip-link:focus { left: 50%; transform: translateX(-50%); top: 0; }

Prefers-reduced-motion desteği:

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

ARIA live region (dinamik içerik bildirimi):

<div aria-live="polite" aria-atomic="true" class="sr-only"> {/* Dinamik hata/başarı mesajları buraya inject edilir */} </div>

Sık Yapılan Hatalar

1. ARIA'yı aşırı kullanmak: Native HTML elementleri zaten erişilebilirlik bilgisi taşır. <button> yerine <div role="button"> yazmak gereksizdir ve genellikle daha kötü sonuç verir.
2. Sadece otomatik araçlara güvenmek: Lighthouse ve axe harika araçlardır ancak klavye navigasyonu, mantıksal okuma sırası ve bağlamsal alt metin kalitesini değerlendiremezler.
3. Renk kontrastını göz ardı etmek: Açık gri metin trendy görünebilir ama düşük kontrastlı metin tüm kullanıcılar için okunabilirliği azaltır, engelli kullanıcılar için ise imkansız hale getirir.
4. Focus ring'i gizlemek: outline: none yazmak klavye kullanıcılarını karanlıkta bırakır. Görsel olarak şık bir focus stili tasarlayın, ama asla kaldırmayın.
5. Alt metinlerde "resim" yazmak: Screen reader zaten bunun bir resim olduğunu söyler. "Logo resmi" yerine "VixSEO şirket logosu" gibi açıklayıcı bir metin kullanın.

Profesyonel İpuçları

• Erişilebilirlik testini geliştirme sürecinin başında entegre edin — CI/CD pipeline'ınıza axe-core ekleyerek her PR'da otomatik erişilebilirlik kontrolü yapın.
• Haftada bir "klavye günü" yapın — mouse'u bırakın ve sitenizi sadece klavye ile kullanmaya çalışın. Sorunları hemen fark edeceksiniz.
• Gerçek engelli kullanıcılarla usability testi yapın — hiçbir otomatik araç veya simülasyon gerçek kullanıcı deneyiminin yerini tutamaz.
• WCAG 2.2 güncellemelerini takip edin — "Focus Not Obscured" ve "Dragging Movements" gibi yeni kriterler eklendi.
• Erişilebilirlik beyannamesi (accessibility statement) yayınlayın — bu hem şeffaflık gösterir hem de yasal uyumluluk kanıtı olarak işe yarar.