Гайд по доступному дизайну

Элементы интерфейса должны быть достаточно контрастны относительно фона.

Минимальные коэффициенты контрастности для соблюдения уровня AA:

• 4.5:1 — наборный текст (до 12 пт, Regular);
• 3:1 — текст большого размера (от 14 пт, Bold и от 18 пт, Regular), иконки, графика и границы элементов.

Уровень контрастности можно проверить в плагине Contrast для Figma или с помощью онлайн-сервисов, например, Coolors.

У 1 из 12 мужчин и 1 из 200 женщин встречаются нарушения восприятия цветов. Хуже всего воспринимают оттенки красного и зеленого цветов. А лучше всего — синего.

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

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

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

Поэтому при формировании палитры рекомендуем проверять цвета и оттенки в онлайн-калькуляторе Delta-E.

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

Если показатель меньше 35 единиц, выберите более темный или светлый оттенок цвета в зависимости от вашей палитры.

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

Порядок размерности заголовков должен идти от самого крупного, к самому мелкому.

Для основного текста используйте шрифт минимум 16 пунктов. Это комфортный для большинства пользователей размер.

Чтобы пользователю было легче сосредоточиться на одной линии текста, не терять ее или не цепляться за соседние строки, придерживайтесь комфортного отношения интерлиньяжа к кеглю:

• 140-165% — для основного текста;
• 100-130% — для заголовков;
• 130% — для коротких текстов.

Чем длиннее строка, тем больше должен быть интерлиньяж.

Чем больше размер шрифта, тем меньше интерлиньяж. В заголовках он самый маленький, а в мелком тексте увеличенный.

Слишком длинные или слишком короткие строки некомфортно читать.

Для обычного текста задавайте длину строки от 45 до 75 символов, включая пробелы и знаки препинания. Оптимальное количество — 66 символов.

Для заголовков, подписей к изображениям и форм длина строки может быть короче.

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

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

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

Проверить уровень комфортности текста поможет онлайн-сервис Readability

Обратите внимание на внешне идентичные, но разные английские и русские буквы. Например, русская «А» и английская «А».

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

Например, в макет вставили текст «МТС». Позже выяснилось, что скринридер читает «ЭмТэСи» вместо привычного «ЭмТэЭс», так как в тексте буква «С» написана на английской раскладке.

Контролируйте раскладку клавиатуры, чтобы скринридер правильно проговаривал контент.

Альт-текст — это описание изображения, которое скринридер озвучивает пользователями.

Если у изображений нет альт-текста, то скринридеры просто произнесут имя файла или слово «изображение», что чаще всего не даст никакого контекста.

Описывайте изображения подробно, но ограничивайтесь примерно 130 символами для каждой картинки.

Не используйте слова «изображение», «фото» и так далее. Скринридер и так произнесет формат контента.

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

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

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

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

Сопровождайте иконки текстом. Если такой возможности нет, старайтесь использовать общеизвестные иконки или образы для них: лупа — для поиска, звуковые волны — для музыкальных сервисов.

Так иконки будут понятны и доступны большему количеству пользователей.

Кнопки с обобщенным названием могут запутать пользователя — «Подробнее» и «Узнать больше» не имеют никакого контекста.

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

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

Привычные и знакомые для пользователя паттерны — подчеркнутая ссылка. Синяя — не посещенная, фиолетовая — посещенная.

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

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

Skip link — это ссылка, которая помогает быстро перейти к основному содержанию страницы при использовании клавиатуры, пропустив, например, блок с навигацией.

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

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

В маленькую область нажатия намного сложнее попасть, чем в большую.

Делайте область нажатия не меньше 44 пикселей, чтобы среднестатистический пользователь мог попасть по ней большим пальцем.

Если иконки маленькие, то увеличивайте область нажатия вокруг них.

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

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

Обязательно предусмотрите состояние фокуса для интерактивных элементов. Оно появляется, если пользователь перемещается по интерфейсу с помощью клавиши «Tab».

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

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

Если поле технически не обязательно, но все равно необходимо, объясните его наличие пользователю. Для удобства отделите необязательные для заполнения поля от обязательных.

У некоторых пользователей могут быть проблемы с памятью. Не стоит использовать плейсхолдер вместо названия поля — когда пользователь начнет заполнять поле, подсказка исчезнет и придется удалять текст, чтобы снова ее посмотреть.

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

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

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

Еще одна хорошая практика — предупреждать пользователя о включенном Caps Lock. Например, при вводе пароля человек может не понять, что регистр поменялся.

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

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

По статистике, навигацию по заголовкам использует до 85% пользователей скринридеров.

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

Поэтому передайте заголовки с правильной иерархией по убыванию — от H1 до H6. Если в вашем макете нет H1 или текущий заголовок не отвечает на вопрос «Что это за страница?», просто добавьте скрытый заголовок первого уровня.

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

Иногда для разработчиков может быть неочевиден порядок переключения — поэтому лучше нарисовать карту фокуса с помощью плагина для фигмы A11y — Focus Order.

И укажите места, где альт-тексты нужно скрыть или добавить.

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

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