accessibilityState

accessibilityState ile durum öğrenirsin.

accessibilityState nedir?

accessibilityState, bileşenin o anki durumunu screen reader'a bildirir. selected, checked, disabled, busy gibi boolean alanlar taşır. Kullanıcı durumu duymadan bileşeni kullanamaz.

Örnek: bir onay kutusu için accessibilityState={{ checked: true }}. Screen reader "işaretli" der. disabled: true verirsen "devre dışı" ekler. Bu alanlar bileşenin görsel durumunu yansıtmalı; görsel ile söz bir olmalı. State'i güncellemezsen kullanıcı yanlış bilgi duyar. Bu yüzden state her değişimde güncellenir.

Uygulama Onay kutusuna state ekle

Bir TouchableOpacity'a accessibilityRole="checkbox" ve accessibilityState={{ checked: isChecked }} ekle. isChecked bir state değişkeni olsun.

Örnek çözümü göster

import React, { useState } from 'react';
import { TouchableOpacity, Text } from 'react-native';

function AcceptBox() {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <TouchableOpacity accessibilityRole="checkbox" accessibilityState={{ checked: isChecked }} onPress={() => setIsChecked(!isChecked)}>
      <Text>Kabul</Text>
    </TouchableOpacity>
  );
}

State alanları

Yaygın state alanları: checked (onay kutusu işaretli mi), selected (sekme seçili mi), disabled (devre dışı mı), busy (yükleniyor mu). Her biri boolean olur; true/false.

Örnek: bir sekme için accessibilityState={{ selected: true }}. Screen reader "seçili" der. Bir düğme yükleniyorsa busy: true verirsin; kullanıcı "meşgul" duyar ve tekrar dokunmaz. Birden fazla alan aynı anda verilebilir: { selected: true, disabled: false }. Yalnızca doğru olan alanları yaz; her alan ekran okuyucuya ek bilgi katar.

Kendini test et

disabled düğme için ne verilir?
```
<TouchableOpacity accessibilityState={{ ? }}>
```
- disabled: true
- busy: false
- selected: false
- checked: true
Cevabı göster

disabled: true — disabled: true devre dışı olduğunu bildirir.

checked alanı

accessibilityState={{ ____: isChecked }}

Cevabı göster

accessibilityState={{ checked: isChecked }}

Alanı karşılığına eşle

checked

İşaretli
selected

Seçili
disabled

Devre dışı
busy

Meşgul

Sıradaki ders: VoiceOver ve TalkBack

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler