Flutter ve React Native'de Erişilebilirlik Kodlaması

# Flutter ve React Native'de Erişilebilirlik Kodlaması

Erişilebilirlik (A11y) sadece engelli kullanıcılar için değil. Gözlüğünü unutan biri de ekranı okutmayı kullanabilir. Uygulamayı herkes kullanabilir hale getirmek yazılımcının sorumluluğu.

Flutter'da `Semantics` widget'ı erişilebilirlik bilgisi ekler. Screen reader'lar bunu okur.

1Semantics(
2label: 'Gönder Butonu',
3button: true,
4enabled: true,
5onTap: () => print('Gönderildi'),
6child: GestureDetector(
7onTap: () => print('Gönderildi'),
8child: Container(
9padding: EdgeInsets.all(12),
10color: Colors.blue,
11child: Text('Gönder'),
12),
13),
14)

Çıktı: Screen reader kullanıcısı "Gönder Butonu, buton" şeklinde duyar.

React Native'de `accessible` ve `accessibilityLabel` prop'ları kullanılır.

1import { TouchableOpacity, Text } from 'react-native';
2
3<TouchableOpacity
4accessible={true}
5accessibilityLabel="Gönder butonu"
6accessibilityRole="button"
7onPress={() => console.log('Gönderildi')}
8style={{ padding: 12, backgroundColor: 'blue' }}
9>
10<Text style={{ color: 'white' }}>Gönder</Text>
11</TouchableOpacity>

Çıktı: TalkBack (Android) veya VoiceOver (iOS) "Gönder butonu, buton" okur.

Giriş alanlarına açıklayıcı metin ekleyin.

Flutter:

1Semantics(
2label: 'Email adresi girin',
3child: TextField(
4decoration: InputDecoration(
5hintText: 'ornek@mail.com',
6labelText: 'Email',
7),
8),
9)

React Native:

1<TextInput
2accessible={true}
3accessibilityLabel="Email adresi girin"
4placeholder="ornek@mail.com"
5placeholderTextColor="#999"
6/>

Flutter: Ayarlar Erişilebilirlik TalkBack/VoiceOver aç.

React Native: Aynı şekilde cihaz ayarlarından test et.

Erişilebilir uygulama = daha fazla kullanıcı. Semantik etiketler, açıklayıcı metinler ve doğru role'ler kullan. Hiçbir ekstra iş değil, sadece bilinçli kod yazma.