Доступность

Как проверяются материалы визуального языка

Структура

Типографика

Цвет

Графика

Интерактивные области

Текст

Как поддерживать баланс

Полезные ссылки

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

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

Почти в каждом разделе гайдлайна вы найдёте рекомендации по доступности.

Как проверяются материалы визуального языка

Базовые материалы визуального языка — цвета, их сочетания и типографические схемы — должны соответствовать гайдлайнам доступности WCAG и пройти исследование на восприятие в продукте.

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

Структура

Легко понять структуру страницы, смысл и что можно на ней сделать

Типографика

Текст легко и удобно читать

Цвет

Можно различить элементы, их функции и состояния

Графика

Понятны метафоры, дополняющие смысл контента

Интерактивные области

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

Текст

Понятен смысл текста

Структура

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

Содержимое страницы должно вписываться в структуру заголовков. Также у пользователя должна быть и альтернативная навигация: карта сайта, оглавление, меню, поиск и т.п.

Обращайте внимание не только на дизайн страницы, но и на разметку для скринридеров.

Поддержание структуры информации для скринридера

Порядок считывания скринридера должен совпадать с порядком подачи информации на странице.

Обратите внимание на стили: заголовки первого уровня на макете должны быть заголовками h1 в коде — так сохранится корректная структура считывания

Скринридер плохо работает с всплывающими объектами и модальными окнами

Material Design

Assistive Technology

Типографика

Работая с типографикой, отталкивайтесь не только от правил читабельности, но и характеристик конкретного шрифта.

Убедитесь, что пользователю не нужно прикладывать усилия для чтения текста на странице. В этом вам помогут оптимальные параметры типографики.

Параметры текста, оптимальные для чтения

Используйте комфортный для чтения размер шрифта: для основного текста минимум 16px

Длина строки для комфортного чтения: приемлемое количество символов — 45 – 75, оптимальное — 66

Комфортное соотношение межстрочного расстояния к кеглю для заголовков: 1 – 1,3

Комфортное соотношение межстрочного расстояния к кеглю для текста: 1,4 – 1,65

Интервал между следующими абзацами рекомендуется делать не менее чем в 2 раза превышающим размер шрифта

Интервал между буквами должен быть не менее 0,12 раза больше размера шрифта

Material Design

Material Design о доступности текста

Цвет

Рекомендации, приведённые в этом разделе, не применяются для промоматериалов и внешней коммуникации продуктов.

Убедитесь, что контраст между цветом текста и фоном достаточен

Убедитесь, что для информирования или разметки использованы дополнительные способы, помимо цвета

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

Допустимая контрастность для цветовых пар и сочетаний

Допустимая контрастность рассчитывается по формуле коэффициента контрастности стандарта WCAG: (L1 + 0,05) / (L2 + 0,05), в которой L1 — относительная яркость самого светлого цвета, L2 — относительная яркость самого тёмного цвета.

Web Content Accessibility Guidelines (WCAG) 2.0

www.w3.org

Графика

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

Используйте иконки как дополнительные визуальные подсказки, а не как декор

При наложении текста на картинку помните о контрастности

Убедитесь, что вся графика сопровождается кратким и понятным описанием

Интерактивные области

На тач-устройствах область нажатия должна быть достаточно большой и доступной. Особенно внимательно отнеситесь к работе с областью нажатия на устройствах с крупным экраном.

Убедитесь, что до основных контролов можно дотянуться большими пальцами и левой, и правой руки

Следите за размером области нажатия: размер подушечки пальца порядка 10 мм. Ориентируйтесь на эту величину

Текст

Визуальная архитектура в дизайне неразрывно связана с текстом. Если вы не уверены в тексте, привлеките копирайтера.

Подписи элементов должны объяснять, что произойдет при нажатии

Если клик приведет к скачиванию документа, напишите об этом прямо. Это важно для пользователей мобильных устройств, у которых может быть ограничен трафик

Не делайте отсылок к форме, размеру, визуальному расположению или звуку — не все могут их воспринимать

Не забывайте о вспомогательных технологиях

Вспомогательные технологии — это технические средства для облегчения быта жизни людей с инвалидностью.

Скринридер

Программа для чтения с экрана компьютера или смартфона, предназначенная для незрячих и людей с ослабленным зрением. Скринридер озвучивает интерфейс, а также создаёт звуковой и виброотклик.

Масштабирование

Масштабирование — стандартный инструмент для слабовидящих. Следите, чтобы при увеличении контента до 200% страница была читаема и функциональна.

Как поддерживать баланс

Чтобы сделать дизайн ваших интерфейсов доступнее, изучайте графический дизайн. Большинство приёмов и правил графического дизайна основаны на том, чтобы дизайн был доступен большому числу людей.

Одно исследование лучше, чем десяток правил. Исследуйте ваши продукты на доступность.