А вы знаете, что 15% людей с тяжелой формой инвалидности пользуются интернетом ежедневно? Среди них самый высокий процент людей в возрасте от 15 до 29 лет. Хотите узнать, как выглядит интернет для них? Установите на свой компьютер приложение VoiceOver и попытайтесь найти что-нибудь, написать письмо или заказать товар.

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

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

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

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

20 лет назад независимое федеральное американское агентство ADA создало Руководство по обеспечению доступности web-контента WCAG. Это руководство регулярно обновляется и является нерушимым сводом правил для создания инклюзивного дизайна.

Основные правила WCAG

Начнем с цвета

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

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

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

Очень важно предоставить пользователю настраивать стиль страницы самостоятельно. Самое простое, что вы можете делать - дать три варианта такой цветовой настройки. Более сложные вариации - кастомная настройка цвета кнопок, фона, цвета и даже - ссылок.

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

Медиафайлы

Вашим сайтом могут пользоваться не только люди с проблемами зрения, но и слепые. Такие посетители воспринимают информацию с помощью специальных программ - скринридеров (название говорит само за себя).

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

Текст

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

  • Предоставьте возможность изменять размера шрифта до 200%
  • Учтите, что длина строки не должна превышать 80 символов
  • Не забывайте минимальный межстрочный интервал - 1,5
  • Используйте шрифт без засечек

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

 

А теперь немного о восприятии смыслов. Вы должны быть уверены, что ваш текст поймут правильно. Для этого оцените его по индексу туманности Ганнинга. Это тест на читаемость и понятность любой текстовой информации.

Управление

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

  • Для этого выделите все активные элементы. Например ссылки или другие формы с контрастными границами дадут возможность легко перемещаться с помощью кнопки Tab.
  • Упростите задачу пользователю, разместите кнопку “Перейти к содержанию” в самом начале страницы. Таким образом, любой посетитель вашего сайта сможет находить всю важную информацию, не нажимая дополнительные кнопки.

Навигация

Забудьте об использовании скрытых элементов навигации.

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

Еще один момент: не забывайте про теги перед заголовками, списками, таблицами и прочими важными моментами при верстке страниц.

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

О том, как создавать по-настоящему сложные дизайны, даже с нулевым опытом, мы рассказываем на нашем курсе “Веб-дизайнер: Счастливый Билет в Таиланд”.