Привет, я Максим, веб-разработчик. Когда говорят «доступность сайта», обычно подразумевают адаптацию для людей с нарушениями зрения или слуха: экранные читалки, субтитры, контрастность. Но есть целый пласт доступности, о котором почти никто не говорит — когнитивная доступность. Это адаптация сайта для людей с особенностями восприятия информации: СДВГ (синдром дефицита внимания и гиперактивности), дислексия, расстройства аутистического спектра (РАС) и другие когнитивные особенности.

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

Почему это важно именно сейчас

В России действует ГОСТ Р 52872, который определяет требования к доступности веб-контента. В международном пространстве — WCAG 2.2, где когнитивной доступности посвящён отдельный раздел. С каждым обновлением стандартов когнитивная доступность получает всё больше внимания.

Но дело не только в стандартах. Вот практическая сторона:

Коммерческая выгода. Сайт, удобный для людей с СДВГ — удобен для всех. Понятная навигация, простые формы, чёткие инструкции — это повышает конверсию для любой аудитории.

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

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

СДВГ: как адаптировать сайт для людей с дефицитом внимания

СДВГ — одно из самых распространённых когнитивных расстройств. По различным данным, от 5 до 7% взрослого населения живут с СДВГ (многие — без диагноза). Основные сложности при взаимодействии с сайтами:

  • Трудности с удержанием внимания на длинных текстах
  • Лёгкая отвлекаемость на движущиеся элементы, анимации, попапы
  • Сложности с многоступенчатыми процессами (длинные формы, пошаговые инструкции)
  • Тенденция к импульсивным действиям (нажать не ту кнопку)

Что помогает

Чёткая визуальная иерархия. Крупные заголовки, короткие абзацы, буллеты для ключевых пунктов. Взгляд должен легко «сканировать» страницу и находить нужное.

Минимум отвлекающих элементов. Автоматически проигрывающиеся видео, мигающие баннеры, всплывающие окна — всё это нужно либо убрать, либо дать возможность отключить. CSS-свойство @media (prefers-reduced-motion: reduce) позволяет определить, что пользователь просит снизить анимации, и отключить их.

Прогресс-индикаторы. Если процесс многоступенчатый (оформление заказа, заполнение формы) — показывайте, на каком шаге находится пользователь и сколько осталось. «Шаг 2 из 4» снижает тревогу и помогает удержать внимание.

Автосохранение. Если пользователь заполняет форму и отвлёкся (а при СДВГ это происходит часто) — данные не должны пропасть. Автосохранение каждые 30 секунд — простое техническое решение, которое спасает от разочарования.

Возможность отменить действие. Вместо безвозвратного «Удалить» — «Удалить (отменить в течение 10 секунд)». Это защищает от импульсивных действий.

Короткие тексты с подзаголовками. Разбивайте длинный контент на секции по 2–3 абзаца с говорящими подзаголовками. Пользователь с СДВГ может прочитать только подзаголовки и понять суть.

Дислексия: как сделать текст читаемым

Дислексия — нарушение способности к чтению при сохранном интеллекте. По разным оценкам, 5–15% населения имеют дислексию в той или иной степени. Проблема не в понимании текста, а в его визуальном восприятии: буквы «прыгают», строки сливаются, слова «переворачиваются».

Что помогает

Шрифт. Специализированные шрифты для дислексии (OpenDyslexic, Lexie Readable) имеют утяжелённую нижнюю часть букв, что помогает мозгу «заземлить» текст. Но даже без специальных шрифтов можно помочь: используйте простые гротески (Arial, Verdana, Nunito), избегайте засечковых шрифтов и особенно курсива.

Межстрочный интервал. Минимум 1.5, лучше 1.8. Строки не должны сливаться.

Длина строки. 50–75 символов — оптимально. Слишком длинные строки (100+ символов) сложно отслеживать глазами. На сайте это контролируется через max-width контейнера.

Контрастность, но не максимальная. Чёрный текст на белом фоне (#000 на #FFF) — слишком контрастно для людей с дислексией. Оптимально: тёмно-серый (#333 или #2D2D2D) на мягко-белом (#F5F5F0 или #FAFAFA). Разница в контрасте минимальна визуально, но ощутима для читаемости.

Выравнивание по левому краю. Выравнивание по ширине (justify) создаёт неравномерные пробелы между словами, которые при дислексии воспринимаются как «дыры» в тексте. Левое выравнивание — стабильно и предсказуемо.

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

РАС: как учитывать особенности восприятия

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

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

Что помогает

Спокойная цветовая палитра. Мягкие, приглушённые цвета. Минимум контрастных сочетаний (красный + зелёный, ярко-жёлтый + синий). Возможность переключиться на тёмную тему.

Предсказуемая навигация. Меню всегда в одном месте. Кнопки выглядят одинаково на всех страницах. Ссылки визуально отличаются от обычного текста. Никаких «сюрпризов» в интерфейсе.

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

Явные инструкции. Не «Заполните форму» (какую? где?), а «Введите ваше имя в поле ниже и нажмите зелёную кнопку "Отправить"». Конкретно, пошагово, без двусмысленностей.

Отсутствие неожиданных звуков. Автоматическое воспроизведение аудио или видео — стресс для людей с сенсорной чувствительностью. Любой звук — только по действию пользователя.

Предупреждения о переходах. Если клик ведёт на внешний сайт, открывает попап или начинает скачивание — предупредите заранее. Неожиданные изменения контекста дезориентируют.

Техническая реализация: что я делаю на практике

Панель доступности

Виджет в углу сайта (обычно правый нижний) с иконкой доступности. При клике открывается панель с переключателями:

  • Размер текста (стандартный / увеличенный / крупный)
  • Межстрочный интервал (стандартный / увеличенный)
  • Шрифт (стандартный / для дислексии)
  • Цветовая схема (стандартная / высококонтрастная / мягкая / тёмная)
  • Отключение анимаций
  • Выделение ссылок (подчёркивание)
  • Линейка для чтения (горизонтальная линия, которая следует за курсором)

Технически: настройки сохраняются в cookies или localStorage, чтобы при повторном визите пользователь не настраивал заново. CSS-переменные позволяют переключать стили без перезагрузки.

Семантическая разметка

Правильная HTML-семантика: заголовки (h1–h6) по иерархии, списки — через ul/ol, навигация — через nav, основной контент — через main. Это помогает не только скринридерам, но и вспомогательным технологиям для когнитивной доступности.

ARIA-атрибуты

aria-label для элементов без текстового содержания, aria-describedby для дополнительных инструкций к полям форм, aria-live для динамически обновляемого контента (чтобы вспомогательные технологии объявляли изменения).

Тестирование

  • Проверка через WAVE (webaim.org/wave) — инструмент оценки доступности
  • Ручное тестирование с клавиатурой (всё должно быть доступно без мыши)
  • Проверка с экранным читалкой (NVDA или VoiceOver)
  • Пользовательское тестирование с участием людей с когнитивными особенностями (если есть возможность)

Что это стоит

Добавление панели доступности на существующий сайт — от 30 000 до 80 000 рублей. Срок — 1–2 недели.

Аудит когнитивной доступности + исправления — от 50 000 до 150 000 рублей. Срок — 2–4 недели.

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

Почему это выгодно бизнесу

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

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

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