Чек-лист a11y: 7 вещей, которые ломают интерфейс для части пользователей
Проблема обычно не в «сложной доступности», а в базовых ошибках: у кнопки нет понятного текста, у поля — связанной подписи, а у модалки — фокуса и закрытия с клавиатуры. Это не редкие кейсы, а типовые провалы в коммерческих интерфейсах.
Проверьте перед релизом:
• у всех интерактивных элементов есть видимый текст или aria-label
• контраст текста и фона не заставляет всматриваться
• состояние фокуса заметно не только мышью
• ошибки в форме читаются рядом с полем, а не где-то сверху
• кликабельные зоны достаточно крупные для пальца
• иконка без подписи не притворяется кнопкой
Отдельно смотрите на сценарии без мыши: таб-цепочка, открытие/закрытие меню, модалка, выпадающий список, автокомплит. Если пользователь не может пройти ключевой путь клавиатурой, интерфейс уже не универсален.
Еще одна частая ошибка — полагаться на цвет как на единственный сигнал. Красный текст, зелёная рамка, «успешно/ошибка» без слова и без иконки — слабый паттерн. Сигнал должен дублироваться текстом, формой или состоянием элемента.
Что делать на практике: встроить a11y-чек в дизайн-систему и прогонять его до верстки. Тогда доступность перестает быть отдельной задачей и становится частью качества интерфейса.
UX Pattern Lab
@ux_pattern_lab
Чек-лист a11y: 7 вещей, которые ломают интерфейс для части пользователей
Этот пост опубликован в Telegram-канале UX Pattern Lab. Подписаться можно по ссылке: @ux_pattern_lab.