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

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

Инклюзивный дизайн сайта: как сделать

Инклюзивный дизайн сайтов и приложений подразумевает доступность функционала широкому кругу пользователей ― включая людей с ограниченными возможностями здоровья (ОВЗ) и здоровых людей, которые находятся в условиях, ограничивающих их ресурсы.

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

Почему «инклюзивность» ― это не только про людей с ОВЗ

Обычно слово «инклюзивный» связывают с людьми с ОВЗ. Таким человеком является примерно каждый двенадцатый житель России ― всего 11,4 млн из 146 млн. Эту аудиторию важно и нужно учитывать при любых социальных инициативах и начинаниях, хотя на практике так получается далеко не всегда ― например, не во всех городах для незрячих есть желтая рельефная плитка на тротуарах или светофоры со звуковым сигналом.

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

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

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

Комментарий эксперта
Клиенту и бизнесу: зачем нужен инклюзивный дизайн сайтов и приложений 1
Елена Сичкар

Коммерческий автор, блогер. Ведёт авторский Telegram-канал «Копирайтер в чёрных очках», в котором пишет про работу и быт в отсутствии зрения

Незрячие пользуются компьютерами и смартфонами при помощи дополнительных приложений или утилит, которые проговаривают текст под курсором. В общем эти программы называются скринридерами или экранными дикторами — или попросту говорилками. На Windows есть платное приложение Jaws и бесплатное NVDA, их нужно устанавливать отдельно. На iPhone и Mac уже установленный VoiceOver, его нужно только включить.

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

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

Комментарий эксперта
Ирина Иванова
Ирина Иванова

Контент-редактор и фотограф, слабослышащая, 3 и 4 степень глухоты

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

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

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

Что отсюда следует?

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

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

Что лучше? В обществе глухих и слабослышащих постоянно идут препирания по этому поводу. Но глухих с РЖЯ меньше тех, кто не знает РЖЯ, и тех, для кого РЖЯ не первичен.

Глухие и слабослышащие люди используют приложения для преобразования речи в текст (Live Transcribe), жестового перевода (Сурдофон, Мой РЖЯ), видеосвязи, умные блокноты и вибробудильники. Есть еще Яндекс Разговор, но для меня он оказался не особо эффективным ― слышит хуже Live Transcribe. Хотя на разных мобильниках может быть по-разному.

Комментарий эксперта
d.atemeva
Дарья Артемьева

Автор «Конверта», ведёт Telegram-канал об осознанном диджитале «По-йожески»

Обычно меня интересует инклюзивный дизайн по двум причинам: есть ощущение, что у меня СДВГ, и мне некогда просматривать что-то длинное вроде вебинара на час. То есть особенности сайта или сервиса помогают направлять внимание и экономить время.

Из примеров:

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

2. На некоторых сайтах есть режим для чтения, когда все лишние разделы скрыты, а ты можешь задать размер шрифта. Это очень удобно, особенно когда так и хочется отвлечься на вшитые ссылки, другие вкладки. И когда обычно на ноутбуке итак стоит 125%, а ты уже в очках

Комментарий эксперта
Анастасия Богатова
Анастасия Богатова

Автор «Конверта», редактор, копирайтер

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

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

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

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

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

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

А еще круче — описание звуков. Например, в субтитрах может появиться «[тихое покашливание в соседней комнате]». Без пометки я бы в жизни не обратила на него внимание! А ведь это может быть суперважной деталью: значит, в доме есть кто-то еще, и сюжет может полностью перевернуться. Или, например, «[скрипнула половица]», «[вдалеке завыла сирена]» — такие мелочи я начала замечать только благодаря текстовому описанию.

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

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

В чем заключаются четыре принципа инклюзивного дизайна

Инклюзивный дизайн в цифровых продуктах опирается на стандарты доступности, которые содержатся в международном документе WCAG 2.2 и российском ГОСТ Р 52872-2019. У них одна идея: сайт или приложение должны быть удобными для людей с разными особенностями здоровья и в разных условиях использования. В основе стандартов лежат четыре принципа, которые помогают сделать продукт доступным со всех сторон.

Воспринимаемость

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

Как это выглядит на практике:

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

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

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

Изображение с alt-текстом в статье Конверта
Это скриншот из черновика одной из статей «Конверта». К каждой иллюстрации мы всегда прописываем альтернативный текст. Это не только требование SEO. По alt-тексту незрячий человек может понять, что есть на странице

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

Комментарий эксперта
Ирина Иванова
Ирина Иванова

Контент-редактор и фотограф, слабослышащая, 3 и 4 степень глухоты

Глухим удобно, чтобы субтитры не были мелкими, были внятно отделены от фона, а также шли со скоростью чтения. Им неудобно воспринимать текст по одному слову, им удобно ― и слышащим, скорее всего, тоже ― чтобы на экран выводились смысловые словосочетания.

То есть неудобно читать субтитры в таком порядке:

Король...

традиционно..

вручает...

государственные награды…

медали, ордена.

А удобно читать:

Король традиционно вручает государственные награды, медали, ордена… [первая строка]

в церемониальном зале старинного замка [вторая выведенная строка]

Ещё важно, чтобы субтитры не убирали с экрана слишком быстро. А то иногда их выводят на мгновение ― не успеваешь прочитать.

Понятность

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

Как это выглядит на практике:

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

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

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

Расположение контактов техподдержки на сайте Unisender
На разных страницах сайта Unisender контакты техподдержки можно найти в подвале

Подсказки и объяснения. Формы ввода должны подсказывать формат данных и ошибки до отправки.

Форма регистрации на сайте Unisender с подсказкой
Объяснение в форме регистрации на сайте Unisender

Управляемость

Пользователь должен иметь возможность взаимодействовать с интерфейсом разными способами и в своём темпе.

Как это выглядит на практике:

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

Перемещение с помощью Tab на сайте Unisender
По меню Unisender можно перемещаться с помощью клавиши Tab

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

Комментарий эксперта
Клиенту и бизнесу: зачем нужен инклюзивный дизайн сайтов и приложений 12
Елена Сичкар

Коммерческий автор, блогер. Ведёт авторский Telegram-канал «Копирайтер в чёрных очках», в котором пишет про работу и быт в отсутствии зрения

Если на сайте размечены заголовки, я просто буду щёлкать букву h на Windows и перемещаться только по заголовкам. А если заголовки не размечены, мне придётся всю страницу проходить по каждой строчке, чтоб не пропустить нужный раздел или фразу. Это долго и ужасно раздражает.

Контроль над динамическим контентом. Пользователь должен иметь возможность остановить анимацию или видео.

Контроль над видео на сайте Unisender ― кнопка Play и таймкоды
Помимо стандартной кнопки Play у видео на сайте Unisender есть таймкоды ― можно сразу переместиться к нужному по смыслу разделу и не просматривать весь ролик

Надежность

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

Как это выглядит на практике:

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

Комментарий эксперта
Клиенту и бизнесу: зачем нужен инклюзивный дизайн сайтов и приложений 14
Елена Сичкар

Коммерческий автор, блогер. Ведёт авторский Telegram-канал «Копирайтер в чёрных очках», в котором пишет про работу и быт в отсутствии зрения

Недавно у меня не получилось заказать еду в «Пятёрочке» через приложение Яндекс Еды из-за виртуального помощника. Он включался автоматически каждый раз, когда я туда заходила. Я знала, что слева должна быть кнопка, которая его выключит, но экранный диктор её не видел. Выключила скринридер и попробовала нажать на кнопку наугад, но при повторном заходе в приложение злополучное окно с помощником возвращалось.

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

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

Комментарий эксперта
Ирина Иванова
Ирина Иванова

Контент-редактор и фотограф, слабослышащая, 3 и 4 степень глухоты

Было бы здорово везде иметь по умолчанию автосубтитры ― идеально, конечно, полноценные и проверенные, потому что любая автоматика расшифровки аудио в текст выдает ошибки.

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

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

Комментарий эксперта
Клиенту и бизнесу: зачем нужен инклюзивный дизайн сайтов и приложений 16
Елена Сичкар

Коммерческий автор, блогер. Ведёт авторский Telegram-канал «Копирайтер в чёрных очках», в котором пишет про работу и быт в отсутствии зрения

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

А есть ресурсы, которые в целом доступны, но отдельные кнопки сломаны. У Яндекса, например, есть два приложения, где можно заказать продукты, ― Еда и Go. У Еды мне больше нравится интерфейс: там скринридер проговаривает одним махом и название, и вес, и стоимость. У Go для всего отдельные строчки, и приходится перещёлкивать каждую, по-другому это не работает.

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

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

Чем инклюзивный дизайн выгоден бизнесу

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

Вот что получает бизнес, который использует инклюзивный дизайн:

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

Комментарий эксперта
Ирина Иванова
Ирина Иванова

Контент-редактор и фотограф, слабослышащая, 3 и 4 степень глухоты

Вкладываться в инклюзивный дизайн выгодно. Благодаря ему сайт или приложение становится доступным не только людям с ОВЗ, но и здоровым людям в разных ситуациях тоже.

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

Видеокружочки в мессенджерах подойдут нет только глухим, которым нужно сообщить информацию на РЖЯ, но и слышащим, которые делают видеоотчеты, трансляции.

Инклюзия ― это доступность всем одновременно, не только одной категории.

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

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

Комментарий эксперта
Клиенту и бизнесу: зачем нужен инклюзивный дизайн сайтов и приложений 18
Елена Сичкар

Коммерческий автор, блогер. Ведёт авторский Telegram-канал «Копирайтер в чёрных очках», в котором пишет про работу и быт в отсутствии зрения

Среди людей с ОВЗ немало тех, кто готов отдать бизнесу свои деньги. Большинство моих знакомых, кто просто не видит или не слышит — им нужно не только дорогостоящее лечение, они могут позволить себе больше. А с учётом того, что инвалидность накладывает свои особенности, то, скажем, в путешествиях такие люди часто берут индивидуальные туры. Это дороже, но спокойнее и удобнее. Но если сайт недоступен, тур заказать не удаётся, значит, бизнес не получит своих денег, хотя мог бы.

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

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

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

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

Настройки индивидуальных параметров на сайте «Академии»
Цветовую схему, размер шрифта и наличие изображений можно настроить под конкретного пользователя

Инструменты и сервисы, связанные с инклюзивным дизайном

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

Инструменты для оценки доступности ресурсов

WAVE Web Accessibility Evaluation Tools. Набор инструментов для оценки доступности веб-страниц, который поможет выявить ошибки.

Lighthouse. Инструмент от Google, который предоставит отчёт по доступности и другим критериям качества сайта.

Free Website Accessibility Checker. Проверяет сайт на соответствие стандартам WCAG.

aXe DevTools. Позволяет сканировать на ошибки всю страницу или отдельные компоненты.

WCAG Color Contrast Checker. Поможет проверить соотношение контраста между фоном и текстом.

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

Сервисы для людей с ОВЗ

VoiceOver, NVDA, JAWS. Программы, которые озвучивают информацию с экрана ― скринридеры.

Экранная лупа. Приложение, которое помогает многократно увеличить текст на экране.

Яндекс Разговор. Приложение, которое переводит слова в текст и озвучивает сообщения.

Live Transcribe. Приложение, которое преобразует речь в текст.

LINKa: напиши. Программа, которая переводит сообщения в речь и сохраняет частые фразы.

Мой РЖЯ. Приложение для видеозвонка переводчику РЖЯ.

LINKa: нажми. Программа для людей, которые могут нажимать только одну кнопку.

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

Определитель предметов. Приложение, которое помогает слепым и слепоглухим людям ориентироваться в пространстве и находить необходимые вещи.

Альберт. Приложение для альтернативной коммуникации.

«Честно» — рассылка о том, что волнует и бесит

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

Наш юрист будет ругаться, если вы не примете :(
⚡️ Сэкономить 17 часов в неделю