Исследование невизуальной доступности сайтов и мобильных приложений сферы «Ритейл»

август — ноябрь 2023 г.

Детали исследования

Какие сервисы были протестированы:
  • Сайт и мобильные приложения (iOS, Android) магазина «Ашан»;

  • Сайт и мобильные приложения (iOS, Android) магазина «ВкусВилл»;

  • Сайт и мобильные приложения (iOS, Android) магазина «Дикси»;

  • Сайт и мобильные приложения (iOS, Android) магазина «Лента»;

  • Сайт и мобильные приложения (iOS, Android) магазина «Магнит»;

  • Сайт и мобильные приложения (iOS, Android) магазина «Перекрёсток»;

  • Сайт и мобильные приложения (iOS, Android) магазина «Пятёрочка».
Какие разделы и пользовательские сценарии были проверены:
  1. Общая структура сайта, загруженность главной страницы, доступность в целом;

  2. Вход, регистрация и восстановление пароля;

  3. Фильтрация продуктов, доступность каталога;

  4. Доступность и информативность страницы с товаром и его характеристик;

  5. Доступность модуля отзывов к каждому товару;

  6. Взаимодействие с корзиной, оформление заказа, наличие поля для комментария;

  7. Доступность контактной информации.

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

    В этом блоке представлены только платформы, получившие высокую оценку доступности.
    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>, из-за чего скринридер прочитывает текст дважды. Проблема актуальна для превью товаров в каталогах.

    • На страницах каталогов используется разметка, препятствующая удобной навигации.

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

    • В карточках товаров имеются кнопки без текстовых меток, а также числа без дополнительных пояснений и обозначений, т. е. непонятно, что они обозначают (размер скидки, старую или новую цену, количество товара, иное).

    • В некоторых случаях при фильтрации товаров фокус выбрасывает из диалога с фильтрами, что существенно ограничивает доступность ресурса.

    • В корзине много кнопок без текстовых меток, большой блок предлагаемых товаров препятствует удобной навигации по странице корзины.
    Сценарий
    Сайт
    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…», можно заметить заголовок «Популярные товары». Заголовок этот ведёт себя крайне странно: например, не отображается при попытке навигации по заголовкам, а также время от времени оказывается невидным скринридеру. Каких-либо закономерностей в его поведении выявить не удалось.

    • При выборе радиокнопок с оценками товара непонятно, где кнопка отправки оценки, так как она никак не подписана. Этой кнопке необходима текстовая метка.
    Сценарий
    Сайт
    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. Эти числа сбивают с толку, непонятно, что в эти редакторы вводить — то ли интервал цен, то ли что-то ещё.
    Сценарий
    Сайт
    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 рублей, что вводит пользователя в заблуждение. Необходимо поставить разделитель.

    • Вкладки «Характеристики», «Описание», «Отзыв» отображаются для скринридера обычным текстом. Рекомендуем данным элементам назначить роль ссылок или сделать настоящие вкладки.

    • Доступность отзывов низкая. Непонятно, какую оценку оставил человек, поскольку кнопка ответа не имеет текстовой метки. Также имеется много кликабельных элементов с неизвестным назначением.
    Сценарий
    Сайт
    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-версия доступна на очень хорошем уровне. Необходимо устранить лишь небольшие недочеты, создающие незначительные затруднения для незрячего пользователя.
    Сценарий
    Сайт
    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-версия в целом доступна на хорошем уровне. Основная проблема — неподписанные или некорректно подписанные элементы в разных разделах сайта. Среди них, например, ссылки на группы в социальных сетях.

    Еще сферы

    Протестированы сайты и приложения 7 банков: «Альфа-Банка», ВТБ, ПСБ, Росбанка, Сбербанка, «Совкомбанка», Банка «Тинькофф». Почти все представленные банки имеют доступность выше среднего.
    Мы оценили онлайн-доступность 5 известных площадок: Lamoda, OZON, «Wildberries», «Яндекс Маркет», «Мегамаркет». Каждая из них показала в целом хорошую доступность для незрячих пользователей.
    Протестированы на доступность для людей с нарушением зрения 5 самых популярных образовательных платформ: GeekBrains, Skillbox, Stepik, «Открытое образование», «Яндекс.Практикум». Почти все из них показали среднюю доступность сайтов.
    Если вы хотите улучшить сервис или у вас есть вопросы по исследованию:
    Группа экспертной оценки: Евгений Сличный, Александр Пашкевич, Андрей Якубой, Данил Пылаев, Николай Соловьёв, Александр Калачинский, Михаил Солдатов, Валерия Афанасьева, Бека Гозалишвили, Алексей Самойлов, Василий Дрожжин, Владислав Копылов, Владислав Мурды-Худа
    Контент: Айслу Асан, Светлана Сидорова, Анна Емельянова, Елена Шаламова
    Инфографика и верстка: Роман Акинин, Елена Литвинова, Артем Волыгин, Элина Яценко, Александра Адельшина, Мария Гудова, Юлия Мамцева
    Графика и монтаж видео: Роман Акинин, Евгений Мамонов, Андрей Рудь
    Закадровый текст: Никита Чесноков
    Команда проекта