Доступные скриншоты для App Store: контраст, размер текста, alt-текст
Скриншоты App Store нельзя просматривать со скринридером так же, как веб-страницу — Apple не показывает alt-текст скриншотов напрямую. Но визуальные правила доступности (контраст, размер текста, цветовая независимость) абсолютно применимы, и они совпадают с правилами читаемости в миниатюрах. Это одна и та же работа — стоит делать её ради обоих результатов.
Контраст: WCAG AA как базовый уровень
Коэффициенты контраста WCAG AA:
- Обычный текст: минимум 4,5:1 относительно фона.
- Крупный текст (24pt+ обычный или 18pt+ жирный): минимум 3:1.
- Графические элементы / элементы управления: 3:1.
Используй инструмент проверки контраста — бесплатных много — для каждой подписи относительно фона панели, на которой она расположена. Если фон — градиент, проверяй в самой светлой и самой тёмной точке градиента там, где стоит подпись.
Типичная ошибка: белый текст поверх градиента от светло-оранжевого к тёмно-оранжевому. Там, где подпись попадает на светлую часть, контраст падает ниже 4,5:1 — и текст исчезает в миниатюре.
Размер текста в миниатюре
Скриншоты App Store отображаются в нескольких размерах:
- Полный размер на странице продукта (~1 290 px в ширину).
- Предпросмотр в результатах поиска (~600 px в ширину).
- Миниатюра в результатах поиска (~300 px в ширину).
Если подпись в макете занимает 60 px при разрешении 1 290 × 2 796, в миниатюре 300 px она отображается ~14 px. Это меньше рекомендуемого минимума для читаемости. Решение: проектируй подписи размером 80–100 px, чтобы в миниатюрах они отображались 18–22 px. Особенно это важно для панелей 1–3, которые видны в поиске.
Цветовая независимость
Не передавай информацию только цветом. Самое частое нарушение: текст подписи в цвете, отличимом от фона лишь по оттенку (например, красный текст на зелёном фоне). Люди с красно-зелёной цветовой слепотой видят только мутный фон.
Тест: переведи скриншот в оттенки серого — все ли подписи по-прежнему читаются? Если да — цветовая независимость соблюдена. Если нет — увеличивай разницу в яркости, а не только в оттенке.
Alt-текст в App Store Connect
App Store Connect не предоставляет alt-текст скриншотов так же, как веб-страница использует атрибут alt. Но в App Store Connect есть поле «теги доступности» для каждого скриншота — оно используется пользователями VoiceOver в App Store. Заполняй его. Коротко описывай, что на скриншоте: «Главный экран с обзором месячных расходов», а не «Скриншот 1».
Это главный выигрыш в доступности, потому что почти никто из разработчиков не делает это. Пользователи VoiceOver в App Store сейчас слышат «скриншот 1, скриншот 2» у подавляющего большинства приложений. Несколько предложений описания на каждую панель — и твоя страница становится значительно удобнее для этой аудитории.
Антипаттерн «мелкий шрифт, декоративный стиль»
Декоративные шрифты (рукописные, сверхтонкие дисплейные) почти всегда проваливают одновременно и тест доступности, и тест миниатюры. Тонкие штрихи, выглядящие изящно в полном размере, становятся нечитаемыми при 300 px и недоступными для пользователей с ослабленным зрением.
Используй такие декоративные стили максимум для одного акцентного слова на всю карусель. Основные подписи и любой важный текст должны быть набраны шрифтом с равномерной толщиной штриха в нужных размерах — большинство современных гротесковых шрифтов (Inter, SF Pro, Roboto) с этим справляются.
Положение подписей и безопасные зоны
Apple иногда накладывает поверх карусели App Store собственные элементы (кнопка «Загрузить», значок возрастного рейтинга, кнопка «Открыть» после установки). Если подпись попадает в эти области, она перекрывается. Держи подписи в безопасной зоне: 60 px от каждого края, 80 px от верха, 200 px свободного пространства снизу для элементов App Store.
Что проверить перед публикацией
- Прогони каждую подпись через инструмент проверки контраста относительно фона панели.
- Посмотри скриншоты в ширине 300 px в симуляторе миниатюр (или просто уменьши в Figma). Каждая подпись должна оставаться читаемой.
- Проверь цветовую независимость, переведя изображение в оттенки серого.
- Заполни теги доступности для каждой панели в App Store Connect.
- Если в твоей команде тестирования есть пользователь VoiceOver, попроси его пройтись по странице приложения и оставить отзыв.
Почему это важно за пределами доступности
Правила контраста и размеров, закреплённые в WCAG, основаны на исследованиях человеческого зрения. Они не произвольны — это пороги, ниже которых значимый процент пользователей не может комфортно читать текст. Проектировать для AA — значит проектировать для аудитории, включающей пожилых пользователей, тех, кто смотрит на экран при ярком солнце, тех, у кого незначительные проблемы со зрением, и всех, кто быстро листает результаты поиска.
Правила, которые помогают людям с ослабленным зрением читать твой скриншот, также помогают тем, кто листает App Store в солнечный день в транспорте. Одна и та же проблема — одно и то же решение.