Web Erişilebilirlik Neden Herkesin Sorumluluğu?
Dünya nüfusunun yaklaşık %15'i bir tür engele sahiptir. Web erişilebilirliği, web sitelerinin ve uygulamaların engelli bireyler dahil herkes tarafından kullanılabilir olmasını sağlamaktır. Bu sadece etik bir sorumluluk değil — aynı zamanda SEO'yu güçlendirir, kullanıcı kitlesini genişletir ve birçok ülkede yasal zorunluluktur.
WCAG Nedir?
Web Content Accessibility Guidelines (WCAG), W3C tarafından yayınlanan web erişilebilirlik standartlarıdır. Dört temel prensibe dayanır:
- Algılanabilir (Perceivable): İçerik farklı duyularla algılanabilmeli
- Çalıştırılabilir (Operable): Arayüz farklı giriş yöntemleriyle kullanılabilmeli
- Anlaşılabilir (Understandable): İçerik ve kullanım şekli anlaşılabilir olmalı
- Sağlam (Robust): İçerik farklı teknolojilerle uyumlu çalışmalı
Semantik HTML: Erişilebilirliğin Temeli
Doğru HTML elementleri kullanmak, erişilebilirliğin en önemli adımıdır:
- Başlıklar: h1-h6 hiyerarşisini doğru kullanın — h1'den h3'e atlamayın
- Bölümler: header, nav, main, section, article, aside, footer kullanın
- Listeler: Sıralı içerik için ol, sırasız içerik için ul kullanın
- Butonlar: Tıklanabilir elementler için div yerine button kullanın
- Bağlantılar: Navigasyon için div onclick yerine a href kullanın
- Formlar: Her input'a label eşleştirin, fieldset ve legend kullanın
Neden önemli? Ekran okuyucular (screen reader) semantik HTML'i doğru yorumlar. Bir div'i buton olarak kullanırsanız, ekran okuyucu bunu buton olarak tanımaz.
Görsel İçerik Erişilebilirliği
- Alt text: Her görsele anlamlı alt text yazın. Dekoratif görseller için alt="" kullanın
- Renk kontrastı: Metin ve arka plan arasında minimum 4.5:1 kontrast oranı (WCAG AA)
- Renk bağımlılığı: Bilgiyi sadece renkle iletmeyin — ek işaretler kullanın (ikon, metin)
- Video altyazı: Video içeriklere altyazı ve transkript ekleyin
- Animasyonlar: prefers-reduced-motion media query'si ile animasyonları devre dışı bırakma seçeneği sunun
Klavye Navigasyonu
Birçok kullanıcı fareyi kullanamaz — sadece klavye ile gezinebilmelidir:
- Tab sırası: Mantıksal tab sırasını koruyun (tabindex ile müdahale gerekmedikçe)
- Focus göstergesi: Focus outline'ı kaldırmayın — görünür ve net olsun
- Klavye tuzakları: Kullanıcının modal veya dropdown içinde sıkışmamasını sağlayın
- Skip link: Sayfa başında "İçeriğe geç" linki ekleyin — tekrarlayan navigasyonu atlama
- Kısayollar: Sık kullanılan aksiyonlar için klavye kısayolları tanımlayın
ARIA Attribute'ları
ARIA (Accessible Rich Internet Applications), semantik HTML'in yetmediği durumlarda erişilebilirlik bilgisi ekler:
- aria-label: Görsel metni olmayan elementlere açıklama
- aria-describedby: Ek açıklama ilişkilendirme
- aria-hidden: Dekoratif elementleri ekran okuyucudan gizleme
- aria-live: Dinamik içerik değişikliklerini bildirme
- role: Elementin rolünü tanımlama (dialog, alert, tablist)
Önemli kural: ARIA'yı sadece semantik HTML'in yetmediği yerlerde kullanın. "No ARIA is better than bad ARIA" — yanlış ARIA kullanımı erişilebilirliği iyileştirmek yerine bozar.
Form Erişilebilirliği
Formlar erişilebilirlik açısından en zorlu alanlardır:
- Her input'un bir label'ı olmalı — placeholder label yerine geçmez
- Hata mesajları aria-describedby ile input'a bağlanmalı
- Zorunlu alanlar aria-required ile işaretlenmeli
- Form gönderim sonucu ekran okuyucuya bildirilmeli (aria-live region)
- Otomatik tamamlama autocomplete attribute'u ile etkinleştirilmeli
Erişilebilirlik ve SEO İlişkisi
Erişilebilirlik çalışması SEO'yu da güçlendirir:
- Semantik HTML, arama motorlarının içeriği anlamasını kolaylaştırır
- Alt text, görsellerin Google Image arama'da bulunmasını sağlar
- Heading hiyerarşisi, sayfa yapısını hem kullanıcılara hem bot'lara anlatır
- Hızlı ve kullanılabilir siteler daha iyi sıralama alır
- Mobil erişilebilirlik, mobile-first indexing'i destekler
Test Araçları
- Lighthouse: Chrome DevTools'ta yerleşik erişilebilirlik denetimi
- axe DevTools: Detaylı erişilebilirlik analizi (browser extension)
- WAVE: Web erişilebilirlik değerlendirme aracı
- Ekran okuyucu testi: VoiceOver (Mac), NVDA (Windows) ile gerçek kullanıcı testi
- Klavye testi: Fareyi bırakıp sadece Tab ve Enter ile tüm siteyi gezin
Sonuç
Web erişilebilirliği "isteğe bağlı bir bonus" değil, temel bir kalite standartıdır. Semantik HTML kullanarak, renk kontrastına dikkat ederek, klavye navigasyonunu sağlayarak ve ARIA'yı doğru kullanarak web sitenizi gerçekten herkes için erişilebilir yapabilirsiniz. Üstelik bu çalışma SEO'nuzu da güçlendirir.
Web sitenizin erişilebilirliğini iyileştirmek mi istiyorsunuz? İletişime geçin.