Я объясняла, что такое доступный дизайн, наверное, сто раз. В статьях, на созвонах, в комментариях. И каждый раз ловила одну и ту же реакцию: люди кивают, соглашаются, что это важно, — и через неделю выкатывают серую кнопку на сером фоне.
Дело не в том, что они плохие дизайнеры или им всё равно. Дело в том, что доступность невозможно понять головой. Её можно только почувствовать. А пока проблема не твоя — ты её не чувствуешь.
Я долго думала, как это починить. И в итоге перестала объяснять словами. Я сделала штуку, которая даёт побыть тем самым пользователем — на несколько секунд. Расскажу, как она устроена и почему чек-листы не работают.
Почему лекции про accessibility не меняют поведение
Стандартный способ учить доступности — это требования. WCAG, контраст 4.5:1, alt-тексты, focus states. Всё правильно, всё по делу. И всё мимо.
Требование — это внешнее правило. Ты выполняешь его, потому что надо, а не потому что понимаешь зачем. И при первом же дедлайне оно вылетает первым: «потом доделаем доступность». Потому что оно живёт в голове как пункт чек-листа, а не как живая картинка человека, которому будет плохо.
Я знаю это по медицине. Студенту можно сто раз сказать «у пожилых пациентов снижено зрение, учитывайте это». Он запомнит, ответит на экзамене и забудет. А можно надеть на него очки, имитирующие катаракту, и попросить прочитать инструкцию к препарату. После этого он не забудет уже никогда. Разница между «я знаю» и «я почувствовал» — это вся разница.
В медицине это поняли давно. Студенты учатся на манекенах, которые дышат и у которых падает давление. Отрабатывают на симуляторах, прежде чем подойти к живому человеку. В дизайне такого нет. Мы сразу проектируем для миллионов людей, ни разу не побывав ни одним из них.
Что я сделала
Это интерактивная карточка товара — обычный рюкзак в интернет-магазине. Цена, скидка, выбор цвета, кнопка «в корзину». Выглядит понятно. Понятно — потому что вы смотрите на неё своими глазами.
А рядом — переключатель состояний. Нажимаете «дальтонизм» — и красный бейдж скидки сливается с зелёным «в наличии» в одинаковый грязный цвет. Нажимаете «катаракта» — текст отзывов и выгоды растворяется в жёлтой пелене. «Туннельное зрение» — и вы видите только центр карточки, а скидка и статус в углах исчезают в темноте. «Тремор» — и кнопка «купить» начинает убегать от курсора, попасть невозможно.
Шесть состояний. Каждое — не абстрактная инвалидность из методички, а конкретный человек: каждый двенадцатый мужчина с дальтонизмом, любой из нас в старости с катарактой, человек с глаукомой, с дислексией, с тремором после инсульта.
Под каждым состоянием — короткий разбор. Что именно сломалось, почему, и как это лечится. Не «соблюдайте WCAG», а конкретно: добавь второй признак к цвету, подними контраст до 4.5:1, не раскидывай связанное по углам.
Что видно, когда переключаешь состояния
Самое неожиданное — насколько мало нужно, чтобы интерфейс развалился.
Серый текст #999 на белом фоне выглядит стильно и современно. Включаешь катаракту — и его просто нет. А это контраст 2.8:1, провал даже по минимальному стандарту. Дизайнер выбрал этот серый, потому что в его глазах на его мониторе он читается отлично. Для глаза с помутнённым хрусталиком — пустое место.
Красный и зелёный как «плохо» и «хорошо» — классика, которая кажется очевидной. Включаешь дальтонизм — и оба статуса становятся одинаковыми. Восемь процентов мужчин не понимают, что вы им сообщили. Это каждый двенадцатый покупатель, который не видит, что товар со скидкой или что его выбранный цвет — красный, а не зелёный.
Кнопка в углу, мелкие отступы, важная информация по краям экрана — всё это работает, пока у тебя идеальное зрение и твёрдая рука. Стоит убрать одно из условий, и продуманный интерфейс превращается в полосу препятствий.
Честно про то, чем это не является
Это не точная медицинская модель. Реальный дальтонизм сложнее CSS-фильтра, реальная дислексия — это не просто прыгающие буквы. Я намеренно не претендую на пиксельную точность, и так и написала прямо в инструменте.
Эта штука не заменяет тестирование с настоящими людьми. Ничто не заменит. Единственный способ узнать, работает ли ваш интерфейс для человека с инвалидностью, — позвать этого человека и посмотреть. Симулятор не отменяет исследование, он будит желание его провести.
Его задача — не выдать точную картину, а сломать иллюзию, что «всем видно так же, как мне». После того как кнопка пару раз убежала от вашего курсора, фраза «сделайте кликабельные зоны больше» перестаёт быть пунктом чек-листа и становится понятной телом.
Где попробовать
Симулятор живёт по ссылке — открывается в браузере, ничего ставить не нужно:
https://viktoriafilippova.github.io/perception-simulato/
Поиграйте пару минут. Переключите все состояния, попробуйте «купить» рюкзак с тремором, почитайте разборы. А потом откройте свой текущий проект и посмотрите на него теми же глазами.
В медицине есть правило: не лечи пациента по тому, как он выглядит от двери. Подойди, осмотри, спроси. В дизайне то же самое — твоё представление о пользователе не равно пользователю. Разница только в том, что в дизайне об этом легко забыть, потому что пользователь не сидит перед тобой. Так дай себе побыть им хотя бы три секунды.
А какой режим сломал ваш привычный взгляд сильнее всего? Расскажите в комментариях — мне интересно, что цепляет больше: то, что не видно, или то, во что не попасть.
