Исследование невизуальной доступности сайтов и мобильных приложений сферы «Ритейл»
август — ноябрь 2023 г.
Детали исследования
Какие сервисы были протестированы:
- Сайт и мобильные приложения (iOS, Android) магазина «Ашан»;
- Сайт и мобильные приложения (iOS, Android) магазина «ВкусВилл»;
- Сайт и мобильные приложения (iOS, Android) магазина «Дикси»;
- Сайт и мобильные приложения (iOS, Android) магазина «Лента»;
- Сайт и мобильные приложения (iOS, Android) магазина «Магнит»;
- Сайт и мобильные приложения (iOS, Android) магазина «Перекрёсток»;
Какие разделы и пользовательские сценарии были проверены:
- Общая структура сайта, загруженность главной страницы, доступность в целом;
- Вход, регистрация и восстановление пароля;
- Фильтрация продуктов, доступность каталога;
- Доступность и информативность страницы с товаром и его характеристик;
- Доступность модуля отзывов к каждому товару;
- Взаимодействие с корзиной, оформление заказа, наличие поля для комментария;
- Доступность контактной информации.
Общие выводы о доступности сайтов и приложений магазинов
В этом блоке представлены только платформы, получившие высокую оценку доступности.
1 платформа = 1 медаль в соответствии со следующей системой оценок.
(полная информация обо всех протестированных платформах и брендах размещена в отчётах ниже)
1 платформа = 1 медаль в соответствии со следующей системой оценок.
(полная информация обо всех протестированных платформах и брендах размещена в отчётах ниже)
Золотую «медаль»
мы присудили платформам, получившим все оценки 4 и выше.
Cеребряную «медаль»
мы присудили платформам, получившим максимум одну 3.
- «Перекрёсток»Сайт магазина и приложение для iOS
- «Магнит»Приложение магазина для iOS
- «ВкусВилл»Сайт и оба приложения магазина
- «Пятёрочка»Приложение магазина для Android
- «Перекрёсток»Приложение магазина для Android
- «Ашан»Приложение магазина для iOS
Сводная таблица баллов доступности всех исследуемых магазинов
Баллы доступности
- Отличная доступностьПроблем не замечено либо имеется 1–2 незначительных комментария.
- Хорошая доступностьИмеется несколько некритичных, не препятствующих прохождению сценария проблем.
- Удовлетворительная доступность.Количество проблем значительно. Даже, если каждая из них не критична, все вместе они ощутимо ухудшают пользовательский опыт. Либо прохождение сценария требует использования дополнительных возможностей скринридера, в которых неопытные пользователи часто не разбираются.
- Плохая доступностьПрохождения сценария значительно затруднено. Если сценарий и возможно пройти, то только опытными пользователями программ экранного доступа.
- Сценарий по какой-то причине полностью непроходим либо его можно пройти лишь с огромными затруднениями со стороны пользователя (например, при помощи зрячего человека).
- Ресурс либо отсутствует, либо используется только как информационный и не дает полного доступа ко всем возможностям.
Оценка доступности онлайн-ресурсов каждого магазина отдельно
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
3
3
2
Вход, регистрация и восстановление пароля
5
4
4
Фильтрация продуктов, доступность каталога
2
4
3
Доступность и информативность страницы с товаром и его характеристик
4
4
2
Доступность модуля отзывов к каждому товару
N/A
N/A
N/A
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
2
4
3
Доступность контактной информации
5
5
N/A
Общие комментарии:
- На главной странице основные сложности возникают с навигацией (неверно используются заголовки h1-h6: заголовок 1-го уровня следует под заголовками более высоких уровней, над некоторыми важными разделами заголовки отсутствуют).
- Многие ссылки содержат внутри картинку, у которой задан Alt, и помимо этой картинки текст дублируется рядом в <span>, из-за чего скринридер прочитывает текст дважды. Проблема актуальна для превью товаров в каталогах.
- На страницах каталогов используется разметка, препятствующая удобной навигации.
- Над каталогом иногда встраивается крупный блок с хитами продаж, который сложно пропустить средствами скринридера.
- В карточках товаров имеются кнопки без текстовых меток, а также числа без дополнительных пояснений и обозначений, т. е. непонятно, что они обозначают (размер скидки, старую или новую цену, количество товара, иное).
- В некоторых случаях при фильтрации товаров фокус выбрасывает из диалога с фильтрами, что существенно ограничивает доступность ресурса.
- В корзине много кнопок без текстовых меток, большой блок предлагаемых товаров препятствует удобной навигации по странице корзины.
- У приложения есть область прямого касания, которая при попадании на неё ведёт себя непредсказуемо: например, открывает игры, из которых нельзя выйти, не завершив их. Перезагрузка приложения не помогает.
- Кнопки регулировки количества товара в корзине не имеют текстовой метки.
- Изображение товара на его странице является областью прямого касания, что неудобно.
- При попытке выбрать дату и время доставки незрячему трудно увидеть те время и дату, которые он выбрал, так как индикаторов выбора на значениях нет.
- Похожие товары не всегда озвучиваются, что делает сложным их добавление.
- Скринридер на главной странице каждые несколько секунд произносит "Страница 1073741884 из 2147483647", но во-первых, никакого переключения страниц не происходит, а во-вторых, очевидно, что информация о номере страницы и их количестве некорректна.
- У некоторых кнопок текстовое описание, вероятно, представляет собой некие идентификаторы, применяемые в коде приложения, например Back button, Sort button и т.п.
- В превью товара имеются числа, назначение которых непонятно, т.е. текстовая метка оформлена некорректно.
- На главной странице, как и на некоторых других, экран обновляется каждые несколько секунд, затрудняя чтение информации.
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
3
4
3
Вход, регистрация и восстановление пароля
4
5
5
Фильтрация продуктов, доступность каталога
5
4
4
Доступность и информативность страницы с товаром и его характеристик
5
4
4
Доступность модуля отзывов к каждому товару
4
5
3
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
4
4
4
Доступность контактной информации
5
3
4
Общие комментарии:
- После попадания в редактор поиска, при попытке навигации с помощью клавиши Tab скринридер ведёт себя странно. Например, может пропадать ссылка «Корзина». При этом, если используются другие способы навигации, подобных проблем не возникает.
- Если дойти до слова «Каталог» и ссылки, находящийся ниже его на строку и подписанную как «goods utm_source=site&utm_medi…», можно заметить заголовок «Популярные товары». Заголовок этот ведёт себя крайне странно: например, не отображается при попытке навигации по заголовкам, а также время от времени оказывается невидным скринридеру. Каких-либо закономерностей в его поведении выявить не удалось.
- При выборе радиокнопок с оценками товара непонятно, где кнопка отправки оценки, так как она никак не подписана. Этой кнопке необходима текстовая метка.
- Кнопка сканирования QR-кода в каталоге не имеет текстовой метки, так же как и кнопка фильтров поиска.
- В фильтрах поиска у кнопки включения/отключения того или иного фильтра имеется некорректная текстовая метка.
- Кнопка перехода к странице избранных товаров не имеет текстовой метки.
- Четыре кнопки («Добавить в корзину», «Сделать любимым», «Добавить в список», «Наличие в магазинах») сначала представлены изображениями и только потом, пролистав, можно найти их текстовые метки. Рекомендуется удалить.
- В настройках заказа кнопки-переключатели при активации имеют статус выбора, но их on- и off-статус не меняется. Это относится только к ситуации, когда товара нет в наличии. Остальные кнопки-переключатели в том же диалоговом окне работают без нареканий.
- В «часто задаваемых вопросах» невозможно прочесть ответ на вопрос, если зайти на его страницу
- Большинство основных функций приложения так или иначе доступно, однако существует ряд проблем, затрудняющих взаимодействие. Самая критичная из них — накопление множества более не актуальных объектов в представлении доступности. При переходе от одного экрана к другому (например, при просмотре каталога) содержимое предыдущих экранов не заменяется на новое, а остается видимым для скринридеров. В отличие от других приложений, здесь эта проблема проявляется не только при использовании линейной навигации (свайпов), но и в режиме изучения касанием. По этой причине пользователю может быть крайне трудно определить, где он находится, т. к. линейная навигация оказывается полностью бесполезной, а ощупывание экрана создает ложное ощущение наложения нескольких окон друг на друга. Для устранения этой путаницы все объекты, которые более не отображаются на экране, должны своевременно удаляться из представления доступности. Пользователь должен иметь доступ только к объектам активного в текущий момент экрана.
- Просмотр текста отзывов проблем не вызывает, но информация об оценке товара недоступна. Узнать оценку можно только косвенно — с помощью фильтра отзывов. Соответствующую отзыву оценку следует сделать доступной для программ экранного доступа.
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
4
3
1
Вход, регистрация и восстановление пароля
3
4
3
Фильтрация продуктов, доступность каталога
4
4
3
Доступность и информативность страницы с товаром и его характеристик
5
4
4
Доступность модуля отзывов к каждому товару
3
1
2
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
1
4
2
Доступность контактной информации
5
3
2
Общие комментарии:
В списке товаров после перехода в какую-либо категорию имеется 2 редактора фильтрации. Например, пользователь переходит в категорию «Стирка и уход за бельем». Редакторы фильтра цен подписаны как 26.49, и 749.9. Эти числа сбивают с толку, непонятно, что в эти редакторы вводить — то ли интервал цен, то ли что-то ещё.
- На главной странице много непонятных изображений между заголовками по типу «Товары дня», «Скидки по карте» и т. п.
- На странице входа чекбоксы озвучиваются как недоступные, хотя они доступны. Кнопка добавления товара в «Избранное» подписана некорректно (озвучивается как изображение).
- При добавлении, или удалении из «Избранного», устройство вибрирует, но статус действия не озвучивается. Кнопка также не меняет свой статус, независимо от того, находится ли товар в «Избранном» или нет. Нужно задать роль кнопки и менять текстовую метку при нажатии («Добавить в "Избранное"»/«Удалить из "Избранного"»).
- При попытке оставить отзыв недоступно практически всё, кроме вопроса «Как тебе товар», рейтинга и пользовательских отзывов (только текст).
- В «Корзине», кнопка «Удалить» то появляется рядом с товаром, то исчезает. Вычислить алгоритм её работы не удалось.
- После кнопки «Чат» находятся 11 неподписанных кнопок. Мало у кого из пользователей хватит терпения нажимать на каждую и проверять, за что каждая из них отвечает. Эти кнопки следует подписать.
- В окне входа, левее редактора номера телефона, есть неподписанная кнопка, ведущая на главную страницу приложения. При вводе своего имени непонятно, сохраняется ли результат после нажатия кнопки «Сохранить», т.к. редактор ввода никуда не пропадает и нужно также нажимать неподписанную кнопку, которая ведет уже к возрасту.
- Подписи с согласием на обработку персональных данных и с согласием на получении рекламы также лучше перенести на соответствующие флажки, поскольку сейчас эти подписи находятся рядом с ними.
- В окне чата поддержки все кнопки, кроме редактора для ввода сообщения, не подписаны. Это создаёт серьёзные затруднения, особенно в таком важном окне, как связь с поддержкой.
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
3
2
3
Вход, регистрация и восстановление пароля
3
2
4
Фильтрация продуктов, доступность каталога
3
4
3
Доступность и информативность страницы с товаром и его характеристик
3
3
4
Доступность модуля отзывов к каждому товару
2
3
4
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
4
3
3
Доступность контактной информации
5
1
5
Общие комментарии:
- На ссылках «Избранного» и корзины отображаются только счётчики, но нет обозначения, что это именно. Нужно задать этим элементам корректную текстовую метку.
- Ссылки на социальные сети не имеют корректной текстовой метки.
- Модальные окна на сайте реализованы не очень удачно. У окна нет обозначения диалога, кнопка «Закрыть» не имеет текстовой метки, фокус не устанавливается автоматически на содержание модального окна.
- При авторизации флаг страны сейчас показывается SVG элементом. Ему нужно задать соответствующую текстовую метку.
- Цены в каталоге пишутся слитно, например, вместо 7,99 указано 799 рублей, что вводит пользователя в заблуждение. Необходимо поставить разделитель.
- Вкладки «Характеристики», «Описание», «Отзыв» отображаются для скринридера обычным текстом. Рекомендуем данным элементам назначить роль ссылок или сделать настоящие вкладки.
- Доступность отзывов низкая. Непонятно, какую оценку оставил человек, поскольку кнопка ответа не имеет текстовой метки. Также имеется много кликабельных элементов с неизвестным назначением.
- На странице входа при выборе адреса доставки и магазина имеется много неподписанных кнопок, значение которых не удаётся определить.
- При попытке удалить учётную запись нет возможности выйти из диалогового окна подтверждения. При добавлении электронной почты перед текстовым полем есть кнопка «Отправить», а после — кнопка «Далее». Это путает пользователя, так как использовать необходимо первую кнопку, вторая же будет недоступна, если ввести почту полностью.
- Кнопка добавления товара в «Избранное» не подписана. Кнопка добавления в корзину имеет перед собой графический неподписанный элемент. Кнопки «Плюс» и «Минус» также не подписаны.
- Кнопка перехода к отзывам со страницы товара, а также, предположительно, кнопки «Нравится» и «Не нравится» под отзывами не подписаны.
- Также перед именем покупателя есть кнопка жалобы на отзыв. Ей не задана текстовая метка, а также непонятно, к какому отзыву она относится, — к тому, что после или перед ней.
- Перед панелью главных вкладок есть строка с текущей ценой корзины и товаром в ней. Кнопки добавления и удаления товара также не подписаны на строке, а общая цена не разделена запятой. Так, 2 кг сахара по 120.49 стоят, по словам скринридера, не 240.98, а 24 098 руб.
- С избранным невозможно работать. Жесты инструкций не работают с включённым Voiceover, все кнопки не подписаны, за исключением кнопок «Поделиться» и «Очистить список».
- Иконка удаления товара из корзины подписана некорректно. Кнопки «Плюс» и «Минус» также не подписаны.
- Внизу страницы профиля не подписаны кнопки социальных сетей компании.
- При переходе к поддержке, нет возможности выбрать какую-либо из предложенных социальных сетей и нет возможности перейти назад.
- Карусель на главном экране недоступна: не отображается текст, есть кнопка «Подробнее» и кнопка «Закрыть», у которых отсутствуют текстовые метки.
- Кнопки добавления в «Избранное», в корзину, увеличения и уменьшения количества добавляемого в корзину товара не имеют текстовых меток. Также кнопки добавления товара в «Корзину» и увеличения количества не имеют роли кнопки.
- У полей ввода должны быть сопроводительные текстовые метки. Сейчас их нет, например, у полей ввода при вводе личной информации.
- Ни одна из кнопок не имеет текстовой метки в корзине — будь это регулировка количества товара, удаление из корзины, добавление или удаление из «Избранного».
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
2
4
4
Вход, регистрация и восстановление пароля
1
5
4
Фильтрация продуктов, доступность каталога
2
4
3
Доступность и информативность страницы с товаром и его характеристик
3
5
4
Доступность модуля отзывов к каждому товару
N/A
5
4
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
3
5
3
Доступность контактной информации
5
5
N/A
Общие комментарии:
- На сайте не задействованы семантические теги <header> и <footer>, что затрудняет навигацию между шапкой, основным содержимым и подвалом.
- Тег <main> используется неверно, просто оборачивая всю страницу (должен только основное содержимое).
- Многие ссылки с картинками имеют дублированный текст (вероятно, из-за наличия Alt у картинки и текста внутри ссылки).
- Некоторые ссылки не имеют текстовых меток (ссылки на соцсети и приложения, ссылки между разделами на главной странице).
- При регистрации невозможно выбрать дату рождения с помощью стандартных средств скринридера. Открыть селектор даты рождения удалось только при эмуляции левого клика мыши, некоторые элементы в селекторе также активируются только при клике по ним. Пользователь, не обладающий продвинутыми навыками использования скринридера, не сможет зарегистрироваться.
- Элементы для настройки фильтров по поведению похожи на флажки, но информация об их состоянии (отмечен/не отмечен) недоступна для скринридера, что не позволяет полноценно использовать фильтры.
- Кнопка добавления товара в корзину не изменяется для скринридера после нажатия ни в превью, ни на странице товара, т. е. нельзя понять, добавлен ли товар в корзину.
- В «Любимых категориях», если зайти в уже выбранную ранее категорию, вернуться назад незрячему человеку невозможно. Зигзагообразный жест доступности здесь не работает, доступной кнопки «Назад» тоже нет.
- На главной странице есть кнопки перед заголовками почти каждой категории («Розыгрыши», «Товары недели» и т. д.). Они позволяют открыть ту или иную категорию, но подписаны некорректно.
- Кнопка очистки поля поиска, кнопки «Поиск» и «Меню» на странице главных категорий — подписаны по-английски, что может быть недоступно пользователю для понимания.
- Приложение доступно на практически хорошем уровне. Основной проблемой являются многочисленные кнопки, не имеющие текстовых меток, либо же некорректные текстовые метки на кнопках.
- Превью товара для скринридера представлено в неудобном виде: сначала следует информация о скидке и цене, название же прочитывается в последнюю очередь, что увеличивает время поиска нужного товара.
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
4
4
3
Вход, регистрация и восстановление пароля
5
4
5
Фильтрация продуктов, доступность каталога
4
4
5
Доступность и информативность страницы с товаром и его характеристик
4
5
4
Доступность модуля отзывов к каждому товару
5
4
4
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
5
4
4
Доступность контактной информации
5
5
5
Общие комментарии:
Web-версия доступна на очень хорошем уровне. Необходимо устранить лишь небольшие недочеты, создающие незначительные затруднения для незрячего пользователя.
- Кнопки «Поиск» и «Чат», «Плюс» и «Минус», а также кнопки редактирования данных профиля, добавления электронной почты и товара в корзину не имеют текстовых меток.
- Аналогично не имеют текстовых меток кнопки рядом с отзывами, поэтому непонятно, за что именно они отвечают.
- На главном экране имеется 11 неподписанных кнопок. Назначение большинства из них можно определить методом перебора, но эту проблему следует исправить.
- В окне «О товаре» заголовок «Похожие товары» расположен неудобно с точки зрения навигации. Рекомендуем разместить его после описания товара.
- Также не подписаны кнопки «В корзину» и «Удалить из корзины».
Сценарий
Сайт
iOS
Android
Общая структура сайта, загруженность главной страницы, доступность в целом
3
2
4
Вход, регистрация и восстановление пароля
3
4
5
Фильтрация продуктов, доступность каталога
N/A
1
3
Доступность и информативность страницы с товаром и его характеристик
5
4
4
Доступность модуля отзывов к каждому товару
N/A
N/A
1
Взаимодействие с корзиной, оформление заказа, наличие поля для комментария
N/A
4
5
Доступность контактной информации
3
4
5
Общие комментарии:
Web-версия в целом доступна на хорошем уровне. Основная проблема — неподписанные или некорректно подписанные элементы в разных разделах сайта. Среди них, например, ссылки на группы в социальных сетях.
- На главной странице представлено множество элементов по типу «Акции недели», «Низкие цены» (список заканчивается элементом «Мы в Telegram»). Затем идут несколько кликабельных ссылок и далее вновь подобные элементы. К сожалению, если на них нажать, то появляется что-то графическое и почти не распознаваемое. Также эти элементы не имеют индикаторов ссылок или кнопок.
- В разделе «Доставка» очень много непонятных кнопок, похоже, связанных со взаимодействием с картой. Рекомендуется добавить возможность поиска магазинов и их просмотра, не связанную с картой.
- Активация поиска, переход по категориям товаров и к самим товарам невозможны без выключения Voiceover. Незрячий человек не сможет нормально перемещаться по каталогу без помощи зрячего.
- Иногда при входе в «Каталог» или при выборе в нём категории мешает окно с просьбой оформить пластиковую карту X5. Пользователю приходится пальцем искать правый нижний угол со вкладками и вновь свайпать вправо, чтобы попасть в выбранную категорию.
- Кнопки добавления в корзину не подписаны: как сама кнопка «Добавить в корзину», так и кнопки, отвечающие за добавление или убавление уже имеющегося в ней товара.
- В ценах отсутствует корректное разделение рублей и копеек, из-за чего пользователи программ экранного доступа могут быть введены в заблуждение.
- Нет возможности поставить оценку товару с помощью программы экранного доступа.
Еще сферы
Протестированы сайты и приложения 7 банков: «Альфа-Банка», ВТБ, ПСБ, Росбанка, Сбербанка, «Совкомбанка», Банка «Тинькофф». Почти все представленные банки имеют доступность выше среднего.
Мы оценили онлайн-доступность 5 известных площадок: Lamoda, OZON, «Wildberries», «Яндекс Маркет», «Мегамаркет». Каждая из них показала в целом хорошую доступность для незрячих пользователей.
Протестированы на доступность для людей с нарушением зрения 5 самых популярных образовательных платформ: GeekBrains, Skillbox, Stepik, «Открытое образование», «Яндекс.Практикум». Почти все из них показали среднюю доступность сайтов.
Если вы хотите улучшить сервис или у вас есть вопросы по исследованию:
Группа экспертной оценки: Евгений Сличный, Александр Пашкевич, Андрей Якубой, Данил Пылаев, Николай Соловьёв, Александр Калачинский, Михаил Солдатов, Валерия Афанасьева, Бека Гозалишвили, Алексей Самойлов, Василий Дрожжин, Владислав Копылов, Владислав Мурды-Худа
Контент: Айслу Асан, Светлана Сидорова, Анна Емельянова, Елена Шаламова
Инфографика и верстка: Роман Акинин, Елена Литвинова, Артем Волыгин, Элина Яценко, Александра Адельшина, Мария Гудова, Юлия Мамцева
Графика и монтаж видео: Роман Акинин, Евгений Мамонов, Андрей Рудь
Закадровый текст: Никита Чесноков
Команда проекта