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

Оглавление

Что такое инклюзивный дизайн сайта и на кого он ориентирован? Зачем нужна инклюзивность и какие параметры надо учитывать при создании цифрового проекта с универсальным дизайном? Подробности – в нашем материале.

Что такое инклюзивный дизайн

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

Главные принципы инклюзивности: 

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

Универсальный дизайн устраняет проблемы, которые мешают полноценно пользоваться веб-продуктом. За design-инклюзивность отвечают дизайнеры, разработчики, менеджеры.

Сценарии ограничений

Гайдлайн «Сбер» разделяет все ограничения на ситуативные, временные и постоянные. Так, если пользователь полностью лишен слуха или зрения – это постоянное ограничение. Если у человека заболевание, которое можно вылечить (травма глаза, воспаление уха, рука в гипсе и т.д.) – это временное ограничение. Ситуативные барьеры – например, человек находится в помещении с высоким уровнем шума, или за рулем автомобиля, или держит ребенка на руках и т.п. Дизайн в инклюзивном образовании должен учитывать все возможные препятствия для пользователей интернета.

С какими проблемами сталкиваются люди, переживающие тот или иной сценарий ограничения?

Основные препятствия для доступного взаимодействия с сайтом или приложением:

• Визуальные: нечитабельный шрифт, несоблюдение стандартов контрастности; сложный текст; неправильный межстрочный интервал; неструктурированные страницы и т.п.
• Слуховые: отсутствие скринридера – программы, которая переводит тексты в голосовые сообщения; отсутствие транскрипта – текстовой расшифровки видеоряда. 
• Технические: тяжелые и не адаптированные под разные носители сайты; проблемы с управлением интерфейсом и др. 
• Языковые барьеры, когда не учитывается геолокация и нет перевода страниц на язык местной аудитории.
• Возрастные и социальные ограничения: так, пенсионерам и людям с начальной компьютерной грамотностью трудно пользоваться приложениями со сложной навигацией и многое другое.

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

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

Кому нужна инклюзивность

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

По данным ФРИ (Федерального реестра инвалидов), количество взрослых людей с ограниченными возможностями по здоровью в России в 2023 году составило более 10,2 млн граждан. Из них – инвалидов по зрению почти 500 тысяч.

Также за последние годы выросло число пожилой аудитории цифрового пространства, особенно с появлением мобильных телефонов. Как сообщает Коммерсантъ, в 2021 году доля интернет-пользователей 55–64 лет увеличилась по сравнению с 2019 годом с 67 % до 81 %, в возрасте 65–74 лет – с 39 % до 53 %. 

Сайты и приложения с доступным для восприятия дизайном положительно оценивают не только люди с проблемами по здоровью, но и обычные пользователи. А это многомиллиардная аудитория. Сегодня в мире насчитывается 5,44 млрд людей, которые пользуются мобильными телефонами, и 5,16 миллиардов имеют доступ в интернет, передает Global Digital 2023.

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

Приемы универсального дизайна

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

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

Все приемы инклюзивности сводятся к трем основным: визуальная, аудио- и функциональная доступность.

Визуальная доступность

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

Неправильно выбранный шрифт

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

При этом гайдлайны по доступности веб-проектов дают четкие указания. «Сбер», например, рекомендует использовать для основного текста шрифт размером не меньше 16 пикселей, а международные стандарты доступности WCAG указывают параметры минимального интерлиньяжа (расстояние между строками текста по вертикали) – выбранный кегль нужно увеличить не менее, чем в полтора раза (умножить на 1,5). 

Кроме того, у интернет-пользователей есть возможность самостоятельно масштабировать текст с помощью комбинации клавиш Ctrl +-. Здесь важно, чтобы сайт/приложение имели адаптивную верстку и читателю не пришлось скроллить (прокручивать) текст по горизонтали.

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

Мелкие и декоративные шрифты не стоит употреблять в электронных текстах.

Контрастность

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

• Для основного текста хороший контраст – 7:1 и выше, приемлемый – 4,5:1 и выше.
• Для заголовков хороший контраст – 4,5:1 и выше, приемлемый – 3:1 и выше.
• Для изображений (иконок, логотипов, иллюстраций) рекомендуется использовать контраст 3:1.

Оценить соответствие вашего сайта стандартам контрастности можно с помощью сервисов Coolors или WebAIM. 

Цвет

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

Сложный текст

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

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

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

Людям с дислексией (нарушениями в восприятии письменной речи) трудно воспринимать сложные предложения.

Неструктурированные страницы

Неструктурированные страницы ухудшают восприятие материала. 

Гайдлайн Google советует группировать смысловые блоки. Не стоит в угоду дизайнерским изыскам дробить связанные элементы. Например, начало абзаца разместить в верхней части страницы, а конец – далеко внизу. Такой разорванный текст читать неудобно. 

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

Межстрочный интервал

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

Оптимальным размером интервала считается величина от 120 до 160 %: например, если для текста выбран кегль 10, то межстрочный интервал должен быть в пределах – 12-16 пунктов.

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

Транскрипты видеороликов

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

Транскрипты с расшифровкой видео- и аудиороликов помогают людям с нарушениями слуха и в ситуативных ограничениях.

Иллюстрация звуковых сигналов

Звуковые сигналы, которые извещают, например, о приходе письма на почту или проведении платежа, должны визуализироваться. Причем сообщение должно отображаться на экране достаточно по времени, чтобы пользователь успел прочитать полученное уведомление. Хронометраж зависит от объема сообщения. Для короткого  текста хватит 1-2-х секунд, для длинного послания потребуется больше времени. Но помните, что «зависающие надолго» всплывающие окна могут помешать усвоению контента страницы, поэтому здесь важно соблюдать баланс. 

Активная анимация

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

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

Адаптивность

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

Главные минусы отсутствия адаптивной верстки: 

• мелкий шрифт; 
• некорректная масштабируемость, например, при увеличении текста со 100 % до 200 %, он будет выходить за края экрана;
• чтобы посмотреть масштабированный текст придется скроллить (прокручивать) его по горизонтали;
• долгая загрузка из-за тяжелого веса сайта и т.д. 

Проверить адаптивность веб-проекта можно с помощью специальных сервисов: Google Mobile-Friendly Test, Window Resizer, Adaptivator и др.

Аудиодоступность

Скринридеры (электронный диктор)

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

Скринридеры (электронные дикторы) жизненно необходимы людям с нарушениями зрения.

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

Если стоит кнопка или заголовок, то необходимо подписать их соответствующим образом: «Кнопка», «Заголовок».

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

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

При использовании скринридера людям приходится слушать большие объемы информации, поэтому полезно сокращать тексты и писать краткие формулировки. Например, лучше написать «Заказать», а не «Оформить заказ», или «Корзина», а не «Перейти в корзину» и тому подобное. Декоративные элементы, которые не несут важной смысловой нагрузки, лучше не описывать, чтобы упростить подачу.

Функциональная доступность

Многообразие управления

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

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

Кликабельность 

Попасть в мелкую кнопку трудно не только людям с двигательными и зрительными нарушениями, но и обычным пользователям, поэтому кнопки должны быть правильных размеров. Гайдлайны «Сбер» и Google рекомендуют увеличивать кликабельные кнопки до размеров не меньше 44х44 пикселя, а также масштабировать расстояния между ними (не меньше 8 пикселей).

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

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

Пространство вокруг кнопки и мелкого элемента тоже должно быть кликабельным.

Нормативные документы

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

• В 2008 году были разработаны международные стандарты WCAG, где даются конкретные рекомендации, рассматриваются ошибки и предлагаются методы оценки доступности интернет-продукта. 
• Есть американский стандарт инклюзивности цифровых проектов для госучреждений. Статья 508 Закона о реабилитации рассказывает о требованиях к сайтам, приложениям и устройствам.
• Есть европейские стандарты – EN 301 549 (англоязычная версия).
• В России за создание доступной среды в интернете отвечает ГОСТ Р 52872-2019. Нормативный акт контролирует все цифровые проекты: сайты, приложения, digital программы, стриминговые сервисы (платформы с фильмами, сериалами, играми, телеканалами). В основу документа положены стандарты WCAG, также российский ГОСТ содержит положения и критерии оценки доступности веб-проектов.

Многие крупные компании, такие как Google, Microsoft, «Сбер», понимая важность проблемы, создали подробные гайдлайны по созданию доступной среды в интернете.

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

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

Вывод

Сделать интернет-продукт доступным наибольшему числу пользователей – задача номер один для создателей digital-проектов. Чтобы добиться этого, следуйте основным принципам инклюзивности: контент и интерфейс цифровой площадки должны быть понятными, воспринимаемыми, управляемыми и надежными. 

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

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

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

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

Услуга на Веб-разработку Заказать услугу