Нужна реклама на аудиторию маркетологов? Вы оказались в правильном месте.
«Конверт» — главное российское медиа о маркетинге, которое читает 1,5 млн человек в месяц.
Разбираемся вместе с экспертами, как сделать сайт понятным, приятным и удобным для любого пользователя
Инклюзивный дизайн сайтов и приложений подразумевает доступность функционала широкому кругу пользователей ― включая людей с ограниченными возможностями здоровья (ОВЗ) и здоровых людей, которые находятся в условиях, ограничивающих их ресурсы.
В статье разберём, как проектировать сайты и приложения с учетом этого критерия. Назовем основные принципы инклюзивного дизайна и объясним, чем такой подход полезен бизнесу.
Обычно слово «инклюзивный» связывают с людьми с ОВЗ. Таким человеком является примерно каждый двенадцатый житель России ― всего 11,4 млн из 146 млн. Эту аудиторию важно и нужно учитывать при любых социальных инициативах и начинаниях, хотя на практике так получается далеко не всегда ― например, не во всех городах для незрячих есть желтая рельефная плитка на тротуарах или светофоры со звуковым сигналом.
Но понятие «инклюзивный» ― не только про людей с ОВЗ. Оно справедливо для всех, кто пользуется цифровыми продуктами. Ограничения возникают не только из-за особенностей здоровья, но и из-за контекста, в котором человек заходит на сайт или в приложение. Например, просматривает текст на телефоне под ярким солнцем ― и низкий контраст делает интерфейс почти нечитаемым. Или едет в шумном транспорте и не может прослушать видео, в этом случае без субтитров не обойтись. В такие ситуациях человек не имеет инвалидности, но сталкивается с теми же барьерами, что и пользователи с ограниченным возможностями здоровьями.
Инклюзивный дизайн учитывает такие сценарии заранее: крупные кликабельные элементы, понятная навигация, текстовые альтернативы звуку, гибкие настройки интерфейса делают продукт проще и понятнее для всех.
Спросили пользователей с ОВЗ и без инвалидности, в каких случаях им пригождаются инклюзивный дизайн или отдельные сервисы.
Незрячие пользуются компьютерами и смартфонами при помощи дополнительных приложений или утилит, которые проговаривают текст под курсором. В общем эти программы называются скринридерами или экранными дикторами — или попросту говорилками. На Windows есть платное приложение Jaws и бесплатное NVDA, их нужно устанавливать отдельно. На iPhone и Mac уже установленный VoiceOver, его нужно только включить.
На компьютерах, независимо от системы, управлять ими можно только при помощи сочетаний клавиш. Их десятки, если не сотни. К концу рабочего дня я начинаю забывать, какое сочетание мне нужно или путать их между собой — всё, значит, пора отдыхать.
На смартфонах тоже не всё так просто, там есть жесты — растопырить пальцы и вращать ими вокруг своей оси, проводить двумя пальцами от низа экрана к середине и т.п.
Люди с потерей слуха делятся на глухих, слабослышащих и позднеоглохших. Разница между группами заключается в степени потери слуха, времени её наступления и уровне развития речи.
- Глухие почти или совсем не слышат и не усваивают речь без спецобучения.
- Слабослышащие имеют частичную потерю слуха.
- Позднеоглохшие потеряли слух, уже владея речью.
Вследствие этого, а также условий реабилитации, для глухих больше характерно использование русского жестового языка (РЖЯ) как первичного и родного языка. Для слабослышащих и позднооглохших людей чаще первичен оральный русский язык, а РЖЯ вторичен. Жизнь вносит свои коррективы ― кто чем лучше владеет, есть ли аппаратура, которая помогает слышать (кохлеарная имплантация, слуховые аппараты), какое окружение вокруг, что чаще используют ― РЖЯ или технологии.
Что отсюда следует?
Глухие предпочитают, чтобы был переводчик на русский жестовый язык. Такое большое или среднее окошко на экране.
Слабослышащие и позднооглохшие предпочитают субтитры ― это дословная текстовая версия диалогов и закадрового голоса, сопровождающая видео.
Что лучше? В обществе глухих и слабослышащих постоянно идут препирания по этому поводу. Но глухих с РЖЯ меньше тех, кто не знает РЖЯ, и тех, для кого РЖЯ не первичен.
Глухие и слабослышащие люди используют приложения для преобразования речи в текст (Live Transcribe), жестового перевода (Сурдофон, Мой РЖЯ), видеосвязи, умные блокноты и вибробудильники. Есть еще Яндекс Разговор, но для меня он оказался не особо эффективным ― слышит хуже Live Transcribe. Хотя на разных мобильниках может быть по-разному.
Обычно меня интересует инклюзивный дизайн по двум причинам: есть ощущение, что у меня СДВГ, и мне некогда просматривать что-то длинное вроде вебинара на час. То есть особенности сайта или сервиса помогают направлять внимание и экономить время.
Из примеров:
1. Субтитры на YouTube. Благодаря тому, что в код сайта вшиты субтитры, нейросеть автоматически видит весь текст любого видео и может работать с ним. Обычно я прошу таймкоды и саммари, иногда задаю вопросы.
2. На некоторых сайтах есть режим для чтения, когда все лишние разделы скрыты, а ты можешь задать размер шрифта. Это очень удобно, особенно когда так и хочется отвлечься на вшитые ссылки, другие вкладки. И когда обычно на ноутбуке итак стоит 125%, а ты уже в очках
Я из тех людей, кто на «Кинопоиске» включает русские субтитры ко всему, что смотрит, даже если фильм или сериал снят на русском. Когда рассказываю об этом, все обычно думают, что у меня проблемы со слухом.
Но главная фишка вот в чем: я поняла, что плохо считываю музыку и звуковой фон. Для меня саундтрек — просто шум на заднем плане, который обычно не замечаю. Мозг его как бы отфильтровывает, концентрируясь на диалогах и картинке.
Здесь нет патологии или медицинской особенности. Если я просто включу музыку в наушниках или в машине, прекрасно буду ее слышать, различать инструменты и получать удовольствие. Но вот именно во время просмотра как будто что-то ускользает.
А ведь это огромная часть фильма! Режиссеры, композиторы, звукорежиссеры — целая команда людей работает над тем, чтобы через музыку и звуки передать настроение, создать напряжение, подчеркнуть эмоции персонажа. Музыка может подсказать, что сейчас произойдет что-то страшное или что напряжение спало. А я все это просто упускала.
В какой-то момент я поняла, что из-за этой своей «слуховой невнимательности» теряю часть сюжета. Не до конца считываю атмосферу сцены, не понимаю полноту картины, которую задумали авторы. Вижу, что герой грустит, но не слышу ту самую щемящую мелодию, которая по задумке должна была бы выдавить из меня слезу.
Случайно заметила фишку с субтитрами, когда включила их из-за того, что звук у кино был кошмарный. Для меня шоком стало то, что там прописывают не только реплики героев, но и музыку. Прямо так и пишут: «[играет трагичная музыка]», и я тут же понимаю, что момент на экране гораздо печальнее, чем мне показалось. Или «[музыка сменяется на веселую, динамичную]», и я вижу, что настроение героя изменилось, даже если он еще этого не показывает.
А еще круче — описание звуков. Например, в субтитрах может появиться «[тихое покашливание в соседней комнате]». Без пометки я бы в жизни не обратила на него внимание! А ведь это может быть суперважной деталью: значит, в доме есть кто-то еще, и сюжет может полностью перевернуться. Или, например, «[скрипнула половица]», «[вдалеке завыла сирена]» — такие мелочи я начала замечать только благодаря текстовому описанию.
При этом обидно, что не у всех фильмов и сериалов есть русские субтитры, не говоря уже о такой детальной проработке. Но когда натыкаешься на такое — просто потрясающе!
Я искренне мечтаю, чтобы это стало нормой, чтобы абсолютно все субтитры прописывали звуковую картину полностью. Чтобы каждая мелодия, каждый шорох, каждый вздох за кадром был отражен в тексте. Потому что это правда открывает кино с совершенно новой стороны.
Инклюзивный дизайн в цифровых продуктах опирается на стандарты доступности, которые содержатся в международном документе WCAG 2.2 и российском ГОСТ Р 52872-2019. У них одна идея: сайт или приложение должны быть удобными для людей с разными особенностями здоровья и в разных условиях использования. В основе стандартов лежат четыре принципа, которые помогают сделать продукт доступным со всех сторон.
Информация и элементы интерфейса на сайте или в приложении должны быть доступны пользователю в том виде, в котором он может их полноценно воспринять, т. е. как минимум через один орган чувств ― зрение, слух или осязание. Если человек не сможет познакомиться с контентом доступным способом, ресурс перестает для него существовать.
Как это выглядит на практике:
Контраст и читаемость. Текст и элементы интерфейса должны выделяться на фоне. В первую очередь, это важно для людей с нарушениями зрения, пользователей с уставшими глазами и тех, кто пользуется смартфоном на улице.
Текстовые альтернативы для изображений. Картинки, иконки и инфографика должны иметь описания, которые могут озвучить скринридеры.
Субтитры и текстовые версии медиа. Видео и аудио должны сопровождаться субтитрами или расшифровками. В первую очередь, это помогает воспринимать контент людям с нарушениями слуха и всем, кто не может включить звук.
Глухим удобно, чтобы субтитры не были мелкими, были внятно отделены от фона, а также шли со скоростью чтения. Им неудобно воспринимать текст по одному слову, им удобно ― и слышащим, скорее всего, тоже ― чтобы на экран выводились смысловые словосочетания.
То есть неудобно читать субтитры в таком порядке:
Король...
традиционно..
вручает...
государственные награды…
медали, ордена.
А удобно читать:
Король традиционно вручает государственные награды, медали, ордена… [первая строка]
в церемониальном зале старинного замка [вторая выведенная строка]
Ещё важно, чтобы субтитры не убирали с экрана слишком быстро. А то иногда их выводят на мгновение ― не успеваешь прочитать.
Пользователь должен понимать, что происходит на экране, какие действия от него ожидаются и к чему они приведут. Чем меньше догадок, тем лучше опыт.
Как это выглядит на практике:
Простые формулировки. Тексты кнопок, подсказок и ошибок стоит писать человеческим языком, без технических терминов.
Предсказуемое поведение интерфейса. Навигация, кнопки и элементы управления должны работать одинаково на всех страницах ― так пользователям проще ориентироваться. В первую очередь, это помогает людям с когнитивными ограничениями, слепым и слабовидящим.
Подсказки и объяснения. Формы ввода должны подсказывать формат данных и ошибки до отправки.
Пользователь должен иметь возможность взаимодействовать с интерфейсом разными способами и в своём темпе.
Как это выглядит на практике:
Навигация с клавиатуры. Все функции сайта должны быть доступны без мыши.
Наличие заголовков и подписей. По чётким заголовкам пользователям проще находить нужную информацию и устанавливать взаимосвязи между частями контента.
Если на сайте размечены заголовки, я просто буду щёлкать букву h на Windows и перемещаться только по заголовкам. А если заголовки не размечены, мне придётся всю страницу проходить по каждой строчке, чтоб не пропустить нужный раздел или фразу. Это долго и ужасно раздражает.
Контроль над динамическим контентом. Пользователь должен иметь возможность остановить анимацию или видео.
Контент должен корректно работать на разных устройствах и в браузерах, а также быть совместимым со вспомогательными технологиями — сейчас и в будущем.
Как это выглядит на практике:
Семантическая вёрстка. Заголовки, списки и кнопки должны быть размечены правильно, чтобы их корректно воспринимали скринридеры. Это происходит благодаря дереву доступности со смысловыми тегами и специальными атрибутами, которые дополняют информацию об элементах на странице.
Недавно у меня не получилось заказать еду в «Пятёрочке» через приложение Яндекс Еды из-за виртуального помощника. Он включался автоматически каждый раз, когда я туда заходила. Я знала, что слева должна быть кнопка, которая его выключит, но экранный диктор её не видел. Выключила скринридер и попробовала нажать на кнопку наугад, но при повторном заходе в приложение злополучное окно с помощником возвращалось.
Такие штуки, которые зрячим людям облегчают жизнь, нам её только усложняют. Я не программист, но думаю, чтобы не возникало проблем, нужно правильно разметить кнопки. А то сейчас одни кнопки скринридер даже не видит, а другие видит, но нажать на них не получается.
Совместимость с технологиями доступа. Сайт должен работать с экранными дикторами, увеличителями текста и другими вспомогательными инструментами.
Было бы здорово везде иметь по умолчанию автосубтитры ― идеально, конечно, полноценные и проверенные, потому что любая автоматика расшифровки аудио в текст выдает ошибки.
Также хотелось бы, чтобы автоматика писала как слышит, а не подбирала подходящее слово. Потому что если автоматика напишет слово как слышит, порой можно понять, что хотели сказать. А если она несколько слов заменит по принципу «я расслышала не так, наверное, наиболее подходящие слова вот эти», то вообще можно не угадать, что было в оригинале.
Чистый и стабильный код. Ошибки в разметке могут сломать доступность интерфейса.
Есть сайты и приложения, которые слепым в принципе недоступны. Например, после осеннего обновления Telegram я больше не могу пользоваться официальным приложением. Даже сообщение отправить нельзя, потому что скринридер не находит там кнопок. Обидно до ужаса — у меня там вся работа — и блог, и клиенты, и рабочие чаты. Пока нашлось стороннее приложение, но обновления на всякий случай отключила. Когда перестанут поддерживать эту версию, не знаю, что буду делать.
А есть ресурсы, которые в целом доступны, но отдельные кнопки сломаны. У Яндекса, например, есть два приложения, где можно заказать продукты, ― Еда и Go. У Еды мне больше нравится интерфейс: там скринридер проговаривает одним махом и название, и вес, и стоимость. У Go для всего отдельные строчки, и приходится перещёлкивать каждую, по-другому это не работает.
В Еде заказывать банально быстрее, но там сломали выбор магазина. Я щёлкаю на название, но ничего не происходит. Будто открыть нельзя совсем, но я-то знаю, что можно.
Описанные принципы инклюзивного дизайна помогают смотреть на разработку шире и проектировать интерфейсы, которые остаются удобными независимо от условий и особенностей пользователя.
Инклюзивность перестаёт быть дополнительной опцией и становится частью качественного UX, который влияет на лояльность и конверсии. Для бизнеса наличие такого дизайна означает лучший пользовательский опыт, меньше отказов и больше людей, которые могут без проблем дойти до целевого действия.
Вот что получает бизнес, который использует инклюзивный дизайн:
Расширение аудитории и рост конверсий. Когда интерфейсом легко пользоваться, продукт становится доступным большему числу людей. Это напрямую влияет на конверсию: пользователи разных категорий реже теряются и быстрее понимают, что делать.
Вкладываться в инклюзивный дизайн выгодно. Благодаря ему сайт или приложение становится доступным не только людям с ОВЗ, но и здоровым людям в разных ситуациях тоже.
Например, управление голосом будет удобным и для незрячих, и для пользователей, у которых заняты руки ― сумками с продуктами, детьми, работой.
Видеокружочки в мессенджерах подойдут нет только глухим, которым нужно сообщить информацию на РЖЯ, но и слышащим, которые делают видеоотчеты, трансляции.
Инклюзия ― это доступность всем одновременно, не только одной категории.
Преимущества для SEO и трафика. Многие требования доступности совпадают с базовыми принципами SEO. Четкая структура страниц, корректные заголовки, текстовые альтернативы изображениям и видео, понятные ссылки помогают поисковым системам лучше понимать контент. В итоге сайт лучше индексируется и получает стабильный органический трафик.
Улучшение репутации бренда и лояльности. Удобный и доступный интерфейс формирует ощущение заботы о пользователе. Люди реже испытывают негативные эмоции по отношению к продукту, охотнее возвращаются и чаще рекомендуют другим.
Среди людей с ОВЗ немало тех, кто готов отдать бизнесу свои деньги. Большинство моих знакомых, кто просто не видит или не слышит — им нужно не только дорогостоящее лечение, они могут позволить себе больше. А с учётом того, что инвалидность накладывает свои особенности, то, скажем, в путешествиях такие люди часто берут индивидуальные туры. Это дороже, но спокойнее и удобнее. Но если сайт недоступен, тур заказать не удаётся, значит, бизнес не получит своих денег, хотя мог бы.
Это же касается развлечений. Иногда хочешь заказать экскурсию, мастер-класс, купить билеты на концерт. На сайте или в соцсетях написано, что людей с ОВЗ ждут и готовы всячески помогать. Пытаешься оформить заказ, но не тут-то было — сайт недоступен, кнопки не нажимаются.
Юридическая безопасность. Следование стандартам доступности снижает риски претензий со стороны пользователей и представителей закона. Даже если требования пока не обязательны, бизнес будет готов к их появлению.
В 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: нажми. Программа для людей, которые могут нажимать только одну кнопку.
Говорящий город. Приложение системы радиоинформирования и звукового ориентирования в городе, которое повышает доступность инфраструктуры. Например, с его помощью можно найти остановки общественного транспорта или вход в метро. Пока работает не во всех регионах.
Определитель предметов. Приложение, которое помогает слепым и слепоглухим людям ориентироваться в пространстве и находить необходимые вещи.
Альберт. Приложение для альтернативной коммуникации.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
Прямо сейчас мы тестируем новую услугу для компаний — ведение брендового блога в этом журнале. Интересно? Напишите письмо на konvert@unisender.com с темой «Блог компании».