Logo
  • Бренд
  • Визуальный язык
    • Основы визуального языка
    • Палитра
    • Типографика
    • Иконографика
    • Структура и сетка
    • Эффекты
    • Анимации
  • Компоненты
    • Токены
    • Компоненты
  • Редполитика
    • О редполитике
    • Пишем чисто
    • Пишем просто
    • Пишем компетентно
    • Пишем для человека
    • Интерфейсные тексты
    • Глоссарий
  • Документация
    • Доступность
  • Figma
    • Принципы
    • Начало работы
    • Команды и проекты
    • Инструменты
    • Процесс
    • Дизайн-ревью
  • Благодарности
Доступность
Наша миссия — сделать интерфейсы продуктов доступными для максимального количества людей. Поэтому нам важно, чтобы люди с ограниченными возможностями тоже могли пользоваться нашими сервисами. Это и есть доступность.
Важно
Почти в каждом разделе гайдлайна вы найдёте рекомендации по доступности.
Как проверяются материалы визуального языка
Базовые материалы визуального языка — цвета, их сочетания и типографические схемы — должны соответствовать гайдлайнам доступности WCAG и пройти исследование на восприятие в продукте.

Мы проверяем базовую распознаваемость элементов визуального языка, но это не значит, что дизайнер может не обращать на это внимание. 
Структура
Легко понять структуру страницы, смысл и что можно на ней сделать
Типографика
Текст легко и удобно читать
Цвет
Можно различить элементы, их функции и состояния
Графика
Понятны метафоры, дополняющие смысл контента
Интерактивные области
Не затруднено взаимодействие с кликабельными областями
Текст
Понятен смысл текста
Структура
Пользователь должен считывать структуру, смысл страницы и ключевые действия на ней. Старайтесь делать дизайн таким, чтобы пользователь легко находил ключевую информацию. 

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

Material Design Accessibility

Типографика
Работая с типографикой, отталкивайтесь не только от правил читабельности, но и характеристик конкретного шрифта. 
Важно
Убедитесь, что пользователю не нужно прикладывать усилия для чтения текста на странице. В этом вам помогут оптимальные параметры типографики.
Параметры текста, оптимальные для чтения
Используйте комфортный для чтения размер шрифта: для основного текста минимум 16px
Длина строки для комфортного чтения: приемлемое количество символов — 45 – 75, оптимальное — 66
Комфортное соотношение межстрочного расстояния к кеглю для заголовков: 1 – 1,3
Комфортное соотношение межстрочного расстояния к кеглю для текста: 1,4 – 1,65
Интервал между следующими абзацами рекомендуется делать не менее чем в 2 раза превышающим размер шрифта
Интервал между буквами должен быть не менее 0,12 раза больше размера шрифта

Material Design Accessibility

Цвет
Рекомендации, приведённые в этом разделе, не применяются для промоматериалов и внешней коммуникации продуктов.
Убедитесь, что контраст между цветом текста и фоном достаточен
Убедитесь, что для информирования или разметки использованы дополнительные способы, помимо цвета
Важно
Обращайте внимание на считываемость цветов и контрастов в ваших макетах, а также тестируйте их для людей с особенностями зрения.
Допустимая контрастность для цветовых пар и сочетаний
Допустимая контрастность рассчитывается по формуле коэффициента контрастности стандарта WCAG: (L1 + 0,05) / (L2 + 0,05), в которой L1 — относительная яркость самого светлого цвета, L2 — относительная яркость самого тёмного цвета.

WCAG

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

Проверяя контрастность на мобильном устройстве, учитывайте параметры матрицы популярных устройств, а не только коэффициент контрастности.

WCAG

Графика
Пользователь должен понимать контент, включающий графики, иконки и изображения. Не полагайтесь только на графику в пояснении контента: она должна создавать настроение и дополнять повествование, а не заменять его.

  • Используйте иконки как дополнительные визуальные подсказки, а не как декор
  • При наложении текста на картинку помните о контрастности
  • Убедитесь, что вся графика сопровождается кратким и понятным описанием
Интерактивные области
На тач-устройствах область нажатия должна быть достаточно большой и доступной. Особенно внимательно отнеситесь к работе с областью нажатия на устройствах с крупным экраном.

  • Убедитесь, что до основных контролов можно дотянуться большими пальцами и левой, и правой руки
  • Следите за размером области нажатия: размер подушечки пальца порядка 10 мм. Ориентируйтесь на эту величину
Текст
Визуальная архитектура в дизайне неразрывно связана с текстом. Если вы не уверены в тексте — зовите редактора. Если уверены, пройдите по всем правилам ещё разок.

Основные правила доступных текстов в интерфейсе:
  1. Используйте корректные термины. 
    Сверяйтесь со словарями, если не знаете как правильно обратиться к пользователю: словарь социальных терминов VK или на сайте Мы так не говорим
  2. Пишите просто и понятно:
    • Не используйте КАПС. Текст, состоящий из заглавных букв, особенно сложен для читателей с дислексией. Форма слова исчезает, каждое слово становится прямоугольником
    • Разбивайте длинные предложения на короткие без потери смысла. Людям с синдромом дефицита внимания и гиперактивности (СДВГ) или дислексией сложно воспринимать сложные предложения
    • Используйте эмодзи только в исключительных случаях. Программа экранного доступа (скринридер) прочитает их прямо: 🏝 — райский остров
Заголовки и кнопки:
  • Ёмкие и понятные. Из заголовка должно быть сразу понятно, о чем пойдет речь в тексте или чему посвящен раздел — это особенно важно для слепых пользователей, которые пользуются скринридером и используют навигацию по заголовкам
  • Не называйте действия на кнопках похожими словами: Отклонить/Отменить, — чтобы не запутать пользователей
  • Помните, что заголовок и кнопка должны сочетаться и звучать как диалог
Ссылки:
  • Если клик приведёт к скачиванию документа, напишите об этом прямо. Это важно для пользователей мобильных устройств, у которых может быть ограничен трафик.
  • Не используйте прямой адрес или текст «нажмите здесь» как ссылку — они неинформативны. Вместо «Готово», напишите «Создать аккаунт» — так пользователь чётко поймёт, что произойдёт на следующем шаге.
  • Не вставляйте ссылки в середину текста — прочитать такой текст скринридеру будет сложно.
Внимательно относитесь к Alt-тексту (это ****описание изображения словами). Оно должно помогать людям, которые читают или слышат это описание, иначе его лучше вообще его не указывать.

  • Используйте до 130 символов
  • Коротко опишите только важное на изображении: Байт — это белый пёс с голубыми глазами.
  • Если картинка не несёт смысла — не пишите alt. Нет ничего плохого в пустом alt, если изображение не несёт дополнительного смысла.
Не забывайте о вспомогательных технологиях
Старайтесь не использовать иконки для украшения — это отвлекает от основного действия. Учитывайте окружающий контекст: когда иконки слишком близко расположены, они создают визуальный шум и путают.
Скринридер
Программа для чтения с экрана компьютера или смартфона, предназначенная для незрячих и людей с ослабленным зрением. Скринридер озвучивает интерфейс, а также создаёт звуковой и виброотклик.
Масштабирование
Масштабирование — стандартный инструмент для слабовидящих. Следите, чтобы при увеличении контента до 200% страница была читаема и функциональна.
Как поддерживать баланс
Чтобы сделать дизайн ваших интерфейсов доступнее, изучайте графический дизайн. Большинство приёмов и правил графического дизайна основаны на том, чтобы дизайн был доступен большому числу людей.
Важно
Одно исследование лучше, чем десяток правил. Исследуйте ваши продукты на доступность.
Полезные ссылки

Секреты цифровой доступности

Курс по доступности от VK

Material Design

Гайдлайны доступности одной из самых крупных дизайн-систем

Microsoft Design

Инклюзивность в продуктах компании Microsoft

WCAG

Гайдлайны доступности всех и всего

Принципы инклюзивности

Принципы инклюзивного дизайна и их подробное описание

Доступность от Сбера

Наиболее полное руководство по доступности на русском языке

WCAG

Инструменты для дизайнера

Stark

Набор инструментов для проверки доступности

Сontrast Analyser

Инструмент для проверки контрастности сочетаний цветов

Colorable

Инструмент для проверки контрастности сочетаний цветов

Voice Over

Всё о функции Voice Over на Mac

Talk Back

Всё о функции Talk Back на Android