Доступность в дизайне: основы для каждого дизайнера

Что такое доступность и при чем здесь дизайнер

Доступность (accessibility, a11y) — свойство интерфейса, при котором им могут пользоваться люди с разными возможностями: со слабым зрением, нарушением цветовосприятия, моторными ограничениями, со скринридером или только с клавиатурой. А еще — человек с телефоном на ярком солнце или с одной свободной рукой.

Главный стандарт — WCAG (Web Content Accessibility Guidelines) от W3C. У него три уровня: A, AA и AAA. Ориентиром для большинства продуктов считается AA. Многие требования закладываются еще в макете, и исправлять их потом в коде дороже. Полный текст стандарта — на сайте W3C WAI.

Контраст

Это самая частая проблема в макетах: светло-серый текст на белом выглядит элегантно, но плохо читается.

Практика:

• Проверяйте контраст плагином в Figma или любым онлайн-калькулятором прямо во время работы.
• Плейсхолдер в поле тоже текст: он часто проваливает проверку.
• Текст на фото кладите на затемняющую подложку.
• Проверьте и светлую, и темную тему.

Размер текста и читаемость

• Основной текст на вебе делайте не мелким: 16px — частая и разумная отправная точка.
• Межстрочный интервал для абзацев — около 1.4-1.6 от размера шрифта.
• Ограничивайте ширину строки, чтобы глаз не терялся при переходе на следующую строку.
• Избегайте длинных абзацев КАПСОМ и выравнивания по ширине — оно создает «реки» пробелов.
• Макет должен выдерживать увеличение текста до 200%: не фиксируйте высоту блоков с текстом.

Состояния фокуса

Люди, которые пользуются клавиатурой, перемещаются по странице клавишей Tab. Им нужно видеть, где они находятся.

• Нарисуйте состояние focus для каждого интерактивного элемента: кнопок, ссылок, полей, чекбоксов, карточек.
• Фокус должен быть заметным: обводка контрастного цвета с отступом от элемента работает лучше, чем легкое изменение фона.
• Никогда не просите разработчиков «убрать эту синюю рамку», не предложив замену.
• Продумайте порядок фокуса: он должен совпадать с визуальным порядком чтения.

Не только цветом

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

• Ошибка в поле: не только красная обводка, но и иконка и текст «Введите email».
• Графики: разные линии отличаются не только цветом, но и маркерами, штриховкой или подписями.
• Ссылки в тексте: подчеркивание или другой явный признак, кроме цвета.
• Статусы: «Оплачено» и «Ошибка» — текстом или иконкой, а не только зеленой и красной точкой.

Быстрая проверка: переведите макет в оттенки серого. Все важное должно остаться понятным.

Альтернативный текст

Скринридер читает alt-текст вместо изображения. Дизайнер знает, зачем картинка на экране, поэтому лучше всего может его написать.

• Информативное изображение: опишите смысл, а не внешний вид. Не «график», а «Продажи выросли во втором квартале».
• Декоративное изображение: пометьте в спецификации как декоративное, ему нужен пустой alt.
• Иконка-кнопка без подписи: нужна текстовая метка, например «Закрыть».

Понятная структура

• Явная иерархия заголовков: один главный, дальше уровни по порядку.
• Подписи полей над полем, а не только плейсхолдер, который исчезает при вводе.
• Размер зон нажатия: в WCAG 2.2 на уровне AA минимум 24×24 CSS-пикселя, а для мобильных лучше больше.
• Ссылки и кнопки с понятным текстом: не «Подробнее», а «Подробнее о тарифах».