Артур Басак

Web UI/UX Engineer | arturbasak.dev

Эта статья выросла из ростка моего цифрового сада.

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

Мой личный топ из всех популярных онлайн-маркетов — это 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 захотела улучшить доступность, вот приоритизированный список:

Критический приоритет (блокирует использование):

1. Добавить видимый индикатор фокуса через :focus-visible

2. Исправить замыкание фокуса в модальных окнах (фильтры, меню)

3. Сделать фильтры доступными с клавиатуры (открытие по Enter/Space)

4. Добавить озвучку уведомлений через aria-live="polite", а может даже и "assertive"

5. Исправить валидацию формы заказа — сообщать об ошибках скринридеру

Высокий приоритет:

1. Добавить Skip Link для перехода к основному контенту

2. Исправить контраст в шапке (меню) и на кнопках добавления в корзину

3. Переименовать кнопку «Послезавтра» → «В корзину (доставка послезавтра)»

4. Добавить семантику цен: «Цена со скидкой: X», «Старая цена: Y»

Средний приоритет:

1. Выстроить иерархию заголовков (добавить h1)

2. Скрыть боковое меню от табуляции, когда оно закрыто (inert или tabindex="-1")

3. Добавить Accessibility Statement в подвал

Итог: Доступность как роскошь, а не необходимость

Wildberries — мощный, удобный и популярный сервис. Но с точки зрения доступности он выглядит как типичный высоконагруженный продукт, где над этой темой не задумывались системно.

Что есть: Минимальная базовая работа с некоторыми ARIA-атрибутами (часто некорректная), 90% пройденных автоматических проверок и неплохие alt-пояснения изображений.
Чего нет: Продуманной навигации с клавиатуры, семантической вёрстки, доступных форм взаимодействия, контрастности ключевых элементов и, самое главное, возможности завершить ключевой сценарий без зрения.

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

P.S.

Бэтмобиль так и не был заказан. Надеюсь, у Бэтмена есть другие каналы снабжения.