Tangkapan layar App Store yang aksesibel: kontras, ukuran teks, alt text
Tangkapan layar App Store tidak dapat dijelajahi dengan screen reader seperti halaman web — Apple tidak mengekspos alt text tangkapan layar langsung ke pengguna. Namun aturan aksesibilitas visual (kontras, ukuran teks, independensi warna) jelas berlaku, dan kebetulan aturan ini sama dengan yang mengatur keterbacaan di ukuran thumbnail. Layak dilakukan keduanya karena pada dasarnya pekerjaan yang sama.
Kontras: WCAG AA sebagai dasar
Rasio kontras WCAG AA:
- Teks normal: minimum 4.5:1 terhadap latar belakang.
- Teks besar (24pt+ reguler atau 18pt+ tebal): minimum 3:1.
- Elemen grafis / kontrol UI: 3:1.
Gunakan pemeriksa kontras — ada banyak yang gratis — untuk setiap teks terhadap latar belakang panel tempatnya berada. Jika latar belakangmu berupa gradien, periksa pada titik paling gelap dan paling terang dari gradien di mana teks tersebut berada.
Kegagalan umum: teks putih di atas gradien oranye muda ke oranye gelap. Di mana teks berada pada oranye muda, kontras turun di bawah 4.5:1 dan teks menghilang di ukuran thumbnail.
Ukuran teks di thumbnail
Tangkapan layar App Store dirender dalam berbagai ukuran:
- Ukuran penuh di halaman produk (~1.290 px lebar).
- Pratinjau hasil pencarian (~600 px lebar).
- Thumbnail hasil pencarian (~300 px lebar).
Jika teksmu berukuran 60px di file desain pada 1.290 × 2.796, ia dirender pada ~14px di thumbnail pencarian 300px. 14px di bawah ukuran minimum yang direkomendasikan untuk keterbacaan. Solusinya: desain teks pada 80-100px agar dirender pada 18-22px di thumbnail. Terutama untuk panel 1-3 yang muncul di pencarian.
Independensi warna
Jangan mengandalkan warna saja untuk menyampaikan informasi. Pelanggaran paling umum: teks yang warnanya hanya dapat dibedakan dari latar belakang berdasarkan hue (teks merah di latar belakang hijau, misalnya). Siapa pun dengan buta warna merah-hijau hanya melihat warna keruh.
Tes: jika kamu mengubah tangkapan layar menjadi skala abu-abu, apakah kamu masih bisa membaca setiap teks? Jika ya, kamu sudah independen dari warna. Jika tidak, tingkatkan perbedaan luminans (kecerahan), bukan hanya perbedaan hue.
Alt text di App Store Connect
App Store Connect tidak mengekspos alt text tangkapan layar seperti halaman web mengekspos atribut alt. Namun App Store Connect memiliki kolom "accessibility tags" per tangkapan layar yang digunakan oleh pengguna VoiceOver yang menjelajahi App Store. Isi kolom itu. Deskripsi singkat tentang apa yang ditampilkan tangkapan layar: "Layar utama dengan ringkasan pengeluaran bulanan" bukan "Tangkapan layar 1".
Ini adalah peningkatan aksesibilitas terbesar karena hampir tidak ada pengembang yang melakukannya. Pengguna VoiceOver yang menjelajahi App Store saat ini mendengar "tangkapan layar 1, tangkapan layar 2" untuk sebagian besar aplikasi. Beberapa kalimat deskripsi per panel membuat daftarmu jauh lebih mudah digunakan bagi audiens tersebut.
Anti-pola "font kecil, tipe dekoratif"
Font dekoratif (skrip tulisan tangan, font display ultra-tipis) hampir selalu gagal uji aksesibilitas dan thumbnail sekaligus. Goresan tipis yang terlihat elegan di ukuran penuh menjadi tidak terbaca di 300px dan tidak dapat dibaca oleh pengguna dengan penglihatan lemah.
Gunakan gaya dekoratif ini maksimal untuk satu kata aksen per korsel. Teks utama dan teks penting apa pun membutuhkan font dengan ketebalan goresan yang konsisten pada ukuran yang kamu pedulikan — sebagian besar sans-serif grotesque modern (Inter, SF Pro, Roboto) bekerja dengan baik.
Posisi teks dan area aman
Apple terkadang melapisi UI di atas korsel App Store (tombol "Unduh", chip rating usia, tombol "Buka" setelah instalasi). Jika teksmu berada di area tersebut, ia akan tertutup. Jaga teks di zona aman: 60px dari setiap sisi, 80px dari atas, 200px bersih di bagian bawah untuk UI App Store.
Yang perlu diuji sebelum rilis
- Jalankan setiap teks melalui pemeriksa kontras terhadap latar belakang panelnya.
- Lihat tangkapan layarmu pada lebar 300px di simulator thumbnail (atau cukup ubah ukuran di Figma). Setiap teks harus masih terbaca.
- Tes skala abu-abu untuk independensi warna.
- Tulis accessibility tags untuk setiap panel di App Store Connect.
- Jika kamu memiliki pengguna VoiceOver di kelompok pengujianmu, minta mereka menjelajahi daftarmu dan melaporkan hasilnya.
Mengapa ini penting di luar aksesibilitas
Aturan kontras dan ukuran yang dikodifikasi WCAG berasal dari penelitian penglihatan manusia. Bukan sewenang-wenang — ini adalah ambang batas di mana persentase pengguna yang bermakna tidak dapat membaca teks dengan nyaman. Mendesain untuk AA berarti mendesain untuk populasi yang mencakup pengguna yang lebih tua, pengguna di layar luar ruangan yang terang, pengguna dengan masalah penglihatan ringan yang tidak dikoreksi, plus semua orang yang menggulir cepat melalui pencarian.
Aturan yang sama yang membantu pengguna dengan penglihatan lemah membaca tangkapan layarmu juga membantu pengguna yang menggulir App Store di kereta saat siang terik. Masalah yang sama; solusi yang sama.