TL;DR: Wildberries набирает 90% в Lighthouse, но незрячий пользователь не может завершить покупку. Основные проблемы: невидимый фокус, недоступные фильтры, отсутствие озвучки уведомлений.
После Приорбанка я думал, кого взять следующим для небольшого публичного аудита. Недавно минула пора праздников, и что-то мне подсказывает, что многие делали покупки в онлайн-маркетах, чтобы приобрести подарки близким. Этот период — высокий сезон для таких приложений. Они зарабатывают много денег в это время, но и нагрузка на инфраструктуру идёт колоссальная.
Мой личный топ из всех популярных онлайн-маркетов — это Wildberries. Я люблю этот сервис и активно им пользуюсь. Мне кажется, это уже хороший повод посмотреть, насколько он доступен людям с различными ограничениями. Безусловно, это очень популярная платформа в странах СНГ, но это, конечно же, не значит, что она одновременно и доступна на 100%.
Сразу хочу оговориться: я не пытаюсь подчеркнуть какой-то изъян платформы. В конце концов, у каждого продукта свои бизнес-приоритеты, и доступность (если она не обязательна с точки зрения законодательства) — это личное дело каждого бизнеса. К примеру, мой продукт тоже не удовлетворяет всем критериям доступности, да и многие другие, на которых я работал. При том что моя личная аналитика прошлого года показала, что 20% моей пользовательской базы меняют размер шрифта для лучшего восприятия, но не факт, что есть хотя бы один (я бы сказал, его и нет) кто использует продукт, будучи полностью незрячим, со скринридером.
Часто интерес к этой теме больше у юридических фирм. Понимая лазейки в законах, они сами находят «жертву» — компанию, не удовлетворяющую требованиям. Затем находят людей с ограничениями, от имени которых подают многомиллионный иск и зарабатывают себе деньги. При том что сами люди с ограничениями этими продуктами могли вовсе и не пользоваться.
Тем не менее Wildberries — это многомиллионная аудитория и доступ практически к любым бытовым товарам. Это гигантская платформа, и это просто интересно, какой у неё сейчас статус в категории «доступность».
Методология аудита
Как и ранее, будет всего 5 этапов проверки. Задача для теста предельно простая: найти в поиске огромный крутой Бэтмобиль, закинуть его себе в корзину и оформить заказ. Мы проверим путь от первого клика до финального «заказать», используя только клавиатуру и скринридер.
Итак, пожалуй, начнём.
1. Заявление о доступности и Skip Links
Результат: Оба маркера отсутствуют.
Skip Links (быстрые ссылки для перехода к основному контенту, минуя шапку) нигде нет. Это нарушение критерия WCAG 2.4.1 Bypass Blocks. Навигация начинается сразу в шапке, и пользователю скринридера приходится каждый раз слушать десятки ссылок, прежде чем добраться до товаров.
Заявления о доступности (Accessibility Statement) тоже нет. Но даже сам подвал с информационными ссылками найти — это проблема. С первого раза я не смог: почти на всех страницах работает шаблон бесконечной подгрузки товаров каталога при скролле вниз. Только в корзине я смог увидеть его ссылки. Оказывается, внизу есть специальная кнопка-ярлык, чтобы его открыть, но о ней — позже.
Вывод: Первое впечатление — платформа не задумывалась о навигации для вспомогательных технологий с самого начала и о понятной информации о том, а каков же статус доступности на этой самой платформе.
2. Навигация с клавиатуры
Результат: Классика жанра, знакомого по многим продуктам: :focus { outline: none } на всём приложении. Совсем непонятно, как и где я двигаюсь клавиатурой, фокус невидим. Это прямое нарушение WCAG 2.4.7 Focus Visible.
Современный подход — использовать :focus-visible, чтобы показывать индикатор фокуса только при навигации с клавиатуры, не мешая пользователям мыши:
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--brand-color);
}
Боковое меню: Кнопка в шапке с aria-label="Навигация по сайту" открывает боковое меню. Забавный момент: несмотря на то, что меню визуально скрыто пока не нажмешь кнопку, клавиатурой приходится проходить по всем его пунктам — они все доступны для табуляции, хоть и не видны. Это сбивает с толку.
Фильтры — полный провал: Сайдбар «Все фильтры» открывается с клавиатуры, но есть критическая проблема с замыканием фокуса. Окно выезжает, но фокус на него не попадает, и вы продолжаете ходить по затемнённой подложке в надежде когда-нибудь дойти и до фильтров. Фильтры «По популярности», «Цвет», «Категория», «Бренд» — это выпадающие списки, которые появляются только при наведении мыши. С клавиатуры их нельзя открыть ни пробелом, ни Enter. То есть они полностью недоступны.
Вывод: Без мыши отфильтровать товары и нормально воспользоваться меню практически невозможно. Это блокирует целую категорию пользователей.
3. Контрастность цветов
Результат: В целом, беглый взгляд показывает, что цвета яркие и насыщенные. Но два места вызывают сомнение.
Белый текст на светло-сером фоне (вторичная подпись на карточке товара).
И главная проблема цвета: сиреневый на фиолетовом в шапке для ключевых пунктов меню «Заказы», «Избранное», «Профиль», «Корзина». Это основные и важные точки входа.
Интуиция не подвела: это не соответствует стандарту WCAG 1.4.3 Contrast (Minimum) Level AA. Соотношение контраста тут 2.7:1 и 4.4:1 при необходимом минимуме 4.5:1 для нормального текста. Для глобальной навигации в таком масштабном маркетплейсе — это серьёзный просчёт.
4. Работа со скринридером и клавиатурой
Переходим в режим плохого зрения и включаем VoiceOver. Кое-как добираемся до товара. Тут начинается самое интересное, потому что хочется понять, как будет озвучиваться информация.
Цены: Да, они озвучиваются, но нет никаких пояснений про скидку. То, что визуально явно обозначено как текущая цена со скидкой и оригинальная цена (перечёркнутая), озвучивается просто как разные суммы. Совершенно непонятно, что есть что.
Кнопка добавления в корзину: Называется «Послезавтра». Дело в том, что Wildberries использует дату доставки как текст кнопки добавления в корзину. Понять, что, нажав на неё, я добавлю товар в корзину, — задача не из лёгких. Это не кнопка, это загадка.
Нотификация о добавлении: Допустим, я рискнул и нажал. Разочарование. Уведомление о том, что товар добавлен в корзину, не озвучивается. Оно неверно размечено aria-атрибутами. В итоге — тишина. На карточке статус тоже не меняется для скринридера: кнопка «Послезавтра» просто пропадает, а вместо неё появляются две неподписанные «кнопки» с цифрой посередине (на деле — счётчик количества). Пользователь с плохим зрением об этом не узнает.
Корзина и фиаско с заказом: Быстрого перехода в корзину нет. Нужно вернуться в шапку, найти индикатор, проверить его и только потом перейти. Допустим, я смог. Выбираю товар, жму на кнопку «Заказать». И... ничего не происходит. Просто тишина.
Главная проблема: Приложение требует выбрать адрес в отдельной секции, но в комбинации «клавиатура + скринридер» мы об этом никак не узнаем. Нет ошибок, нет фокуса на поле, только визуальный намёк — фиолетовая рамка. По итогу — фиаско. Я не смог оформить заказ, пройдя 90% пути.
5. Сканирование инструментами
Deque Axe: Нашёл 29 ошибок. Одна критическая — та самая волшебная кнопка-ярлык для открытия подвала не имеет подписи для скринридера (aria-label). 28 серьёзных — в основном связаны с цветом и контрастом. Внезапно оказалось, что кнопки добавления в корзину (! главные кнопки конверсии) имеют недостаточный контраст. Любопытно, что до нормы 4.5:1 не хватило всего 0.01 — сочетание фиолетового и белого даёт 4.49:1. Такое ощущение, что кто-то проверял, но округлил в свою пользу.
Lighthouse: Показал 90% доступности и те же ошибки, что и Axe. Забавно, правда? 90% доступности, а заказ я сделать не смог. Это наглядно показывает, почему автоматические инструменты покрывают лишь ~30% критериев WCAG — они не могут проверить логику взаимодействия и пользовательские сценарии. Не стоит полагаться только на метрики инструментов, иногда это даже не полумера.
WAVE: Из интересного — иерархия заголовков. Внезапно тут вообще нет h1, только h2. Иерархии как таковой нет, а первый заголовок в шапке это... «Валюта». О чём это говорит? О том, что семантическая структура страницы не выстроена.
Рекомендации
Если бы команда Wildberries захотела улучшить доступность, вот приоритизированный список:
Критический приоритет (блокирует использование):
- Добавить видимый индикатор фокуса через
:focus-visible - Исправить замыкание фокуса в модальных окнах (фильтры, меню)
- Сделать фильтры доступными с клавиатуры (открытие по Enter/Space)
- Добавить озвучку уведомлений через
aria-live="polite", а может даже и"assertive" - Исправить валидацию формы заказа — сообщать об ошибках скринридеру
Высокий приоритет:
- Добавить Skip Link для перехода к основному контенту
- Исправить контраст в шапке (меню) и на кнопках добавления в корзину
- Переименовать кнопку «Послезавтра» → «В корзину (доставка послезавтра)»
- Добавить семантику цен: «Цена со скидкой: X», «Старая цена: Y»
Средний приоритет:
- Выстроить иерархию заголовков (добавить h1)
- Скрыть боковое меню от табуляции, когда оно закрыто (
inertилиtabindex="-1") - Добавить Accessibility Statement в подвал
Итог: Доступность как роскошь, а не необходимость
Wildberries — мощный, удобный и популярный сервис. Но с точки зрения доступности он выглядит как типичный высоконагруженный продукт, где над этой темой не задумывались системно.
Что есть: Минимальная базовая работа с некоторыми ARIA-атрибутами (часто некорректная), 90% пройденных автоматических проверок и неплохие alt-пояснения изображений.
Чего нет: Продуманной навигации с клавиатуры, семантической вёрстки, доступных форм взаимодействия, контрастности ключевых элементов и, самое главное, возможности завершить ключевой сценарий без зрения.
Это не вопрос злого умысла, а вопрос приоритетов. Пока доступность не станет таким же KPI, как конверсия или скорость загрузки, ситуация вряд ли изменится. А жаль, потому что многомиллионная аудитория включает в себя и тех, кто не может просто взять и кликнуть мышкой. Для них суперпортал остаётся красивой, но закрытой витриной.
P.S.
Бэтмобиль так и не был заказан. Надеюсь, у Бэтмена есть другие каналы снабжения.