accessibilityRole

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.

Örnek çözümü göster

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

function ProfileTitle() {
  return (
    <Text accessibilityRole="header">Profil</Text>
  );
}

Kendini test et

Düğme rolünü yaz

<TouchableOpacity accessibilityRole=____ onPress={() => {}}>

Cevabı göster

<TouchableOpacity accessibilityRole="button" onPress={() => {}}>

Bağlantı için hangi rol verilir?
```
<Text accessibilityRole="?">Detaylar</Text>
```
- header
- image
- button
- link
Cevabı göster

link — link rolü bağlantı olduğunu bildirir.
Rolü karşılığına eşle

button

Düğme
link

Bağlantı
header

Başlık
image

Resim

Sıradaki ders: accessibilityHint

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler