Dostępne zrzuty ekranu App Store: kontrast, rozmiar tekstu, alt text
Zrzuty ekranu App Store nie są przeglądane czytnikiem ekranu tak samo jak strona internetowa — Apple nie udostępnia użytkownikowi bezpośrednio alt textu zrzutów ekranu. Jednak wizualne zasady dostępności (kontrast, rozmiar tekstu, niezależność od koloru) jak najbardziej obowiązują i okazuje się, że są to te same zasady, które rządzą czytelnością w rozmiarze miniatury. Warto zadbać o obie kwestie naraz, bo to ta sama praca.
Kontrast: WCAG AA jako punkt wyjścia
Współczynniki kontrastu WCAG AA:
- Tekst zwykły: minimum 4,5:1 względem tła.
- Tekst duży (24pt+ zwykły lub 18pt+ pogrubiony): minimum 3:1.
- Elementy graficzne / kontrolki UI: 3:1.
Używaj narzędzia do sprawdzania kontrastu — jest wiele bezpłatnych — dla każdego podpisu względem tła panelu, na którym się znajduje. Jeśli tło jest gradientem, sprawdź kontrast w najciemniejszym i najjaśniejszym punkcie gradientu tam, gdzie siedzi podpis.
Częsty błąd: biały tekst na gradiencie od jasnopomarańczowego do ciemnopomarańczowego. Tam, gdzie podpis leży na jasnej pomarańczy, kontrast spada poniżej 4,5:1 i tekst znika w rozmiarze miniatury.
Rozmiar tekstu w miniaturze
Zrzuty ekranu App Store renderują się w wielu rozmiarach:
- Pełny rozmiar na stronie produktu (~1290 px szerokości).
- Podgląd w wynikach wyszukiwania (~600 px szerokości).
- Miniatura w wynikach wyszukiwania (~300 px szerokości).
Jeśli twój podpis ma 60px w pliku projektowym przy 1290 × 2796, renderuje się na ~14px w miniaturze o szerokości 300px. 14px jest poniżej zalecanego minimum dla czytelności. Rozwiązanie: projektuj podpisy na 80–100px, tak żeby renderowały się na 18–22px w miniaturach. Dotyczy to szczególnie paneli 1–3, które są widoczne w wynikach wyszukiwania.
Niezależność od koloru
Nie polegaj wyłącznie na kolorze do przekazywania informacji. Najczęstsze naruszenie: tekst podpisu w kolorze, który odróżnia się od tła tylko odcieniem (czerwony tekst na zielonym tle). Każda osoba z daltonizmem czerwono-zielonym widzi błoto.
Test: jeśli przekształcisz swój zrzut ekranu w odcienie szarości, czy nadal możesz przeczytać każdy podpis? Jeśli tak, masz niezależność od koloru. Jeśli nie, zwiększ różnicę luminancji (jasności), a nie tylko odcienia.
Alt text w App Store Connect
App Store Connect nie udostępnia alt textu zrzutów ekranu tak jak strona internetowa udostępnia atrybuty alt. Ale App Store Connect ma pole „tagi dostępności” dla każdego zrzutu ekranu, używane przez użytkowników VoiceOver przeglądających App Store. Wypełnij je. Krótki opis tego, co pokazuje zrzut ekranu: „Ekran główny z miesięcznym podsumowaniem wydatków” zamiast „Zrzut ekranu 1”.
To największa pojedyncza korzyść dla dostępności, bo prawie żaden deweloper tego nie robi. Użytkownicy VoiceOver przeglądający App Store słyszą teraz „zrzut ekranu 1, zrzut ekranu 2” dla zdecydowanej większości aplikacji. Kilka zdań opisu na panel sprawia, że twój listing staje się znacznie bardziej użyteczny dla tej grupy.
Antywzorzec „mała czcionka, ozdobny typ”
Czcionki ozdobne (skrypty odręczne, ekstremalnie cienkie czcionki display) prawie zawsze jednocześnie zawodzą testy dostępności i miniatur. Cienkie kreski, które przy pełnym rozmiarze wyglądają elegancko, stają się nieczytelne przy 300px i niemożliwe do odczytania dla użytkowników ze słabym wzrokiem.
Używaj tych ozdobnych stylów do jednego akcentowanego słowa na karuzelę. Podpisy główne i każdy ważny tekst wymagają czcionki z jednolitą grubością kresek przy rozmiarach, które cię interesują — większość nowoczesnych grotesków bezszeryfowych (Inter, SF Pro, Roboto) nadaje się doskonale.
Pozycja podpisu i bezpieczne strefy
Apple czasami nakłada elementy UI na karuzelę App Store (przycisk „Pobierz”, chip oceny wiekowej, przycisk „Otwórz” po instalacji). Jeśli twój podpis leży w tych obszarach, zostanie zasłonięty. Trzymaj podpisy w bezpiecznej strefie: 60px od każdej krawędzi bocznej, 80px od góry, 200px wolnych od dołu na UI App Store.
Co sprawdzić przed publikacją
- Sprawdź każdy podpis narzędziem do kontrastu względem tła jego panelu.
- Obejrzyj zrzuty ekranu przy szerokości 300px w symulatorze miniatur (lub po prostu zmień rozmiar w Figma). Każdy podpis powinien być nadal czytelny.
- Przetestuj odcienie szarości pod kątem niezależności od koloru.
- Wpisz tagi dostępności dla każdego panelu w App Store Connect.
- Jeśli masz użytkownika VoiceOver w swojej grupie testowej, poproś go o przejrzenie listingu i podzielenie się uwagami.
Dlaczego to ważne poza dostępnością
Zasady kontrastu i rozmiaru skodyfikowane przez WCAG wywodzą się z badań nad ludzkim wzrokiem. Nie są arbitralne — to progi, poniżej których znaczna część użytkowników nie może wygodnie czytać tekstu. Projektowanie dla AA oznacza projektowanie dla populacji obejmującej starszych użytkowników, użytkowników na jasno oświetlonych ekranach na zewnątrz, użytkowników z łagodnymi nieleczonymi problemami ze wzrokiem — plus wszystkich, którzy szybko przewijają wyniki wyszukiwania.
Te same zasady, które pomagają użytkownikom ze słabym wzrokiem przeczytać twój zrzut ekranu, pomagają też użytkownikom przewijającym App Store w słonecznym pociągu. Ten sam problem; to samo rozwiązanie.