accessibilityLabel
- React Native kursu
- Uzman
- Ders 25/47
- 5 dk
accessibilityLabel ile erişilebilir etiket öğrenirsin.
accessibilityLabel nedir?
accessibilityLabel, bir bileşeni screen reader için tanımlayan etikettir. Görme engelli kullanıcı VoiceOver ya da TalkBack açtığında bu etiketi duyar. Düğmenin görsel metni yeterli değilse ya da yalnızca simge varsa, etiket ne işe yaradığını söyler.
Örnek: <TouchableOpacity accessibilityLabel="Geri">. Burada düğmenin etiketi "Geri" olur; screen reader bunu yüksek sesle okur. Etiket kısa ve anlamlı olmalı; uzun cümle değil. Simgeli düğmelerde her zaman ver; metinli düğmelerde metin yeterliyse eklemene gerek yok. Bu prop hem iOS hem Android'de çalışır.
Kısa ve anlamlı etiketler
Etiketler kısa ve doğrudan olmalı. accessibilityLabel="Geri" iyi; accessibilityLabel="Tıkladığınızda bir önceki ekrana döneceksiniz" kötü. Screen reader zaten "düğme" der; etiketi tekrar etme.
Türkçe etiketler tam diakritikli olmalı: "Geri" değil "Geri", "Aç" değil "Aç". Etiket bir eylem adıysa fiil kullan: "Sepete ekle", "Paylaş", "Kapat". Birden çok bileşen aynı etiketi taşıyorsa konum ekleye: "Üst menü", "Alt menü". Etiket HTML değil; düz metin olarak okunur. Bu yüzden <Text> etiketleri içermez.
Uygulama Simgeli düğmeye etiket ekle
Bir TouchableOpacity bileşenine accessibilityLabel ekle. İçinde bir simge gösterilsin. Etiket "Ayarlar" olsun.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SettingsButton() {
return (
// accessibilityLabel ekle
<TouchableOpacity onPress={() => {}}>
<Text>?</Text>
</TouchableOpacity>
);
}Örnek çözüm
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function SettingsButton() {
return (
<TouchableOpacity accessibilityLabel="Ayarlar" onPress={() => {}}>
<Text>?</Text>
</TouchableOpacity>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 accessibilityLabel ne zaman verilmelidir?
<TouchableOpacity accessibilityLabel="Geri">- Simgeli düğmelerde Doğru cevap
- Yalnızca iOS'ta
- Sadece metinli düğmelerde
- Asla verilmez
Açıklama: Simgeli düğmelerde görsel metin yoktur; etiket şarttır.
2 Geri düğmesi etiketi
<TouchableOpacity ____="Geri" onPress={goBack}><TouchableOpacity accessibilityLabel="Geri" onPress={goBack}>Açıklama: accessibilityLabel screen reader için etiket verir.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
accessibilityLabel |
Screen reader etiketi |
TouchableOpacity |
Dokunulabilir bileşen |
onPress |
Dokunma eylemi |
goBack |
Geri navigasyonu |