Web Erişilebilirliği: Herkes İçin Tasarım

Web'in kurucusu Tim Berners-Lee şöyle demiş: "Web'in gücü evrenselliğindedir. Engel durumuna bakılmaksızın herkesin erişebilmesi temel bir unsurdur."

Bu cümle 1997'den. Aradan neredeyse 30 yıl geçti ve hâlâ çoğu web sitesi herkes tarafından kullanılamıyor.

Erişilebilirlik bir lüks değil, temel bir hak. Ve düşündüğünüzden çok daha fazla insanı etkiliyor.

Erişilebilirlik Kimi Etkiler?

Dünya Sağlık Örgütü'ne göre dünya nüfusunun yaklaşık %16'sı bir tür engelle yaşıyor. Türkiye'de bu oran benzer seviyelerde.

Ama erişilebilirlik sadece kalıcı engel durumlarıyla sınırlı değil:

• Kalıcı: Görme engeli, işitme engeli, motor engel
• Geçici: Kırık kol, göz ameliyatı sonrası, migren
• Durumsal: Güneşli ortamda ekrana bakma, kucağında bebek tutma, gürültülü ortamda video izleme

Hepimiz hayatımızın bir noktasında erişilebilirlik özelliklerinden faydalanırız. Asansör sadece tekerlekli sandalye kullananlar için değildir — ağır bavullu herkes kullanır.

Web erişilebilirliği de öyle.

WCAG: Standart Nedir?

Web Content Accessibility Guidelines (WCAG), W3C tarafından belirlenen uluslararası erişilebilirlik standardıdır. Güncel versiyon WCAG 2.2'dir.

Uyum Seviyeleri

• A: Minimum seviye. Bu olmadan site bazı kullanıcılar için tamamen erişilemez.
• AA: Önerilen seviye. Çoğu yasal gereksinim bunu hedefler.
• AAA: En yüksek seviye. Her durum için pratik olmayabilir ama hedef olarak değerlidir.

Hedefimiz her projede AA seviyesi. Bu, gerçekçi ve etkili bir hedeftir.

POUR Prensipleri

WCAG dört temel prensip üzerine kuruludur:

Perceivable (Algılanabilir): İçerik kullanıcının algılayabileceği şekilde sunulmalı. Görsel bilgi sadece görsel olmamalı — alternatif formatlar olmalı.

Operable (Kullanılabilir): Arayüz bileşenleri kullanılabilir olmalı. Sadece fareyle değil, klavyeyle de. Sadece dokunmatikle değil, yardımcı teknolojilerle de.

Understandable (Anlaşılabilir): İçerik ve arayüz anlaşılabilir olmalı. Dil açık olmalı, davranış öngörülebilir olmalı.

Robust (Sağlam): İçerik farklı teknolojiler ve yardımcı araçlar tarafından güvenilir şekilde yorumlanabilmeli.

Pratik Uygulamalar

Teori güzel ama pratikte ne yapılır? İşte her web projesinde uygulanması gereken temel kurallar.

Renk Kontrastı

Metin ve arka plan arasında yeterli kontrast olmalı. WCAG AA gereksinimleri:

• Normal metin (16px ve altı): Minimum 4.5:1 kontrast oranı
• Büyük metin (18px+ bold veya 24px+): Minimum 3:1 kontrast oranı

Açık gri metin beyaz arka plan üzerinde şık görünebilir — ama okunmaz. Tasarım estetiği, okunabilirliği asla geçemez.

Kontrol aracı: Tarayıcınızın DevTools'undaki kontrast denetimi veya online kontrast checker araçları.

Alt Text

Her anlamlı görsel için alt text yazılmalıdır.

İyi alt text:

<img src="ekip.jpg" alt="Novexing ekibi ofiste tasarım toplantısı yapıyor">

Kötü alt text:

<img src="ekip.jpg" alt="resim">
<img src="ekip.jpg" alt="ekip.jpg">
<img src="ekip.jpg" alt="">  <!-- Dekoratif değilse boş olmamalı -->

Kural: Alt text görselin ne gösterdiğini açıklar, dosya adını tekrar etmez. Dekoratif görsellerde (arka plan desenleri, ayırıcı çizgiler) boş alt text (alt="") kullanılır.

Klavye Navigasyonu

Tüm etkileşimli öğeler klavyeyle erişilebilir olmalı:

• Tab: Sonraki öğeye geç
• Shift + Tab: Önceki öğeye dön
• Enter / Space: Butona bas, linke tıkla
• Escape: Modalı kapat, dropdown'ı kapat

Test yöntemi basit: farenizi bir kenara bırakın ve sitenizi sadece klavyeyle kullanmaya çalışın. Bir yerde takılıyorsanız, kullanıcılarınız da takılıyordur.

Semantik HTML

HTML etiketleri anlam taşır. Bu anlamı doğru kullanmak erişilebilirliğin temelidir.

<!-- Kötü: Div her yerde -->
<div class="header">
  <div class="nav">
    <div class="link" onclick="navigate()">Hakkımızda</div>
  </div>
</div>

<!-- İyi: Semantik etiketler -->
<header>
  <nav>
    <a href="/hakkimizda">Hakkımızda</a>
  </nav>
</header>

Ekran okuyucular <nav> etiketini "navigasyon" olarak okur. <div> etiketini ise hiçbir şey olarak okur.

Temel semantik etiketler: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <button>, <a>, <h1>-<h6>.

ARIA Etiketleri

ARIA (Accessible Rich Internet Applications), HTML'in yetmediği yerde erişilebilirlik bilgisi ekler.

Kural: ARIA, son çare olmalı. Önce doğru HTML etiketi kullanın. HTML yetmiyorsa ARIA ekleyin.

<!-- ARIA'ya gerek yok — doğru HTML yeterli -->
<button>Menüyü Aç</button>

<!-- ARIA gerekli — özel bileşen -->
<div role="tablist">
  <button role="tab" aria-selected="true">Sekme 1</button>
  <button role="tab" aria-selected="false">Sekme 2</button>
</div>

Sık kullanılan ARIA özellikleri:

• aria-label: Görsel olmayan etiket
• aria-expanded: Açılır menü durumu
• aria-hidden: Ekran okuyucudan gizleme
• aria-live: Dinamik içerik bildirimi

Focus Yönetimi

Klavyeyle gezinen kullanıcı, hangi öğenin aktif olduğunu görmeli.

/* Kötü: Focus göstergesini kaldırma */
*:focus { outline: none; }

/* İyi: Özel focus stili */
:focus-visible {
  outline: 3px solid #E5442C;
  outline-offset: 2px;
}

:focus-visible kullanmak önemli — fare tıklamalarında göstermez, klavye navigasyonunda gösterir.

Form Erişilebilirliği

Formlar en çok erişilebilirlik hatası barındıran alanlardır.

<!-- Her input'un label'ı olmalı -->
<label for="email">E-posta adresi</label>
<input type="email" id="email" name="email" required>

<!-- Hata mesajları programatik olarak bağlı olmalı -->
<input type="email" id="email" aria-describedby="email-error">
<span id="email-error" role="alert">Geçerli bir e-posta girin</span>

Kurallar:

• Her input'un bir <label> etiketine sahip olması
• Placeholder'ın label yerine kullanılmaması
• Hata mesajlarının net ve yardımcı olması
• Zorunlu alanların belirtilmesi (required + görsel işaret)

Erişilebilirlik ve SEO İlişkisi

Erişilebilirlik ve SEO birçok noktada örtüşür. Birini iyileştirmek diğerini de iyileştirir.

Semantik HTML = Daha İyi İndeksleme

Arama motorları da ekran okuyucular gibi sayfanın yapısını anlamaya çalışır. <h1>, <h2>, <nav>, <main> gibi etiketler sayfa yapısını netleştirir.

Alt Text = Görsel Arama

Google Görseller, alt text'i kullanarak görselleri indeksler. İyi alt text, görsel aramadan trafik getirir.

Başlık Hiyerarşisi = İçerik Yapısı

<h1> → <h2> → <h3> hiyerarşisi hem ekran okuyucular hem arama motorları için sayfa yapısını belirler. Başlık atlamak (h1'den h3'e geçmek) her iki taraf için de sorunlu.

Hızlı ve Hafif Sayfa = Herkes İçin İyi

Performans optimizasyonu hem erişilebilirlik hem SEO için kritik. Yavaş sayfa, düşük bant genişliğindeki kullanıcıları da, arama motorlarını da kaybettirir.

Test Etmek

Erişilebilirliği test etmeden "uyumlu" olduğunuzu söyleyemezsiniz.

Otomatik Tarama

Otomatik araçlar sorunların yaklaşık %30-40'ını yakalar. Başlangıç için iyi ama tek başına yeterli değil.

• Tarayıcı DevTools: Chrome ve Firefox'un yerleşik erişilebilirlik denetimi
• Lighthouse: Google'ın performans ve erişilebilirlik tarama aracı
• axe DevTools: Detaylı erişilebilirlik analizi

Manuel Test

Otomatik araçların yakalayamadığı sorunları bulur.

• Klavye testi: Siteyi sadece klavyeyle kullanmayı deneyin
• Zoom testi: Sayfayı %200'e büyütün — her şey hâlâ kullanılabilir mi?
• Renk testi: Sayfayı gri tonlamaya çevirin — bilgi hâlâ anlaşılıyor mu?

Ekran Okuyucu Testi

Gerçek kullanıcı deneyimini anlamanın en iyi yolu.

• VoiceOver: macOS ve iOS'ta yerleşik
• NVDA: Windows için ücretsiz ekran okuyucu
• TalkBack: Android'de yerleşik

İlk denemenizde sitenizi ekran okuyucuyla kullanmaya çalışın. Büyük ihtimalle şaşıracaksınız — birçok şeyin erişilemez olduğunu fark edeceksiniz.

Nereden Başlamalı?

Mevcut bir siteyi tamamen erişilebilir yapmak büyük bir iş gibi görünebilir. Ama her şeyi bir anda yapmanız gerekmiyor.

Öncelik Sırası

1. Kontrast düzeltmeleri — En hızlı etki, en kolay uygulama
2. Alt text ekleme — Her görsele anlamlı açıklama
3. Klavye navigasyonu — Tab sırasının mantıklı olması
4. Semantik HTML — Div yerine doğru etiketler
5. Form erişilebilirliği — Label, hata mesajı, zorunlu alan bildirimi
6. ARIA — Özel bileşenler için son rötuşlar

Her adım tek başına fark yaratır. Mükemmellik değil, ilerleme hedefleyin.

Sonuç

Erişilebilirlik, "ekstra bir özellik" değildir. Kaliteli web geliştirmenin ayrılmaz bir parçasıdır.

Erişilebilir bir site daha iyi SEO performansı gösterir, daha geniş kitleye ulaşır, daha kullanılabilir olur ve yasal riskleri azaltır.

Herkesi dışarıda bırakan bir web sitesi, herkes için eksik bir web sitesidir. Tasarımın görevi güzel görünmek değil — herkes için çalışmaktır.