Accessibility (Erişilebilirlik) Temelleri: Herkes İçin Tasarım

Seviye: Başlangıç - Orta
Kategori: UX Design
Son güncelleme: Ocak 2025

---

Giriş

Dünya nüfusunun %15'i bir tür engele sahip. Bu, 1 milyardan fazla insan demek.

Ama erişilebilirlik sadece "engelliler için" değil. Güneş altında telefonuna bakmaya çalışan sen de, tek elle bebek tutarken scroll yapan anne de, gözlüğünü unutan yaşlı amca da erişilebilirlikten faydalanır.

Accessibility (erişilebilirlik), ürünlerin herkes tarafından, her koşulda kullanılabilir olmasını sağlar. Etik bir sorumluluk olduğu kadar, iş mantığı açısından da önemli: daha geniş kitle, daha fazla kullanıcı.

Bu yazıda erişilebilirliğin ne olduğunu, WCAG standartlarını ve tasarımcı olarak dikkat etmen gerekenleri öğreneceksin.

---

Accessibility Nedir?

A11y neden? "Accessibility" kelimesinde A ile Y arasında 11 harf var: a-ccessibilit-y → a11y

Benzer kısaltmalar:

• i18n = internationalization
• l10n = localization

---

Neden Erişilebilirlik?

1. Etik sorumluluk

İnternet artık temel bir hak. Bankacılık, eğitim, sağlık, iletişim - hepsi dijitalde. Erişilemezlik, dışlama demek.

2. Yasal gereklilik

Birçok ülkede erişilebilirlik yasal zorunluluk:

• ABD: ADA, Section 508
• AB: European Accessibility Act
• Türkiye: 5378 sayılı Engelliler Kanunu

3. Daha geniş kitle

%15 engelli nüfus + yaşlanan nüfus + geçici/durumsal engeller = büyük pazar.

4. SEO faydası

Erişilebilir siteler genellikle SEO dostu: semantic HTML, alt text, düzgün başlık yapısı.

5. İyi UX = erişilebilir UX

Erişilebilirlik için yapılan iyileştirmeler, herkes için deneyimi iyileştirir.

---

Engel Türleri

Görme Engeli

• Körlük: Ekran okuyucu kullanır
• Az görme: Büyütme, yüksek kontrast
• Renk körlüğü: Renk dışı ipuçları gerekir

İşitme Engeli

• Sağırlık: Altyazı, transcript gerekir
• Az işitme: Ses kontrolü, görsel uyarılar

Motor (Hareket) Engeli

• Kısıtlı hareket: Klavye navigasyonu
• Titreme: Büyük tıklama alanları
• Geçici: Kırık kol, bebekli anne

Bilişsel Engel

• Dikkat eksikliği: Basit, net tasarım
• Öğrenme güçlüğü: Anlaşılır dil
• Hafıza sorunları: Tutarlı navigasyon

Durumsal Engel

• Parlak güneş: Yüksek kontrast
• Gürültülü ortam: Altyazı
• Tek el meşgul: Büyük butonlar
• Yavaş internet: Hafif sayfa

---

WCAG Standartları

WCAG (Web Content Accessibility Guidelines), W3C tarafından yayınlanan uluslararası erişilebilirlik standardı.

Dört Temel İlke (POUR)

1. Perceivable (Algılanabilir) İçerik en az bir duyuyla algılanabilmeli.

• Görsellerin alt text'i
• Video altyazıları
• Yeterli renk kontrastı

2. Operable (Kullanılabilir) Arayüz kontrol edilebilmeli.

• Klavye erişimi
• Yeterli zaman
• Nöbet tetiklemeyen içerik

3. Understandable (Anlaşılabilir) İçerik ve arayüz anlaşılır olmalı.

• Okunabilir metin
• Tahmin edilebilir davranış
• Hata önleme ve düzeltme

4. Robust (Sağlam) Farklı teknolojilerle uyumlu olmalı.

• Geçerli HTML
• Yardımcı teknoloji uyumu

Uyumluluk Seviyeleri

[TABLE] | Seviye | Açıklama | Hedef Kitle | |--------|----------|-------------| | A | Minimum | Temel erişilebilirlik | | AA | Orta | Çoğu yasal gereklilik, önerilen hedef | | AAA | Maksimum | En yüksek erişilebilirlik, tüm içerik için zor | [/TABLE]

Hedef: Çoğu proje için WCAG 2.1 AA seviyesi.

---

Tasarımcı İçin Erişilebilirlik

Renk ve Kontrast

Minimum kontrast oranları (WCAG AA):

• Normal metin: 4.5:1
• Büyük metin (18px+ veya 14px bold+): 3:1
• UI bileşenleri ve grafikler: 3:1

Renk körlüğü:

• Sadece renge dayanma
• Renk + ikon, renk + pattern kullan
• Hata için sadece kırmızı değil, ikon de ekle

Tipografi

• Minimum 16px body text
• Satır yüksekliği en az 1.5
• Paragraf spacing en az 2x font size
• Okunabilir font seçimi (sans-serif genellikle daha iyi)

Touch Target (Dokunma Alanı)

• Minimum 44x44 pixel (WCAG)
• İdeal: 48x48 pixel
• Butonlar arası yeterli boşluk

Focus State

Klavye kullanıcıları için odak göstergesi:

• Her interaktif elementte görünür focus
• Sadece outline kaldırma ❌
• Özel focus stili tasarla

Form Tasarımı

• Her input'un label'ı olmalı
• Placeholder label yerine kullanılmamalı
• Hata mesajları açık ve yardımcı
• Required alanlar belirtilmeli
• Grup label'ları (fieldset/legend)

Görsel İçerik

• Tüm görsellerde alt text
• Dekoratif görseller: boş alt (alt="")
• Karmaşık görseller: uzun açıklama
• Video: altyazı ve transcript

---

Screen Reader (Ekran Okuyucu)

Görme engelli kullanıcıların en temel aracı.

Nasıl çalışır:

• HTML'i okur, sese çevirir
• Semantic HTML kritik
• Heading hiyerarşisi önemli
• Alt text'ler okunur
• ARIA etiketleri yardımcı olur

Popüler screen reader'lar:

• NVDA (Windows, ücretsiz)
• JAWS (Windows, ücretli)
• VoiceOver (macOS/iOS, dahili)
• TalkBack (Android, dahili)

---

Semantic HTML

Screen reader'lar HTML yapısını okur. Doğru element, doğru anlam.

[TABLE] | Yanlış | Doğru | Neden | |--------|-------|-------| | <div onclick> | <button> | Keyboard focus, role | | <div class="title"> | <h1> | Heading hiyerarşisi | | <span class="link"> | <a href> | Link davranışı | | <div> ile liste | <ul><li> | Liste yapısı | | <b> | <strong> | Semantic önem | [/TABLE]

Heading Hiyerarşisi

<h1>Sayfa Başlığı (tek)
  <h2>Bölüm 1
    <h3>Alt bölüm
    <h3>Alt bölüm
  <h2>Bölüm 2
    <h3>Alt bölüm

Seviye atlama ❌ (h1 → h3)

---

ARIA

ARIA (Accessible Rich Internet Applications), HTML'in yetersiz kaldığı durumlarda erişilebilirlik bilgisi ekler.

Temel ARIA özellikleri:

• aria-label: Görünmez etiket
• aria-labelledby: Başka elemente referans
• aria-describedby: Ek açıklama
• aria-hidden: Screen reader'dan gizle
• role: Element rolünü belirt

Örnek:

<button aria-label="Menüyü kapat">
  <svg>...</svg>
</button>

---

Erişilebilirlik Kontrol Listesi

Tasarım Aşaması

Geliştirme Sonrası

---

Test Araçları

Otomatik Test

[TABLE] | Araç | Tip | Özellik | |------|-----|---------| | axe DevTools | Browser extension | En kapsamlı, ücretsiz | | WAVE | Browser extension | Görsel gösterim | | Lighthouse | Chrome dahili | Genel audit | | Pa11y | CLI | CI/CD entegrasyonu | [/TABLE]

Kontrast Kontrolü

• WebAIM Contrast Checker
• Stark (Figma plugin)
• Color Contrast Analyzer

Screen Reader Test

• VoiceOver (macOS: Cmd + F5)
• NVDA (Windows, ücretsiz download)
• Chrome Screen Reader extension

---

Yaygın Hatalar

1. Sadece renge güvenmek

2. Focus outline kaldırmak

"Çirkin" diye outline kaldırıp, alternatif koymamak klavye kullanıcılarını kaybettirir.

3. Alt text eksikliği

Her anlamlı görselin alt text'i olmalı. Dekoratif ise alt="".

4. Placeholder'ı label olarak kullanmak

Placeholder yazı girince kaybolur. Label her zaman görünür olmalı.

5. Auto-play video/ses

Otomatik başlayan medya, screen reader kullanıcılarını rahatsız eder.

6. Yetersiz touch target

Küçük butonlar, yakın linkler - mobilde kabus.

7. Hareket azaltma seçeneği yok

Animasyonlar bazı kullanıcılarda baş dönmesine neden olur. prefers-reduced-motion kullan.

---

İş Case'i

Erişilebilirlik "nice to have" değil:

• Yasal risk: Erişilemez siteler için davalar artıyor (ABD'de 2023'te 4.000+ dava).
• Pazar büyüklüğü: Engelli nüfusun harcama gücü trilyonlarca dolar.
• SEO: Erişilebilir siteler genellikle daha iyi sıralanır.
• Marka: Inclusive tasarım, pozitif marka algısı.
• Verimlilik: Erişilebilirlik baştan düşünülürse, sonradan düzeltmekten ucuz.

---

---

---

İlgili İçerikler

Önceki: Design System Nedir?

Sonraki: Micro-interactions Tasarımı (yakında)

İlgili konular:

• UI Nedir?
• Color Theory ve Renk Kullanımı (yakında)
• Inclusive Design Nedir? (yakında)

İlgili Roadmap: UI Designer Roadmap → Erişilebilirlik

---

Kaynaklar

Derinleşmek istersen:

• WCAG 2.1 - W3C (İngilizce, resmi kaynak)
• WebAIM (İngilizce, pratik rehberler)
• A11y Project (İngilizce, checklist ve kaynaklar)
• Inclusive Components - Heydon Pickering (İngilizce, component örnekleri)