Accessibility (a11y) Nedir?
Accessibility, uygulamanın görme, işitme, motor veya bilişsel engeli olan kullanıcılar tarafından da kullanılabilir olmasını sağlamaktır. 2026 itibarıyla AB'nin European Accessibility Act (EAA) yürürlüğe girmiştir ve AB pazarında erişilebilirlik yasal zorunluluk haline gelmiştir.
Neden Önemli?
- Dünya nüfusunun %15'i bir engele sahip
- Apple ve Google accessibility'yi store featuring kriteri olarak değerlendirir
- Bazı ülkelerde yasal zorunluluk (ADA - ABD, EAA - AB)
- İyi a11y = herkes için daha iyi UX
- Yaşlanan nüfus ile erişilebilirlik ihtiyacı artıyor
iOS Accessibility
VoiceOver
- Ekran okuyucu - görme engelli kullanıcılar için
- Her UI elementine accessibilityLabel tanımla
- accessibilityHint ile aksiyonu açıkla
- accessibilityTraits ile element türünü belirt (button, header, link vb.)
- Sıralama önemli: accessibilityElements ile okuma sırasını kontrol et
Dynamic Type
- Kullanıcının sistem font boyutunu uygulamaya yansıt
- Sabit font boyutu KULLANMA
- Layout'un büyük fontlarda bozulmadığını test et
- UIFontMetrics ile custom fontlarda da ölçekleme
- Accessibility sizes (xS'den AX5'e kadar 12 seviye)
Reduce Motion
- Animasyonları azaltma tercihi
- Vestibüler rahatsızlığı olan kullanıcılar için
- Bu tercihi kontrol et ve basit animasyon sun
- UIAccessibility.isReduceMotionEnabled ile kontrol
Color ve Contrast
- Minimum 4.5:1 kontrast oranı (küçük metin)
- Minimum 3:1 kontrast oranı (büyük metin)
- Renk körü dostu palette
- Sadece renge dayalı bilgi verme (ikon veya metin ekle)
- Increase Contrast modunu destekle
Android Accessibility
TalkBack
- Android ekran okuyucu
- contentDescription attribute'u ile etiket tanımla
- importantForAccessibility ile gereksiz elementleri gizle
- AccessibilityNodeInfo ile özel davranış tanımla
Font Scaling
- sp (scale-independent pixels) kullan
- dp yerine sp metin boyutlarında
- Android 14+ ile %200'e kadar font ölçekleme desteği
- ConstraintLayout ile büyük fontlarda layout bozulmalarını önle
React Native Accessibility
- accessibilityLabel: Element etiketi
- accessibilityRole: Rol (button, header, link vb.)
- accessibilityState: Durum (disabled, selected, checked)
- accessible: Gruplama (birden fazla elementi tek birim olarak oku)
- accessibilityActions ve onAccessibilityAction: Özel aksiyonlar
- accessibilityLiveRegion (Android): Dinamik içerik değişikliklerini duyur
Kontrol Listesi
- Ekran okuyucu testi: VoiceOver/TalkBack ile tüm akışları test et
- Kontrast kontrolü: Tüm metin/arka plan kombinasyonlarını kontrol et
- Touch target: Minimum 44x44pt / 48x48dp
- Font scaling: Dynamic Type / sp desteği
- Reduce motion: Animasyon tercihi desteği
- Semantic markup: Doğru rol ve label tanımları
- Klavye/switch navigasyon: Tab sırası mantıklı mı?
- Hata mesajları: Görsel değil, metin bazlı feedback
- Focus management: Modal açıldığında focus doğru yere gidiyor mu?
- Zaman sınırı: Otomatik kapanan mesajlar yeterli süre veriyor mu?
Test Araçları
| Araç | Platform | Kullanım |
|---|---|---|
| Accessibility Inspector | Xcode (iOS) | Label, trait, kontrast kontrolü |
| Accessibility Scanner | Android | Otomatik a11y taraması |
| axe | Cross-platform | Web ve mobil web a11y testi |
| Color Contrast Analyzer | Tüm platformlar | Kontrast oranı hesaplama |
| Stark | Figma plugin | Tasarım aşamasında a11y kontrolü |
Accessibility sadece "iyi niyet" değildir. Daha geniş kullanıcı kitlesine ulaşmanızı sağlar ve store'larda öne çıkarılmanızı kolaylaştırır.