VoiceOver ve TalkBack

VoiceOver ve TalkBack screen reader'ları öğrenirsin.

VoiceOver ve TalkBack

VoiceOver iOS'un screen reader'ı, TalkBack Android'inkidir. Görsel ekranı sesli olarak okurlar. Kullanıcı parmağıyla gezinir; her bileşen yüksek sesle duyulur. Erişilebilir bir uygulama, bu araçlarla sorunsuz çalışır.

Test için VoiceOver'ı Ayarlar > Erişilebilirlik > VoiceOver'dan, TalkBack'i Ayarlar > Erişilebilirlik > TalkBack'ten açarsın. Geliştirme sırasında her ekranı en az bir kez screen reader ile gezmelisin. accessibilityLabel, accessibilityRole ve accessibilityHint doğru verilmişse okuma akıcı olur. Atlanan bileşenler veya anlamsız etiketler kullanıcıyı yabar.

Test yöntemi

Screen reader testi üç adımda yapılır. Bir: screen reader'ı aç. İki: parmağınla ekranı gez; her bileşeni dinle. Üç: eksik veya yanlış etiketleri not et ve düzelt. Bu döngüyü her ekran için tekrarla.

Gezerken şunlara bak: her dokunulabilir bileşenin etiketi var mı? Etiket anlamlı mı? Rol doğru mu? Durum bilgisi geliyor mu? Simgeli düğmeler atlanıyor mu? Bir bileşen "düğme" diyor ama ne olduğu belli değilse etiket eksiktir. VoiceOver'da iki parmakla yukarı kaydırarak başlıklar arasında gezilebilir; bu yüzden accessibilityRole="header" vermek önemli.

Uygulama Erişilebilir düğme yaz

Bir TouchableOpacity yaz. Üç erişilebilirlik prop'u ekle: accessibilityLabel="Kaydet", accessibilityRole="button", accessibilityHint="Değişiklikleri kaydet". onPress de olsun.

Örnek çözümü göster

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

function SaveButton() {
  return (
    <TouchableOpacity accessibilityLabel="Kaydet" accessibilityRole="button" accessibilityHint="Değişiklikleri kaydet" onPress={() => {}}>
      <Text>Kaydet</Text>
    </TouchableOpacity>
  );
}

Kendini test et

TalkBack hangi platformda bulunur?
```
Settings > Accessibility > TalkBack
```
- Web
- iOS
- Android
- Windows
Cevabı göster

Android — TalkBack Android'in screen reader'ıdır.
Aracı platformuna eşle

VoiceOver

iOS
TalkBack

Android
accessibilityLabel

Etiket
header rolü

Başlık gezintisi

iOS screen reader

const reader = '____';

Cevabı göster

const reader = 'VoiceOver';

Sıradaki ders: Özet - Erişilebilirlik

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler