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

Как спроектировать цифровой портал, если пользователь может не видеть интерфейс вообще?

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

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

• помощь, гранты, курсы и справочные материалы;

• статьи и новости;

• мероприятия;

• команды, авторов, амбассадоров и тифлокомментаторов;

• географию присутствия проекта по России.

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

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

Подход

Доступность стала не дополнительным режимом и не плагином, а основой архитектуры.

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

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

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

Как звучит доступный и недоступный интерфейс?

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

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

Два похожих медиа-сайта — просто послушайте, насколько по-разному они воспринимаются при использовании скринридера.

Видеосравнение работы скринридера на двух медиа-сайтах: с учетом требований доступности и без специальной адаптации.

UX и структура

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

Особое внимание мы уделили масштабу проекта. На сайте появились:

• раздел команды;

• страницы авторов, амбассадоров и тифлокомментаторов;

• карта присутствия проекта в более чем 70 городах России;

• связи между статьями, мероприятиями, новостями и персональными страницами

участников.

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

Ключевые пользовательские сценарии обсуждались с незрячими пользователями и тестировщиками ещё в процессе проектирования.

После разработки портал тщательно протестировали незрячие пользователи.

Визуальная концепция

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

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

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

Для проекта мы также разработали стеклянную 3D-интерпретацию логотипа «Особого взгляда». Она стала одним из ключевых элементов нового визуального языка.

Разработка

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

Для редакторов предусмотрели инструменты, которые упрощают работу с контентом:

• постобработка материалов из WYSIWYG-редактора;

• очистка размеров у изображений;

• перенос изображений из вставленного контента в локальное хранилище;

• сниппеты для повторяемых контентных блоков.

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

Технологический стек:

• бэкенд: 1С-Битрикс;

• фронтенд: Vue, Vite, TypeScript;

• интеграции: DaData, Sendsay.

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

Проект объединил медиа, сервисы поддержки, мероприятия, авторов, амбассадоров и географию присутствия программы в единую цифровую среду.

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

В 2025 году портал стал финалистом премии «Рейтинг Рунета» в номинации «СМИ, издательства», а также получил Гран-при в области «Интернет» XIV Международного фестиваля телерадиопрограмм и интернет-проектов об инвалидах и для инвалидов «Интеграция».

Портал тщательно протестирован незрячими пользователями и получил «Сертификат соответствия цифрового контента требованиям доступности ГОСТ».

Подробнее можно посмотреть здесь: https://okc.media/ru/casestudies/specialview/