Сделать один экран доступным — легко. А что, когда экранов сотни?

Привет! На связи Софа из дизайн-системы. Вместе с командой инклюзии мы встраиваем доступность в фундамент продукта.

Более 30% пользователей приложения увеличивают шрифт в настройках. Если это не поддержать — рассыпаются лейауты, а иногда и сценарии целиком. А без адаптации под скринридеры незрячие пользователи вообще не могут пользоваться приложением. Тут мы обязяны обеспечить базовое взаимодействие с продуктом, а не просто улучшить опыт

Озвучка: с 6 часов до 1,5 на экран ⭐️
Раньше разметку под скринридеры вручную готовил аналитик. Для пары экранов это ок, но не для Мобильного банка с сотнями экранов. Мы пошли от дизайн-системы — зашили базовую логику озвучки в сами компоненты дизайн-системы и придумали стандарт разметки для макетов. Это стало переломным моментом — теперь дизайнеры сами могут размечать озвучку: роли элементов и подписи для скринридеров.

Чтобы упростить процесс, мы сделали локальный плагин для фигмы: для компонентов дизайн-системы параметры подтягиваются автоматически, а кастомные элементы можно добавить вручную — прямо в плагине

В итоге, чем больше команда использует дизайн-систему, тем меньше ручной работы остается.

Увеличенные шрифты: автоматизировали превью 🌸
Компоненты в коде мы научили увеличению шрифтов, но проверить макет можно было только вручную.

Так мы сделали второй плагин — A11y Font Scale Preview. Он показывает, как экран будет выглядеть при увеличенном размере текста: фактически перерисовывает макет с нужным масштабом и помогает быстро находить проблемные места.

Он в Figma Community — можно использовать в своих проектах.

Доступность — это база❗️
Сейчас доступность обязательна для ключевых сценариев, а дизайн-система снижает стоимость ее внедрения. Помимо инструментов, мы развиваем гайды, проводим воркшопы и делимся практиками: озвучка, увеличенные шрифты, контрастность и другие принципы. Также активно внедряем доступность для веба.

Вывод простой: доступность в масштабе = доступность в фундаменте. Наш фундамент — дизайн-система.