← Blog'a Dön
WEB GELIŞTIRME

Web Erişilebilirlik (Accessibility): Herkese Açık Web Siteleri

F. Çağrı Bilgehan19 Şubat 20268 dk okuma
erişilebilirlika11yWCAGweb geliştirmeinclusive design

Web Erişilebilirlik: Herkese Açık Web Siteleri

Dünya nüfusunun %16'sı (1.3 milyar kişi) bir engele sahip. Görme, işitme, motor veya bilişsel engelli kullanıcılar web sitenizi kullanabiliyor mu? Web erişilebilirlik (a11y) sadece etik bir sorumluluk değil, birçok ülkede yasal zorunluluk.

Web Erişilebilirlik Nedir?

Web erişilebilirlik, web sitelerinin ve uygulamaların engelli bireyler dahil herkes tarafından algılanabilir, kullanılabilir ve anlaşılabilir olmasıdır.

Neden Erişilebilirlik Önemli?

1. Yasal Zorunluluk

  • ABD: ADA (Americans with Disabilities Act)
  • AB: European Accessibility Act (2025)
  • Türkiye: 5378 sayılı Engelliler Hakkında Kanun
  • Erişilebilirlik davaları artıyor

2. Daha Geniş Kitle

  • 1.3 milyar potansiyel kullanıcı
  • Yaşlı nüfus artıyor
  • Geçici engeller (kırık kol, parlak güneş)

3. SEO Avantajı

  • Alt etiketleri → Görsel SEO
  • Yapısal başlıklar → Daha iyi taranabilirlik
  • Temiz HTML → Düşük hata oranı

4. Daha İyi UX

  • Erişilebilir site = herkes için daha iyi site
  • Klavye navigasyonu
  • Temiz, okunabilir tasarım

WCAG Standartları

WCAG (Web Content Accessibility Guidelines) — W3C tarafından yayınlanan erişilebilirlik standartları.

4 Temel Prensip (POUR):

1. Perceivable (Algılanabilir)

  • Görsellerde alt metni
  • Video altyazıları
  • Yeterli renk kontrastı
  • Yeniden boyutlandırılabilir metin

2. Operable (Kullanılabilir)

  • Klavye ile tam navigasyon
  • Yeterli zaman tanıma
  • Nöbet tetikleyici içerik yok
  • Navigasyon yardımcıları

3. Understandable (Anlaşılabilir)

  • Okunabilir metin
  • Tahmin edilebilir davranış
  • Hata yardımı ve öneriler

4. Robust (Sağlam)

  • Farklı cihaz ve tarayıcılarda çalışma
  • Yardımcı teknolojilerle uyumlu

Uyumluluk Seviyeleri:

  • A — Minimum (zorunlu)
  • AA — Önerilen (çoğu düzenleme bunu ister)
  • AAA — En üst düzey

Temel Erişilebilirlik Teknikleri

Görseller

<!-- İyi -->
<img src="grafik.png" alt="2026 satış grafiği, %40 artış gösteriyor">

<!-- Dekoratif görsel -->
<img src="divider.png" alt="" role="presentation">

Başlık Hiyerarşisi

<h1>Ana Başlık</h1>        <!-- Sayfa başına tek -->
  <h2>Alt Başlık</h2>
    <h3>Detay</h3>
  <h2>Diğer Alt Başlık</h2>

Form Erişilebilirliği

<label for="email">E-posta Adresi</label>
<input type="email" id="email" aria-describedby="email-help" required>
<span id="email-help">Örn: isim@firma.com</span>

ARIA Etiketleri

<button aria-label="Menüyü aç" aria-expanded="false">
  <svg>...</svg>
</button>

<nav aria-label="Ana navigasyon">
  ...
</nav>

Renk Kontrastı

  • Normal metin: minimum 4.5:1 kontrast oranı
  • Büyük metin (18px+): minimum 3:1
  • Araçlar: WebAIM Contrast Checker

Erişilebilirlik Kontrol Araçları

| Araç | Tür | Fiyat | |------|-----|-------| | Lighthouse | Chrome DevTools | Ücretsiz | | axe DevTools | Tarayıcı eklentisi | Freemium | | WAVE | Web aracı | Ücretsiz | | Pa11y | CLI aracı | Ücretsiz | | NVDA | Screen reader (Windows) | Ücretsiz | | VoiceOver | Screen reader (Mac/iOS) | Dahili |

Hızlı Erişilebilirlik Kontrol Listesi

  • Tab tuşuyla tüm sayfa gezilebiyor mu?
  • Görsellerde anlamlı alt metni var mı?
  • Renk kontrastı yeterli mi?
  • Formlar etiketlenmiş mi?
  • Başlık hiyerarşisi doğru mu?
  • Focus durumları görünür mü?
  • Video/ses için altyazı var mı?

Sonuç

Web erişilebilirlik, "iyi niyet" değil zorunluluk. Erişilebilir bir web sitesi, daha geniş kitleye ulaşır, daha iyi SEO performansı gösterir ve yasal sorunlardan kaçınır. En iyi web sitesi, herkesin kullanabildiği web sitesidir.

Erişilebilir, WCAG uyumlu web siteleri geliştirmek isterseniz benimle iletişime geçin: info@cagribilgehan.com. Projelerime göz atın: cagribilgehan.com

İlgili Yazılar

Domain ve Hosting Rehberi: Web Sitenizi Yayına Alın

Domain nedir, hosting nedir ve web siteniz için en uygun seçenek hangisi? Domain seçimi, DNS, hosting türleri ve maliyet karşılaştırması.

Etkili Landing Page Nasıl Yapılır? Dönüşüm Odaklı Tasarım

Yüksek dönüşüm oranı sağlayan landing page nasıl tasarlanır? CTA, hero section, sosyal kanıt ve A/B test stratejileri. Pratik rehber.