Özet - Erişilebilirlik

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.

Örnek çözümü göster

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.

Örnek çözümü göster

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

function Logo() {
  return (
    <Image accessibilityLabel="Logo" accessibilityRole="image" source={require('./logo.png')} />
  );
}

Kendini test et

Hangisi bir bileşenin durumunu verir?
```
accessibilityState={{ checked: true }}
```
- accessibilityLabel
- accessibilityState
- accessibilityRole
- accessibilityHint
Cevabı göster

accessibilityState — accessibilityState durumu taşır.
Prop'u rolüne eşle

accessibilityLabel

Ne olduğunu söyler
accessibilityRole

Semantic tür
accessibilityHint

Ne yapacağını söyler
accessibilityState

O anki durum

Sıradaki ders: i18n nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler