Erişilebilir App Store ekran görüntüleri: kontrast, metin boyutu, alt metin
App Store ekran görüntüleri, bir web sayfasıyla aynı şekilde ekran okuyucuyla gezilemiyor — Apple, ekran görüntüsü alt metnini doğrudan kullanıcıya sunmuyor. Ancak görsel erişilebilirlik kuralları (kontrast, metin boyutu, renk bağımsızlığı) kesinlikle geçerli ve bunlar küçük resim boyutundaki okunabilirliği yöneten kurallarla aynı. Her iki açıdan da yapmaya değer; zira aynı iş.
Kontrast: temel olarak WCAG AA
WCAG AA kontrast oranları:
- Normal metin: arka plana karşı minimum 4,5:1.
- Büyük metin (24pt+ normal veya 18pt+ kalın): minimum 3:1.
- Grafik öğeler / kullanıcı arayüzü kontrolleri: 3:1.
Her metni, üzerinde bulunduğu panel arka planına karşı bir kontrast denetleyicisinden geçir — ücretsiz birçok araç var. Arka planın degrade ise metnin üzerinde durduğu degradenin en koyu ve en açık noktalarına karşı kontrol et.
Yaygın hata: açık turuncudan koyu turuncuya degrade üzerinde beyaz metin. Metnin açık turuncu kısımda bulunduğu yerde kontrast 4,5:1'in altına düşer ve metin küçük resim boyutunda kaybolur.
Küçük resimde metin boyutu
App Store ekran görüntüleri birden fazla boyutta görüntülenir:
- Ürün sayfasında tam boyut (~1.290 piksel genişlik).
- Arama sonucu önizlemesi (~600 piksel genişlik).
- Arama sonucu küçük resmi (~300 piksel genişlik).
Tasarım dosyanda 1.290 × 2.796 boyutunda metnin 60px ise, 300px'lik bir arama küçük resminde yaklaşık 14px olarak görüntülenir. 14px, okunabilirlik için önerilen minimum boyutun altındadır. Çözüm: metinleri 80-100px olarak tasarla; böylece küçük resimlerde 18-22px'e iniyor. Özellikle aramada gösterilen 1-3. paneller için bu önemli.
Renk bağımsızlığı
Bilgiyi iletmek için yalnızca renge güvenme. En yaygın ihlal: yalnızca tona göre arka plandan ayırt edilebilen metin (yeşil arka plan üzerinde kırmızı metin gibi). Kırmızı-yeşil renk körlüğü olan herkes çamur görür.
Test: ekran görüntünü gri tonlamaya çevirirsen her metni hâlâ okuyabiliyor musun? Evet ise renk bağımsızsın. Hayırsa ton farkını değil, parlaklık (aydınlık) farkını artır.
App Store Connect'te alt metin
App Store Connect, ekran görüntüsü alt metnini bir web sayfasının alt niteliğini sunduğu şekilde sunmuyor. Ancak App Store Connect'in her ekran görüntüsü için App Store'a göz atan VoiceOver kullanıcıları tarafından kullanılan bir "erişilebilirlik etiketleri" alanı var. Doldur. Ekran görüntüsünün ne gösterdiğinin kısa açıklaması: "Screenshot 1" yerine "Aylık harcama özetini gösteren ana ekran".
Bu en büyük erişilebilirlik kazanımıdır; çünkü neredeyse hiç geliştirici bunu yapmıyor. App Store'a göz atan VoiceOver kullanıcıları şu anda uygulamaların büyük çoğunluğunda "screenshot 1, screenshot 2" duyuyor. Panel başına birkaç açıklama cümlesi, listelemeni bu kitle için çok daha kullanılabilir hale getirir.
"Küçük yazı tipi, dekoratif tip" anti-kalıbı
Dekoratif yazı tipleri (el yazısı komut dosyaları, aşırı ince görüntü yazı tipleri) neredeyse her zaman aynı anda erişilebilirlik ve küçük resim testlerinde başarısız olur. Tam boyutta zarif görünen ince vuruşlar, 300px'te okunaksız hale gelir ve düşük görme düzeyindeki kullanıcılar için okunamaz olur.
Bu dekoratif stilleri karusel başına en fazla bir vurgu sözcüğü için kullan. Gövde metinleri ve önemli metinler, önem verdiğin boyutlarda tutarlı vuruş ağırlığına sahip bir yazı tipine ihtiyaç duyar — modern grotesque sans-serif'lerin çoğu (Inter, SF Pro, Roboto) işe yarar.
Metin konumu ve güvenli alanlar
Apple bazen App Store karuselinin üzerine kullanıcı arayüzü yerleştiriyor ("Al" düğmesi, yaş derecelendirmesi çipi, kurulumdan sonra "Aç" düğmesi). Metnin bu alanlarda bulunuyorsa örtülür. Metinleri güvenli alanda tut: her kenardan 60px, üstten 80px ve App Store kullanıcı arayüzü için altta 200px boşluk.
Yayınlamadan önce ne test edilmeli
- Her metni, panel arka planına karşı bir kontrast denetleyicisinden geçir.
- Ekran görüntülerini bir küçük resim simülatöründe 300px genişliğinde görüntüle (veya Figma'da yeniden boyutlandır). Her metin hâlâ okunabilir olmalı.
- Renk bağımsızlığı için gri tonlama testi yap.
- App Store Connect'te her panel için erişilebilirlik etiketleri yaz.
- Test havuzunda VoiceOver kullanan biri varsa, listelemeye göz atmasını ve geri bildirim vermesini iste.
Erişilebilirliğin ötesinde neden önemli
WCAG'ın belirlediği kontrast ve boyut kuralları, insan görme araştırmalarından türetilmiştir. Bunlar keyfi değil — anlamlı bir kullanıcı yüzdesinin metni rahatça okuyamadığı eşikler. AA için tasarlamak, yaşlı kullanıcıları, parlak dış mekan ekranlarında olanları, hafif düzeltilememiş görme sorunları olanları ve aramada hızlı kaydıran herkesi kapsayan kitle için tasarlamak demektir.
Düşük görme düzeyindeki kullanıcıların ekran görüntünü okumasına yardımcı olan kurallar, güneşli trende App Store'a göz atan kullanıcılara da yardımcı olur. Aynı sorun; aynı çözüm.