accessibilityHint
- React Native kursu
- Uzman
- Ders 27/47
- 5 dk
accessibilityHint ile ipucu öğrenirsin.
accessibilityHint nedir?
accessibilityHint, bileşen dokunulduğunda ne olacağını açıklayan ipucudur. Etiket ne olduğunu söyler; ipucu ne yapacağını. Kullanıcı kararsız kaldığında ipucu yardımcı olur.
Örnek: <TouchableOpacity accessibilityLabel="Sepet" accessibilityHint="Sepete git">. Screen reader önce "Sepet, düğme" der, sonra "Sepete git" ekler. İpucu bir eylem cümlesidir: "Sepete git", "Profili düzenle", "Çıkış yap". Etiket yeterliyse ipucu verme; gereksiz tekrar olur. İpucu her zaman bir fiille başlamalı.
İpucu yazma yöntemi
İpucu bir eylem cümlesidir. Kısa olmalı: "Sepete git" iyi, "Bu düğmeye dokunduğunuzda sepet sayfasına yönlendirileceksiniz" kötü. Screen reader zaten uzun okuma yapıyor; gereksiz uzatma.
Türkçe ipuçları tam diakritikli olmalı: "Sepete git" değil "Sepete git", "Çıkış yap" değil "Çıkış yap". İpucu bir fiille başlar: git, yap, aç, kapat, düzenle, paylaş. Etiket zaten eylemi içeriyorsa ipucu gereksizdir. Örneğin accessibilityLabel="Çıkış yap" yeterli; accessibilityHint="Hesaptan çıkış yapar" tekrar olur. İpucu yalnızca belirsizliği gidermek için kullan.
Uygulama Sepet düğmesine ipucu ekle
Bir TouchableOpacity'a hem accessibilityLabel hem accessibilityHint ekle. Etiket "Sepet", ipucu "Sepete git" olsun.
Başlangıç kodu
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function CartButton() {
return (
// etiket ve ipucu ekle
<TouchableOpacity onPress={() => {}}>
<Text>Sepet</Text>
</TouchableOpacity>
);
}Örnek çözüm
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function CartButton() {
return (
<TouchableOpacity accessibilityLabel="Sepet" accessibilityHint="Sepete git" onPress={() => {}}>
<Text>Sepet</Text>
</TouchableOpacity>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
accessibilityLabel |
Ne olduğunu söyler |
accessibilityHint |
Ne yapacağını söyler |
accessibilityRole |
Semantic tür |
onPress |
Dokunma eylemi |
2 Sepete git ipucu
accessibilityHint=____ onPress={() => {}}>accessibilityHint="Sepete git" onPress={() => {}}>Açıklama: İpucu bir fiille başlar.
3 Hangi ipucu iyi yazılmış?
<TouchableOpacity accessibilityHint="?">- "Bu bir düğmedir"
- Sepet
- "Sepete git" Doğru cevap
- Dokun
Açıklama: "Sepete git" bir eylem cümlesidir.