VoiceOver ve TalkBack
- React Native kursu
- Uzman
- Ders 29/47
- 5 dk
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.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SaveButton() {
return (
// üç erişilebilirlik prop'unu ekle
<TouchableOpacity onPress={() => {}}>
<Text>Kaydet</Text>
</TouchableOpacity>
);
}Örnek çözüm
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>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 TalkBack hangi platformda bulunur?
Settings > Accessibility > TalkBack- Web
- iOS
- Android Doğru cevap
- Windows
Açıklama: TalkBack Android'in screen reader'ıdır.
2 Aracı platformuna eşle
| Kavram | Anlamı |
|---|---|
VoiceOver |
iOS |
TalkBack |
Android |
accessibilityLabel |
Etiket |
header rolü |
Başlık gezintisi |
3 iOS screen reader
const reader = '____';const reader = 'VoiceOver';Açıklama: VoiceOver iOS'un screen reader'ıdır.