accessibilityLabel

accessibilityLabel ile erişilebilir etiket öğrenirsin.

accessibilityLabel nedir?

accessibilityLabel, bir bileşeni screen reader için tanımlayan etikettir. Görme engelli kullanıcı VoiceOver ya da TalkBack açtığında bu etiketi duyar. Düğmenin görsel metni yeterli değilse ya da yalnızca simge varsa, etiket ne işe yaradığını söyler.

Örnek: <TouchableOpacity accessibilityLabel="Geri">. Burada düğmenin etiketi "Geri" olur; screen reader bunu yüksek sesle okur. Etiket kısa ve anlamlı olmalı; uzun cümle değil. Simgeli düğmelerde her zaman ver; metinli düğmelerde metin yeterliyse eklemene gerek yok. Bu prop hem iOS hem Android'de çalışır.

Kısa ve anlamlı etiketler

Etiketler kısa ve doğrudan olmalı. accessibilityLabel="Geri" iyi; accessibilityLabel="Tıkladığınızda bir önceki ekrana döneceksiniz" kötü. Screen reader zaten "düğme" der; etiketi tekrar etme.

Türkçe etiketler tam diakritikli olmalı: "Geri" değil "Geri", "Aç" değil "Aç". Etiket bir eylem adıysa fiil kullan: "Sepete ekle", "Paylaş", "Kapat". Birden çok bileşen aynı etiketi taşıyorsa konum ekleye: "Üst menü", "Alt menü". Etiket HTML değil; düz metin olarak okunur. Bu yüzden <Text> etiketleri içermez.

Uygulama Simgeli düğmeye etiket ekle

Bir TouchableOpacity bileşenine accessibilityLabel ekle. İçinde bir simge gösterilsin. Etiket "Ayarlar" olsun.

Örnek çözümü göster

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

function SettingsButton() {
  return (
    <TouchableOpacity accessibilityLabel="Ayarlar" onPress={() => {}}>
      <Text>?</Text>
    </TouchableOpacity>
  );
}

Kendini test et

accessibilityLabel ne zaman verilmelidir?
```
<TouchableOpacity accessibilityLabel="Geri">
```
- Simgeli düğmelerde
- Yalnızca iOS'ta
- Sadece metinli düğmelerde
- Asla verilmez
Cevabı göster

Simgeli düğmelerde — Simgeli düğmelerde görsel metin yoktur; etiket şarttır.

Geri düğmesi etiketi

<TouchableOpacity ____="Geri" onPress={goBack}>

Cevabı göster

<TouchableOpacity accessibilityLabel="Geri" onPress={goBack}>

Parçayı rolüne eşle

accessibilityLabel

Screen reader etiketi
TouchableOpacity

Dokunulabilir bileşen
onPress

Dokunma eylemi
goBack

Geri navigasyonu

Sıradaki ders: accessibilityRole

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler