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

Для начала обсудим понятия.

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

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

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

Наши советы основаны на Руководстве по обеспечению доступности web-контента (WCAG) 2.1 — общих рекомендациях, разработанных W3C, чтобы сделать интернет удобным для всех. Его впервые опубликовали в 1999 году. И с тех пор регулярно дополняют и совершенствуют.

Первое правило — пользователи не равны дизайнерам

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

Сайт должен быть адаптивным

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

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

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

И не забывайте об инструментах оценки доступности и оптимизации. К примеру, инструмент WAVE сообщит об отсутствии alt-текста, заголовка первого уровня, о наличии пустой ссылки и других ошибках на сайте.

Скорректируйте настройки цвета и контрастности

Сайт должен быть легок в использовании и соответствовать критериям POUR для инклюзивного дизайна. Рекомендации по цветам и контрастности закреплены в стандартах WCAG 2.1. Вот несколько важных моментов.

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

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

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

Проверьте контент на читаемость

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

Пишите, как говорите, но, разумеется, грамотно. В помощь предлагаем ресурс Главред. Он отразит предложения со сложными конструкциями, пассивным залогом и предложит синонимы для редко используемых слов.

Интерфейс должен быть совместим со вспомогательными устройствами

Совместимость связана с принципом надежности из правила POUR. Любое вспомогательное устройство должно сочетаться с интерфейсом.

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

Выделите на сайте активные элементы. Ссылки и формы с контрастными границами позволят юзерам с клавиатурой перемещаться с помощью кнопки Tab.

Добавьте кнопку «Перейти к содержанию в начале страницы». Так посетителям не придется лишний раз нажимать на кнопки в поисках требуемой информации.

Структурируйте контент и определите приоритет. Соблюсти правила семантической структуры вам помогут теги <h1>, <div>, HTML5. Их можно проверить в W3C Markup Validation Service.

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

Медиафайлы должны быть видимы и читаемы

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

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

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

Учтите самую низкую скорость загрузки сайта

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

Данные о скорости интернета в разных странах доступны на ресурсе FastMetric. Сделайте чек скорости интернета, моделируя низкую скорость связи. Это можно сделать с помощью Chrome DevTool. Нужно открыть вкладку Network и поменять метку No throttling на необходимую вам скорость. Можно также замедлить скорость благодаря Fiddler и опции «имитировать модем».

Обеспечьте взаимодействие с юзерами

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

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

Необходимо внедрить предупреждения о тайм-аутах

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

У пользователей должна быть возможность управлять своими личными данными

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

Инклюзивный дизайн как приоритет

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

Есть такой пример об основательнице Code4Rights Джой Буоламвини, которой пришлось работать с программным обеспечением для распознавания лиц в белой маске. Разработчики просто не включили образцы афроамериканских лиц в учебное ПО, и программа не распознавала ее лицо из-за цвета кожи. Неприятная ситуация. А доступный и инклюзивный дизайн направлен на решение проблемы дискриминации. Также он способствует снижению стресса, который может возникнуть при взаимодействии с интерфейсом.

Подведем итог

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