Интерфейс может быть красивым, быстрым, модным, но по-настоящему зрелым он становится, когда к нему без препятствий добирается любой человек. В этом смысле веб-доступность не про галочку в брифе, а про культуру смотреть шире. Однажды понаблюдав, как человек с экранным диктором пытается оформить заказ, начинаешь иначе собирать даже простую кнопку.
Что такое WCAG и зачем это дизайнеру
Рекомендации WCAG созданы консорциумом W3C и описывают, каким должен быть контент, чтобы им могли пользоваться люди с разными возможностями. Никакой магии: четыре принципа, уровни соответствия A, AA и AAA, прозрачные критерии. Командам обычно хватает уровня AA, он достижим без тяжёлых компромиссов.
Те самые принципы легко запомнить: воспринимаемость, управляемость, понятность, надёжность. Переводя их на язык макетов, мы отвечаем на четыре вопроса: видно ли, можно ли действовать, не путается ли человек, корректно ли это всё работает в разных средах. Эта логика помогает не спорить о вкусе, а разговаривать о конкретике.
Когда я делал редизайн лендинга сервиса, мы взяли список критериев и прогнали по шаблонам. Без единой строчки кода стало ясно, где тонкий контраст, где потерялась метка поля, а где иконка живёт без подписи. Потом правки заняли часы, а не недели.
Четыре принципа на языке макетов
Воспринимаемость включает контраст, размеры, альтернативные тексты и структуру заголовков. Пользователь не должен угадывать, что перед ним, он должен это увидеть или услышать. Поэтому у картинки есть осмысленный alt, у видео — субтитры, у заголовков — порядок уровней.
Управляемость начинается с клавиатуры: фокус видим, последовательность переходов логична, интерактивные области достаточно крупные. Хорошая привычка — мысленно пройтись табом по макету, присматриваясь к порядку элементов.
Понятность держится на простом языке, предсказуемых паттернах и ясных подсказках. Если валидация формы отработала, ошибка должна объяснить, что делать дальше, а не просто мигнуть красным. Надёжность требует не ломать семантику и не надеяться только на скрипты там, где можно обойтись обычной разметкой.
| Проблема | Как увидеть в макете | Что исправить |
|---|---|---|
| Низкий контраст текста | Серый текст на цветном фоне | Доведите контраст до 4.5:1 для обычного кегля, 3:1 для крупного |
| Иконки без подписи | Панель действий только с пиктограммами | Добавьте видимую метку или подпись по наведению и в фокусе |
| Скрытые состояния фокуса | Кнопки меняют цвет только при наведении мышью | Сделайте заметный фокус-стиль для клавиатуры |
Цвет, контраст, типографика
Контраст — не вопрос вкуса, а читаемости. Для обычного текста целевой коэффициент 4.5:1, для крупного от 18 pt обычного веса или 14 pt жирного допускается 3:1. Проверьте парочки цветов в плагине, а затем зафиксируйте палитру состояний, чтобы верстальщик не подбирал оттенки на глаз.
С типографикой работает тот же принцип ясности. Длина строки в разумных пределах, межстрочные интервалы не давят, курсив не используется как единственный способ выделить мысль. Заголовки образуют иерархию, по которой легко сканировать страницу взглядом и озвучкой.
Навигация с клавиатуры и фокус
Фокус должен быть заметным всегда: на светлом фоне, на тёмном, поверх изображений. Рамка, подсветка, контрастная тень — выбирайте стиль, который гармонирует с системой, но не исчезает в активных сценах.
Последовательность табуляции строится по визуальному порядку. Если компоненты меняют место при адаптации, фокус всё равно идёт по смыслу, а не змейкой. Полезно предусмотреть ссылку пропуска к основному контенту, чтобы не заставлять людей пробираться через меню каждый раз.
Формы и ошибки без раздражения
У каждого поля есть видимая метка, а плейсхолдер не играет роль подписи. Подсказки лучше показывать до ошибки, а не после провала. Если что-то пошло не так, текст ошибки поясняет, что исправить, и связан с полем программно, чтобы экранный диктор озвучил его правильно.
Кнопки в формах получают ясные названия вроде «Отправить заявку», а не «Ок». Активные области хватает пальцу: ориентир 44 на 44 пикселя для сенсорных сценариев. Мелкие чекбоксы спасает кликабельная подпись, привязанная к контролу.
Тексты, альтернативы и медиа
Alt-тексты пишите по задаче: описывайте смысл, а не перечисляйте пиксели. Декоративные изображения помечайте как пустые, чтобы не засорять поток озвучки. Ссылки формулируйте по содержанию, а не «читать далее», так человек понимает, куда его ведут.
Видео сопровождайте субтитрами и при необходимости транскриптом, автозапуск выключайте. Анимации делайте умеренными и уважайте системные настройки «уменьшить движение». Так интерфейс остаётся живым, но не выматывает.
ARIA осторожно
Если можно обойтись нативными элементами, так и делайте. Роли и атрибуты ARIA помогают, когда приходится строить сложные виджеты, но они не заменяют семантику. Ошибочная роль портит опыт сильнее, чем её отсутствие.
Для дизайнеров это означает одно: проектируйте компоненты, которые можно собрать на базовых элементах без трюков. Чем проще скелет, тем надёжнее поведение в разных технологиях ассистивного доступа.
Мини-чеклист для макетов
Перед отдачей макетов команде я пробегаюсь по короткому списку. Он экономит часы сомнений и спасает от неловких возвратов. Попробуйте добавить его к своим рутинам, особенно если в спринте мало времени.
- Контраст текста и иконок соответствует 4.5:1 или 3:1 для крупного кегля.
- Есть видимый фокус и логичный порядок табуляции.
- Иконки снабжены подписями или текстовыми метками.
- У полей форм есть метки и понятные подсказки, тексты ошибок конкретны.
- Иерархия заголовков непрерывна: h1, затем h2 и ниже без скачков.
- Видео без автозапуска, медиаконтент с субтитрами и альтернативами.
И напоследок про мотивацию
Фраза «Веб-доступность (WCAG): простой гид для дизайнеров» звучит сухо, пока не увидишь, как человек с трясущимися руками спокойно попадает в большую кнопку, а не промахивается мимо. Эти полсантиметра кликабельной области превращаются в уверенность и уважение. Такой дизайн запоминается не приёмами, а тем, как бережно он обращается с пользователем.
С этого шага начинается зрелая команда. Она делает интерфейсы, которыми удобно пользоваться всем, а не только тем, кто видит и кликает так же, как мы. И это лучшая похвала любому проекту.