accessibilityRole
- React Native kursu
- Uzman
- Ders 26/47
- 5 dk
accessibilityRole ile rol öğrenirsin.
accessibilityRole nedir?
accessibilityRole, bileşenin semantic türünü bildirir. Screen reader bileşeni nasıl tanıtacağını bilsin diye: button, link, header, image, text gibi değerler alır.
Örnek: <TouchableOpacity accessibilityRole="button">. Screen reader bunu "düğme" olarak tanıtır. accessibilityRole="link" verirsen "bağlantı" der. Bu, görsel türü ile semantic türü ayrıştırdığı için önemlidir: bir Text'i button yapabilirsin. Değerler sabit bir listeden gelir; serbest metin yazılamaz. Yanlış rol, ekran okuyucu kullanıcısını şaşırtır.
Rollerin listesi
Yaygın roller: button (dokunulabilir düğme), link (bağlantı), header (başlık), image (resim), text (metin), adjustable (ayarlanabilir, örn. slider). Her rolün ekran okuyucuda karşılığı vardır.
Örnek: bir başlık için <Text accessibilityRole="header">Ayarlar</Text>. Screen reader bunu "başlık" olarak tanıtır; kullanıcı başlıklar arasında hızla gezinebilir. Bir resim için accessibilityRole="image" verirsin; etiketi de eklersen resmin ne olduğunu söyler. Rol, bileşenin HTML karşılığıyla değil, davranışıyla ilgilidir.
Uygulama Başlığa rol ekle
Bir Text bileşenine accessibilityRole ekle. Değer "header" olsun. İçindeki metin Profil kalsın.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
function ProfileTitle() {
return (
// accessibilityRole ekle
<Text>Profil</Text>
);
}Örnek çözüm
import React from 'react';
import { Text } from 'react-native';
function ProfileTitle() {
return (
<Text accessibilityRole="header">Profil</Text>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Düğme rolünü yaz
<TouchableOpacity accessibilityRole=____ onPress={() => {}}><TouchableOpacity accessibilityRole="button" onPress={() => {}}>Açıklama: button rolü düğme olduğunu bildirir.
2 Bağlantı için hangi rol verilir?
<Text accessibilityRole="?">Detaylar</Text>- header
- image
- button
- link Doğru cevap
Açıklama: link rolü bağlantı olduğunu bildirir.
3 Rolü karşılığına eşle
| Kavram | Anlamı |
|---|---|
button |
Düğme |
link |
Bağlantı |
header |
Başlık |
image |
Resim |