Mobil

Mobil uygulama erişilebilirliği

iOS ve Android uygulamalarında VoiceOver ve TalkBack desteği, dokunma alanları, sistem yazı boyutu ve formlar: mobile özgü erişilebilirlik konuları.

Mobilde erişilebilirlik neden farklı?

Mobil uygulamalarda temel ilkeler web ile aynıdır, ancak kullanım biçimi farklıdır. Kullanıcılar dokunma ve kaydırma hareketleriyle gezinir, ekran küçüktür ve cihaz sürekli farklı ortamlarda kullanılır. Ayrıca iOS ve Android'in kendi erişilebilirlik altyapıları vardır; uygulamanın bu altyapılarla doğru konuşması gerekir.

Bakanlığın A Seviyesi Kontrol Listesi her soruyu hem web sayfaları hem de mobil uygulama ekranları için tanımlar ve mobil platformlara özgü örnekler verir.

VoiceOver ve TalkBack desteği

iOS'ta VoiceOver, Android'de TalkBack yerleşik ekran okuyuculardır. Kullanıcı parmağını ekranda gezdirerek veya kaydırarak öğeler arasında ilerler, ekran okuyucu da her öğenin adını, rolünü ve durumunu okur.

  • Erişilebilir ad: Metin içermeyen her buton ve ikon için iOS'ta accessibilityLabel, Android'de contentDescription tanımlayın. Bir çöp kutusu ikonu "Sil" olarak okunmalıdır, "Görsel" olarak değil.
  • Rol: Öğenin buton, bağlantı, başlık veya onay kutusu olduğu ekran okuyucuya bildirilmelidir. Standart bileşenler bunu kendiliğinden yapar; özel bileşenlerde rolü siz tanımlamalısınız.
  • Durum ve değer: Bir anahtarın açık mı kapalı mı olduğu, bir kaydırıcının değeri veya bir sekmenin seçili olup olmadığı ekran okuyucuya aktarılmalı ve değiştiğinde güncellenmelidir.
  • Gruplama: Bir ürün kartındaki ad, fiyat ve puan gibi birbirine bağlı bilgiler tek bir öğe olarak gruplanırsa, kullanıcı kartı tek seferde dinler.
  • Dekoratif öğeler: Yalnızca süs amaçlı görseller erişilebilirlik ağacından çıkarılmalıdır.
  • Odak sırası: Ekran okuyucunun öğeleri okuma sırası, ekranın görsel düzeniyle uyumlu olmalıdır.

Dokunma alanları ve hareketler

  • Yeterli dokunma alanı: Küçük butonlar, hareket kısıtlılığı olan kullanıcılar için büyük bir engeldir. Apple en az 44×44 pt, Google en az 48×48 dp dokunma alanı önerir.
  • Karmaşık hareketlere alternatif: Çimdikleme, çoklu parmak veya belirli bir yol çizme gerektiren işlemler için tek dokunuşla çalışan bir alternatif sunun. Örneğin haritada yakınlaştırma için "+" ve "−" butonları ekleyin.
  • Cihaz hareketine alternatif: Telefonu sallayarak veya eğerek yapılan işlemlerin ekranda bir buton karşılığı olmalı ve bu özellik kapatılabilmelidir.
  • Yanlışlıkla tetiklenmeyi önleyin: İşlemler parmak ekrana değdiği anda değil, kaldırıldığında tetiklenmeli; böylece kullanıcı parmağını kaydırarak vazgeçebilir.

Metin boyutu ve görünüm

  • Sistem yazı boyutunu destekleyin: Kullanıcı cihazının yazı boyutunu büyüttüğünde uygulamadaki metinler de büyümeli, içerik kesilmemeli veya üst üste binmemelidir. iOS'ta Dynamic Type, Android'de sp birimi bunun için kullanılır.
  • Ekran yönünü kilitlemeyin: Cihazını sabit bir tutucuya takılı kullananlar için uygulama hem dikey hem yatay modda çalışmalıdır.
  • Kontrastı her modda kontrol edin: Açık ve karanlık modun her ikisinde de metinler okunabilir olmalıdır.
  • Bilgiyi yalnızca renkle vermeyin: Durum bilgilerini renkle birlikte metin veya ikonla da gösterin.

Formlar ve veri girişi

  • Etiketler: Her giriş alanının ekran okuyucunun okuyabileceği bir etiketi olmalıdır. Yalnızca ipucu metni (hint) veya ikon yeterli değildir.
  • Hata mesajları: Hatalar metin olarak gösterilmeli ve ilgili alanla ilişkilendirilmelidir.
  • Otomatik doldurma: iOS'ta textContentType, Android'de autofillHints ile ad, e-posta ve adres gibi alanların otomatik doldurulmasını destekleyin.
  • Zaman sınırları: Oturum veya işlem süresi sınırlıysa, kullanıcı süre dolmadan uyarılmalı ve süreyi uzatabilmelidir.

Mobil uygulamayı test etmek

  • VoiceOver ile deneyin: iPhone'da Ayarlar > Erişilebilirlik bölümünden VoiceOver'ı açın ve uygulamanızın ana akışlarını gözünüz kapalı tamamlamaya çalışın.
  • TalkBack ile deneyin: Android cihazda aynı testi TalkBack ile tekrarlayın.
  • Platform araçlarını kullanın: Xcode'daki Accessibility Inspector ve Google'ın Accessibility Scanner uygulaması, eksik etiketleri ve küçük dokunma alanlarını hızlıca gösterir.
  • Yazı boyutunu büyütün: Sistem yazı boyutunu en büyük değere getirip tüm ekranları kontrol edin.

Mobil web siteleri

Uygulamanız yoksa bile web siteniz büyük olasılıkla telefonlardan ziyaret ediliyor. Duyarlı (responsive) bir sitenin de dokunma alanları, yakınlaştırmaya izin verme ve ekran yönü konularında aynı kurallara uyması gerekir. Sayfanın yakınlaştırılmasını engelleyen user-scalable=no ayarı, az gören kullanıcılar için ciddi bir engeldir.

Bu rehberin sitenize ne katacağını görün

Ücretsiz tarama sitenizi 200+ kontrol noktasında analiz eder ve eksikleri önceliklendirir.