Özet - Erişilebilirlik
- React Native kursu
- Uzman
- Ders 30/47
- 5 dk
Label, Role, Hint ve VoiceOver'ı birleştirerek erişilebilir bir buton yazarsın.
Özet - Erişilebilirlik
Bu grupta accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState ve VoiceOver/TalkBack testini gördün. Erişilebilir bir bileşen dört parçadan oluşur: ne olduğunu (label), hangi tür (role), ne yapacağını (hint) ve o anki durumu (state).
Son derste bu dördünü birleştiren bir bileşen yazacaksın. Böylece screen reader kullanıcıları uygulamayı sorunsuz gezebilir. Erişilebilirlik bir ek değil; her bileşenin parçasıdır. Test etmeden bırakma; en az bir ekranı VoiceOver ile dolaş.
Uygulama Dört prop'u birleştir
Bir TouchableOpacity'a dört erişilebilirlik prop'u ekle: accessibilityLabel="Bildirimler", accessibilityRole="button", accessibilityHint="Bildirimleri aç", accessibilityState={{ selected: true }}. onPress de olsun.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function BellButton() {
return (
// dört erişilebilirlik prop'unu ekle
<TouchableOpacity onPress={() => {}}>
<Text>Bildirimler</Text>
</TouchableOpacity>
);
}Örnek çözüm
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function BellButton() {
return (
<TouchableOpacity accessibilityLabel="Bildirimler" accessibilityRole="button" accessibilityHint="Bildirimleri aç" accessibilityState={{ selected: true }} onPress={() => {}}>
<Text>Bildirimler</Text>
</TouchableOpacity>
);
}Uygulama Erişilebilir resim yaz
Bir Image bileşenine accessibilityLabel="Logo" ve accessibilityRole="image" ekle. source prop'u zaten verilmiş olsun.
Başlangıç kodu
import React from 'react';
import { Image } from 'react-native';
function Logo() {
return (
// erişilebilirlik prop'larını ekle
<Image source={require('./logo.png')} />
);
}Örnek çözüm
import React from 'react';
import { Image } from 'react-native';
function Logo() {
return (
<Image accessibilityLabel="Logo" accessibilityRole="image" source={require('./logo.png')} />
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi bir bileşenin durumunu verir?
accessibilityState={{ checked: true }}- accessibilityLabel
- accessibilityState Doğru cevap
- accessibilityRole
- accessibilityHint
Açıklama: accessibilityState durumu taşır.
2 Prop'u rolüne eşle
| Kavram | Anlamı |
|---|---|
accessibilityLabel |
Ne olduğunu söyler |
accessibilityRole |
Semantic tür |
accessibilityHint |
Ne yapacağını söyler |
accessibilityState |
O anki durum |