Съезд с тротуара: доступность

Скошенный съезд на бордюре у перехода существует потому, что активисты с инвалидностью годами его требовали, а кое-где по ночам сами заливали бетонные пандусы, когда мэрии отказывали.

Сегодня им пользуются родители с колясками, путешественники с чемоданами, курьеры с тележками, велосипедисты, люди на костылях и все, кто тащит что-то тяжёлое. Спроектировано для меньшинства, а служит почти всем — сюжет описан столько раз, что получил имя: эффект бордюрного съезда.

В софте он повторяется с редкой надёжностью. Субтитры делали для глухих, а пользуются ими все, кто смотрит видео в тихом офисе или шумной электричке. Голосовое управление делали для тех, кто не может пользоваться руками, а пользуются им все, у кого руки заняты. Клавиатурную навигацию делали для тех, кому недоступна мышь, а обожают её опытные пользователи.

Кто такие «все»

По оценке ВОЗ, примерно каждый шестой человек в мире живёт со значимым нарушением здоровья. Это не погрешность округления в твоей аудитории; это больше большинства сегментов, о которых спорят команды.

Категории шире стереотипа:

Зрение — слепота, слабовидение и нарушения цветового зрения, затрагивающие около 8% мужчин.
Слух — от частичной потери до глухоты.
Моторика — тремор, ограниченная амплитуда, паралич, боль, работа одной рукой.
Когнитивная сфера — дислексия, СДВГ, нарушения памяти и огромная обычная территория стресса и усталости.

Но рамка, которая по-настоящему меняет мышление дизайнера, идёт из инклюзивного дизайна Microsoft, где любая способность раскладывается по трём линиям:

Постоянно — одна рука.
Временно — рука в гипсе.
Ситуативно — на руках ребёнок.

Всем трём нужен один и тот же дизайн под одну руку. В этой строке весь аргумент: постоянный случай — это предельная версия ситуации, в которую попадает каждый. Спроектируй для слабовидящего — и ты заодно спроектировал для всех, кто читает на ярком солнце.

Четыре принципа

WCAG — международный стандарт — организован вокруг четырёх принципов, к счастью запоминающихся как POUR:

Воспринимаемость (Perceivable). Человек должен иметь возможность получить содержимое. Текстовые альтернативы изображениям, субтитры к звуку, достаточный контраст, никакого смысла в одном лишь цвете.

Управляемость (Operable). Человек должен иметь возможность этим пользоваться. Клавиатурный доступ ко всему, цели, в которые можно попасть, никаких непродлеваемых ограничений по времени, ничего провоцирующего приступы.

Понятность (Understandable). Поведение предсказуемо, язык простой, ошибки объяснены и исправимы.

Надёжность (Robust). Это должно работать со вспомогательными технологиями — а на практике означает использование стандартных семантических элементов вместо их переизобретения.

У WCAG три уровня соответствия: A (минимум), AA (практическая и обычно юридическая цель), AAA (целиком требуется редко). Если запоминать из стандарта одно — запоминай «WCAG 2.2 уровень AA»: именно этого просят регламенты и договоры.

Семантика — это интерфейс для тех, кто его не видит

Вот сдвиг в голове, после которого доступность у большинства дизайнеров и разработчиков щёлкает.

Скринридер не видит твою раскладку. Он читает твою структуру: заголовки по уровням, ориентиры (навигация, основное содержимое, подвал), списки, таблицы с заголовками, кнопки, ссылки, подписи полей. Незрячий пользователь перемещается прыжками между заголовками и ориентирами так же, как зрячий скачет глазами по странице.

Отсюда: если заголовки выбраны по размеру, а не по уровню, у страницы нет навигируемой структуры. Если кнопка — это div с обработчиком клика, она не объявляется кнопкой, не получает фокус и не активируется с клавиатуры. Если у поля нет связанной подписи, скринридер говорит «текстовое поле» и больше ничего.

Соответствующее правило из спецификации ARIA прямолинейно и достойно цитаты: не используй ARIA, если с задачей справится штатный элемент. Настоящий <button> приходит с фокусом, клавиатурной активацией, верной ролью и верными объявлениями. Самописный стартует без всего этого, и всё придётся реализовывать руками.

Тест клавиатурой

Самые ценные десять минут, которые можно потратить: отключи мышь и попользуйся своим продуктом.

Проверяешь четыре вещи:

Достижимость. Дотягиваешься ли ты табом до каждого интерактивного элемента? Всё пропущенное невидимо для клавиатуры и скринридеров.

Видимый фокус. Всегда ли видно, где ты сейчас? Убрать обводку фокуса, потому что она «неопрятная», — одна из самых разрушительных вещей, которые делает дизайнер: не нравится стандартная — замени на лучшую, но никогда на ничто.

Логичный порядок. Движется ли фокус в том порядке, в каком читается содержимое? Когда нет, виноваты обычно абсолютное позиционирование и модалки.

Отсутствие ловушек. Можешь ли ты выйти из каждого компонента, в который вошёл? Модалка, удерживающая фокус за собой, или виджет, из которого не выбраться, заканчивают сессию.

Добавь ссылку пропуска — «перейти к основному содержимому» первым фокусируемым элементом, — чтобы клавиатурные пользователи не пробегали табом сорок пунктов навигации на каждой странице.

Зрение, моторика, когнитивная сфера

Зрение. Контраст не менее 4,5:1 для основного текста и 3:1 для крупного текста и интерфейсных элементов. Никогда не неси смысл одним цветом. Поддерживай увеличение текста до 200% без поломок и никогда не отключай масштабирование щипком на мобильных. Пиши альтернативный текст, описывающий функцию, а не внешний вид: для иконки лупы, открывающей поиск, альт — «Поиск», а не «увеличительное стекло». Декоративным изображениям — пустой альт, чтобы их пропускали, а не зачитывали.

Моторика. WCAG 2.2 требует целей не меньше 24×24 CSS-пикселей; рекомендации платформ — 44pt (Apple) или 48dp (Google). Всё, что работает только по наведению, недоступно на касании и многим вспомогательным технологиям. Всему, что требует перетаскивания, нужна альтернатива без перетаскивания — тоже WCAG 2.2. Ограничениям по времени нужен способ их продлить.

Когнитивная сфера. Простой язык и короткие предложения. Навигация, остающаяся на месте. Ошибки, которые предотвращены, объяснены и исправимы. И уважай prefers-reduced-motion: для людей с вестибулярными нарушениями крупный параллакс и разъезжающиеся переходы вызывают настоящую тошноту, а не лёгкое раздражение.

Автоматика ловит примерно треть

Ежегодный обзор миллиона главных страниц от WebAIM стабильно находит обнаруживаемые нарушения WCAG примерно на 95% из них. Самые частые скучны и починяемы: низкоконтрастный текст, отсутствующий альт, пустые ссылки, неподписанные поля.

Два вывода. Первый: базовый уровень настолько низок, что элементарная добросовестность выводит тебя вперёд почти всех. Второй: автоматические проверялки находят примерно треть реальных проблем. Они скажут, что контраст 3,9:1, но не скажут, что альт неверен, порядок фокуса бессмысленный, а подпись гласит «Поле 3».

Реалистичный распорядок: прогнать автопроверку, сделать клавиатурный проход, провести двадцать минут со скринридером (VoiceOver и NVDA бесплатны), увеличить до 200% и посмотреть, что развалилось.

Это не «дополнительная работа»

Два аргумента для той комнаты, где это задвигают в конец списка.

Дешевле всего на этапе проектирования. Контраст, размер целей, состояния фокуса, расположение подписей, тексты ошибок — каждое бесплатно, пока ты это выбираешь, и дорого как доработка через полгода. Доступность в конце — это переделка; доступность в дизайн-системе — это умолчание.

Всё чаще это не опция. Требования к госсектору в большинстве стран, Европейский акт о доступности и судебная практика по ADA в США означают, что вопрос придёт независимо от того, интересно это команде или нет.

И наконец аргумент бордюрного съезда, самый честный: семантическая структура улучшает индексацию, субтитрами пользуются слышащие, клавиатурному доступу радуются эксперты, а внятные сообщения об ошибках снижают нагрузку на поддержку. Почти ничто здесь не служит только той группе, ради которой делалось.

Проектируя для края, ты находишь то, что было нужно всем.

На практике

Отключи мышь на десять минут. Сегодня. Самый быстрый способ узнать, как твой продукт обходится с целым классом пользователей.

Проверь контраст своих серых. Подсказки в полях, заблокированные состояния и вторичные подписи — там и живут провалы.

Включи скринридер на одном экране. Двадцать минут с VoiceOver или NVDA навсегда меняют отношение к разметке.

Проверь уровни заголовков. Это настоящее оглавление или выбор по размеру? Почини структуру, а оформляй отдельно.

Увеличь до 200% и посмотри. Наползающий текст, обрезанные кнопки и горизонтальная прокрутка вылезают сразу.

Внеси доступность в библиотеку компонентов один раз. Состояния фокуса, размеры целей, паттерны подписей и контраст, зашитые в общие компоненты, означают, что все будущие экраны получат их даром.

Проверь себя

Закрой статью и ответь своими словами:

Что такое эффект бордюрного съезда и какие два примера есть в софте?
Объясни «постоянно, временно, ситуативно» на примере одной способности.
Какие четыре принципа входят в POUR и на какой уровень соответствия целиться?
Почему div с обработчиком клика проваливается и какое правило ARIA об этом говорит?
Какие четыре вещи проверяет тест клавиатурой?
Почему удаление обводки фокуса так разрушительно?
Какую долю проблем находят автопроверялки и что придётся делать руками?

Коротко

Эффект бордюрного съезда: сделанное для меньшинства в итоге служит почти всем. Субтитры, голосовое управление и клавиатурный доступ прошли этот путь.
Примерно каждый шестой живёт со значимым нарушением здоровья, а любая способность бывает постоянной, временной и ситуативной — один дизайн служит всем трём.
POUR: воспринимаемость, управляемость, понятность, надёжность. Целься в WCAG 2.2 уровня AA.
Скринридеры читают структуру, а не раскладку. Используй настоящие семантические элементы и не бери ARIA там, где есть штатный.
Тест клавиатурой проверяет достижимость, видимый фокус, логичный порядок и отсутствие ловушек. Не убирай обводку фокуса, не заменив её.
Контраст 4,5:1 и 3:1, альт про функцию, цели не меньше 24px, взаимодействия без наведения, уважение к prefers-reduced-motion.
Автоматика ловит примерно треть; остальное берут проходы клавиатурой, скринридером и увеличением до 200%.
Заложенная на этапе проектирования, доступность почти бесплатна; доработанная задним числом — это переделка, и всё чаще она ещё и обязательна по закону.