Ниже — сжатый, практический дизайн + набор приёмов и тестов для обеспечения доступности (a11y) мобильного приложения для людей с нарушениями зрения и моторики.
Основные принципы
- Семантика: использовать нативные элементы и API доступности (iOS UIAccessibility, Android contentDescription/accessibilityRole), минимизировать кастомные контролы.
- Гибкость: поддерживать масштабирование шрифтов, переключаемые темы (высокая контрастность, тёмная/светлая), снижение анимаций.
- Простота взаимодействия: минимизировать требование точных жестов, увеличивать зоны касания, предсказуемый фокус и порядок навигации.
Практические приёмы (визуальная доступность)
- Контраст текста/фона: обеспечьте минимум $4.5:1$ для обычного текста, минимум $3:1$ для крупного текста; для повышенной доступности стремитесь к $7:1$.
- Масштаб текста: поддерживать системное масштабирование до как минимум $200\%$ без слома верстки; использовать относительные единицы.
- Размеры зон касания: кнопки и интерактивные элементы — минимум $44\times 44\text{pt}$ (iOS) / $48\times 48\text{dp}$ (Android); расстояние между элементами — не меньше $8\text{dp}$.
- Цвет и формы: не полагаться только на цвет для передачи информации (добавлять иконки/метки/текстовые статусы).
- Высокая контрастность/тема: предлагать отдельную настройку «высокая контрастность» и опцию «уменьшить анимацию/движение».
- Чёткий типографический ритм: читаемые шрифты, достаточный межстрочный интервал, избегать капризных декоративных начертаний.
Практические приёмы (моторика)
- Альтернативы к жестам: для свайпов/жестов предоставлять явные кнопки/контекстное меню.
- Трансформируемые вводы: поддержка внешней клавиатуры, переключателей (switch control), управление через ассистивные устройства.
- Устойчивость к ошибкам: увеличенная область активации, отмена/откат (undo), подтверждения для критичных действий.
- Таймауты: продление или отключение автоматического таймаута; предупреждения перед истечением времени.
- Простая навигация: минимальное число кликов/тапов до главных операций, крупные цели размещать в зоне досягаемости одной руки.
Screen reader и семантика
- Полные метки: каждый интерактивный элемент имеет понятную label; добавляйте hint/description для сложных контролов.
- Порядок фокуса: логический, соответствует визуальной последовательности; для экранных модальных окон — фокус внутри модалки.
- Динамические обновления: отправлять правильные уведомления (aria-live эквиваленты/announce) при изменении содержания.
- Роли и состояния: сообщать состояния переключателей, чекбоксов, выбранных элементов, прогресса.
- Тестировать доступность кастомных компонентов (списки, таблицы, сложные контролы).
Инструменты и тесты (автоматические)
- Выполнить проверку контраста (например, contrast-checker, axe-core).
- Lighthouse / axe / Accessibility Scanner (Android) / Accessibility Inspector (iOS).
- Проверка заголовков/семантики: тесты на отсутствие пустых описаний, уникальность label.
Реальные ручные тесты (обязательные)
- Экранный чтец:
- Включить VoiceOver (iOS) / TalkBack (Android) и пройти основные сценарии: регистрация, поиск, оформление заказа/основная задача — всё должно быть доступно и логично озвучено.
- Ожидаемый результат: все интерактивные элементы доступны, подписи понятны, порядок навигации логичен.
- Масштаб текста:
- Увеличить шрифт до $200\%$ и проверить расположение/перекрытия.
- Цветовая независимость:
- Включить симуляцию цветовой слепоты (deuteranopia/protanopia) и проверить, что информация остаётся различимой.
- Сенсорная доступность:
- Проверить навигацию одной рукой, большие пальцы, медленные/неровные касания.
- Отключить жесты (если возможно) и убедиться в альтернативных элементах управления.
- Переключатели/клавиатура:
- Пройти сценарии с внешней клавиатурой и/или Switch Control (iOS) / Switch Access (Android).
- Снижение движения:
- Включить «reduce motion» и проверить отсутствие критичных зависимостей от анимаций.
- Автономные проверки времени:
- Проверить сценарии с таймаутом (ввод форм, сессии) — пользователь должен иметь возможность продлить/отменить таймаут.
Контрольный чек‑лист (короткий)
- Семантика и метки у всех интерактивных элементов — да/нет.
- Контраст текста/фон — соответствует $4.5:1$ (или выше) — да/нет.
- Зоны касания ≥ $44\times 44\text{pt}$ / $48\times 48\text{dp}$ — да/нет.
- Текст масштабируется до $200\%$ — да/нет.
- Альтернативы жестам и подтверждения для критичных действий — да/нет.
- Тесты с VoiceOver/TalkBack, Switch Control, внешней клавиатурой пройдены — да/нет.
- Пользовательское тестирование с людьми с нарушениями зрения/моторики — проведено/не проведено.
Рекомендуемые этапы работы
- Включать a11y в дизайн‑ревью (before dev), писать acceptance criteria для каждой фичи.
- Автоматические проверки в CI (axe/ Lighthouse).
- Регулярные ручные тесты на реальных устройствах + тесты с реальными пользователями с инвалидностью.
Если нужно — могу прислать компактный шаблон чек‑листа в виде шагов для QA (шаг => ожидаемый результат).