Редизайн сайта корпоративного университета Сбера и отдельная версия для людей с нарушениями зрения. Нужно было собрать сложную программу обучения так, чтобы руководитель быстро находил своё, и сделать сайт удобным для всех.
СберУниверситет — это образовательный центр, через который ежегодно проходят тысячи руководителей. Сайт должен делать сразу две вещи: показывать ценность программ тем, кто пришёл за развитием, и оставаться удобным для людей с разными возможностями.
Главная работала как каталог, а не как навигатор, поэтому ценность программ терялась в общем потоке. На первых тестах участники подолгу искали подходящий курс и путались между разделами. Доступной версии, пригодной для реальной работы, по сути не было: автоматический аудит находил десятки нарушений контраста, а порядок фокуса был непредсказуемым, из-за чего скринридер терялся на странице.
Я зашёл с двух сторон. Сначала навёл порядок на главной вокруг одного сценария «понять и выбрать программу», затем спроектировал доступную версию по стандарту WCAG как полноценный продукт.
Что мне здесь подойдёт
Главная отвечает на главный вопрос: что именно мне подходит. Я перестроил её вокруг этого сценария.Раньше это был общий поток программ, теперь они сгруппированы по аудитории, а ключевое действие вынесено выше первого экрана. Раньше суть каждой программы приходилось искать внутри, теперь карточка сразу показывает то, что влияет на решение: формат и дату старта. И сам сайт из каталога превратился в место, куда хочется приехать, потому что события и жизнь кампуса работают на доверие к бренду ещё до выбора курса.
На модерируемом тесте прототипа с восемью участниками время поиска подходящей программы сократилось примерно с 48 до 21 секунды, а число возвратов в меню упало с трёх до нуля.
Доступность как полноценный продукт
Это самая важная часть проекта, поэтому она идёт сразу за главной. Чаще всего «версию для слабовидящих» делают по остаточному принципу, и пользоваться ей невозможно. Я подошёл к ней как к отдельному продукту, а не как к обязательной галочке.
Пользователь сам управляет подачей. Меняет размер шрифта, переключает цветовую схему вплоть до высококонтрастной жёлтой на чёрном и отключает изображения, когда они мешают читать.
Под капотом контраст основного текста доведён до требований WCAG AA, а заголовки выстроены в честную иерархию, чтобы скринридер читал страницу как осмысленную структуру, а не как сплошной поток. Порядок фокуса стал предсказуемым, сам фокус видно, и весь сценарий выбора программы проходится с клавиатуры без мыши.
По автоматическому аудиту нарушения контраста сведены к нулю, оценка Lighthouse Accessibility выросла с 74 до 98, а сквозной путь «выбрать и открыть программу» полностью работает и с клавиатуры, и со скринридером.
Видно, у кого учишься
Решение учиться это всегда вопрос доверия. Поэтому отдельный блок отдан тем, кто преподаёт: топ-руководители Сбера и практики. Крупные портреты и реальные должности убеждают сильнее любых слов о качестве, потому что человек заранее видит, у кого именно будет учиться.
Это осознанное решение против обезличенных «преимуществ». На корпоративном рынке руководитель доверяет конкретным именам, а не абстрактным обещаниям.
Сайт, который говорит с двумя аудиториями сразу
Главная превратилась из каталога в навигатор: время поиска нужной программы упало с 48 до 21 секунды на тесте прототипа.
Доступная версия спроектирована по WCAG: ноль нарушений контраста по аудиту, Lighthouse Accessibility 98, навигация с клавиатуры и скринридер работают предсказуемо.
Доверие собрано из преподавателей, кампуса и наград, из конкретики, а не из рекламных обещаний.
Главный профессиональный вывод: доступность должна быть частью продукта с самого начала, а не отдельной задачей в конце. Когда иерархия, контраст и фокус заложены сразу, доступная версия получается полноценной, а не урезанной копией основного сайта.
