Доступность — минимум, который стоит сделать сразу
Контраст, видимый фокус, подписи у полей и работа с клавиатуры: базовый уровень доступности за пару дней и почему он помогает всем пользователям.
Доступность часто откладывают как задачу «для отдельной аудитории», до которой продукт ещё не дорос. Но базовый уровень — не про отдельную аудиторию. Это контраст, который читается на солнце, фокус, который видно, подписи у полей и интерфейс, которым можно пользоваться без мыши. От этого выигрывают все.
Вот минимум, который не требует перестраивать продукт.
Контраст
Светло-серый текст на белом выглядит изящно на хорошем мониторе и не читается на телефоне под солнцем или на дешёвом ноутбуке. Ориентир из стандарта WCAG: для обычного текста контраст не ниже 4,5:1, для крупного текста и значимых иконок — не ниже 3:1.
Где чаще всего проваливается:
- приглушённый текст: подписи, подсказки, даты;
- плейсхолдеры, которыми заменили подписи;
- текст на цветных кнопках и поверх изображений;
- неактивные элементы, которые не отличить от просто бледных.
Контраст показывают инструменты разработчика в браузере — прямо при выборе цвета у элемента.
Видимый фокус
Человек, который ходит по интерфейсу клавишей Tab, должен видеть, где он сейчас. Популярная правка «убрать некрасивую обводку» — outline: none без замены — делает интерфейс непроходимым с клавиатуры.
Обводку не надо удалять, её надо сделать своей: заметной, в цветах продукта, появляющейся при навигации с клавиатуры и не мешающей при клике мышью. Для этого есть :focus-visible.
Подписи у полей
У каждого поля должна быть подпись, связанная с ним в разметке, а не просто текст где-то рядом. Плейсхолдер подписью не считается: он исчезает при вводе, и через секунду уже не вспомнить, что это было за поле.
То же с кнопками-иконками. Кнопка с крестиком или корзиной без текстовой метки для экранного диктора называется просто «кнопка». Ей нужно имя — видимое или через aria-label.
Ошибки в формах привязывают к полю и показывают не только красным. Часть людей плохо различает красный и зелёный, и для них ошибка, выделенная одним цветом, невидима.
Клавиатура
Пройди ключевые сценарии без мыши: Tab, Shift+Tab, Enter, пробел, Escape, стрелки. Проверь:
- доходит ли фокус до всех интерактивных элементов;
- идёт ли он в разумном порядке;
- открываются и закрываются ли меню и модальные окна с клавиатуры;
- не уходит ли фокус под открытое модальное окно и возвращается ли на место после закрытия.
Частый виновник — div с обработчиком клика вместо кнопки. Выглядит как кнопка, но табом до него не дойти и с клавиатуры не нажать. Настоящий button даёт всё это бесплатно.
Движение и размер текста
Если в интерфейсе много анимации, уважай системную настройку уменьшения движения, prefers-reduced-motion. Для некоторых людей параллакс и резкие переходы — не неудобство, а головокружение.
Проверь, что интерфейс не разваливается при увеличении в браузере до 200%: текст не обрезается, кнопки не наезжают друг на друга.
Почему это помогает всем
Высокий контраст помогает на солнце. Видимый фокус и работа с клавиатуры — опытным пользователям, которым лень тянуться к мыши. Подписи у полей — всем, кто отвлёкся посреди формы. Правильная разметка помогает автозаполнению, автотестам и поисковикам. А в ряде стран и отраслей доступность уже требование закона или условие крупных клиентов.
С чего начать
Полный аудит по стандарту не нужен. Возьми три главных сценария и пройди их с клавиатуры, потом проверь контраст текста на главных экранах, потом подписи у полей и кнопок-иконок. Это день-два работы, и большая часть исправлений приходится на общие компоненты — то есть чинится один раз.
SUBXCAT закладывает этот минимум в компоненты продукта, чтобы новые экраны получали его автоматически.