Доступность звучит как что-то из области благотворительности — «сделаем удобно для людей с ограничениями». На деле это про качество продукта для всех. Тот самый светло-серый текст на белом фоне, который так стильно смотрится на макете в тёмной студии, превращается в невидимку на телефоне под уличным солнцем — и не важно, есть у человека проблемы со зрением или он просто вышел на улицу. Хорошая новость в том, что подавляющее большинство барьеров ставится и убирается ровно на этапе дизайна, задолго до кода.
Контраст, который держит на солнце
Главный и самый частый провал — недостаточный контраст текста. Ориентир простой: обычный текст должен отличаться от фона не менее чем 4.5:1, крупный (примерно от 24 пикселей или полужирный от 18) — не менее 3:1. Это не придирка, а порог читаемости в неидеальных условиях: на дешёвом экране, при бликах, у уставших глаз к вечеру. Модный приглушённый серый на светлом почти всегда не проходит по этому порогу, как бы красиво он ни выглядел в макете.
Проверять это надо до того, как макет уйдёт в разработку, а не после жалоб. Удобнее всего заложить контраст в систему один раз: если пары «текст на фоне» вынесены в токены и выверены заранее, вы физически не сможете случайно поставить нечитаемый серый — вы просто выберете из готовых, заведомо контрастных сочетаний. Доступность из ручной проверки превращается в свойство палитры.
Размер и попадание пальцем
Второй барьер — слишком мелкие цели для касания. Палец — не курсор, он толстый и неточный, а человек в транспорте ещё и трясётся. Минимальная зона нажатия — около 44×44 пикселей, даже если сама иконка визуально меньше: недостающее добирается невидимым отступом вокруг. Кнопки, чекбоксы, иконки в шапке, элементы списка — всё, что нажимается, обязано иметь запас. Промахи по мелким целям — это не «пользователь криворукий», это дизайнер сэкономил на площади.
Здесь снова выручает системность: сделайте интерактивные элементы компонентами с заложенной минимальной зоной, и правило начнёт соблюдаться само, без ежеразовой проверки линейкой. А кратная сетка отступов заодно не даст этим зонам налезать друг на друга.
Фокус и клавиатура — не выбрасывайте обводку
Мышь есть не у всех и не всегда: кто-то ходит по интерфейсу с клавиатуры, кто-то через скринридер, кто-то из-за травмы руки. Для них критично видеть, где сейчас «находится» курсор фокуса. Самая частая ошибка — убрать обводку фокуса «ради чистоты дизайна». Это ровно тот случай, когда чистота ставит стену: человек теряет себя на странице и не может пользоваться ей вообще. Не удаляйте фокус — оформите его так, чтобы он вписывался в стиль: аккуратная рамка акцентного цвета читается и не портит вид.
Цвет — не единственный сигнал
Ещё одна ловушка — вешать смысл только на цвет. «Красное поле — ошибка, зелёное — успех» не работает для людей с дальтонизмом, а их среди мужчин примерно каждый двенадцатый. Дублируйте цвет вторым сигналом: иконкой, подписью, изменением формы. Ошибка — это красная рамка и текст «проверьте поле» и значок. Тогда сообщение доходит независимо от того, как человек различает цвета. Это ещё и просто надёжнее: подпись понятнее оттенка в любой ситуации.
Попробуйте прямо сейчас. Откройте редактор и поставьте на светлую карточку текст цветом #B0B0B0. Красиво? А теперь мысленно вынесите этот экран на солнце. Замените цвет на достаточно тёмный, добавьте состоянию ошибки не только красную обводку, но и иконку с подписью — и вы почувствуете, как «стильный, но нечитаемый» макет становится просто рабочим.
Текст, движение и порядок чтения
Есть ещё три вещи, о которых легко забыть на красивом макете. Первая — размер и межстрочный интервал текста: слишком мелкий шрифт с плотными строками тяжело читать не только людям со слабым зрением, но и любому на маленьком экране. Держите основной текст крупным и дышащим, не экономьте на высоте строки. Вторая — движение: агрессивные анимации, параллаксы и мигания у части людей вызывают тошноту и головокружение вплоть до приступов. Продумывайте, как интерфейс ведёт себя, когда человек просит систему уменьшить анимацию, — сдержанный вариант должен существовать по умолчанию.
Третья — логичный порядок. То, как элементы идут в макете, задаёт порядок, в котором их прочитает скринридер и обойдёт клавиатура. Если визуально «сначала заголовок, потом текст, потом кнопка», то и в структуре они должны идти так же, а не в случайном порядке слоёв. Осмысленная последовательность блоков — это не только про доступность, это в принципе про то, чтобы интерфейс читался как связный рассказ, а не как набор разбросанных карточек.
Доступность выгодна всем
Главное, что стоит унести: доступный интерфейс почти всегда оказывается удобнее и для тех, у кого нет никаких ограничений. Контрастный текст читается быстрее у всех. Крупные кнопки проще нажимать всем. Видимый фокус помогает любому, кто предпочитает клавиатуру ради скорости. Дублированные сигналы снижают число ошибок у каждого. Поэтому доступность — не отдельная задача «под конец, если останется время», а обычный признак хорошо сделанной работы. Заложите её в токены и компоненты один раз — и она будет соблюдаться сама, а не висеть чек-листом на совести. А если проект серьёзный и цена ошибки высока — например, банковский или государственный сервис, — доступность стоит закладывать в дизайн-систему с первого экрана, а не докручивать перед сдачей.