Исследование невизуальной доступности онлайн-сервисов
сферы «Магазины электроники»

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

  • Сайт и мобильное приложение (Android) сервиса «МВидео»;

  • Сайт сервиса «Плеер.ру»;

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

  • Сайт и мобильные приложения (iOS, Android) сервиса «Технопарк».
    Какие разделы и пользовательские сценарии были проверены:
    1. Общая структура, доступность в целом;
    2. Вход, регистрация и восстановление пароля;
    3. Фильтрация продуктов, доступность каталога;
    4. Доступность и информативность страницы с товаром и его характеристик;
    5. Доступность модуля отзывов к каждому товару;
    6. Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария;
    7. Доступность контактной информации.
    Общие выводы о доступности сайтов и приложений в сфере «Магазины электроники»
    В этом блоке представлены только платформы, получившие высокую оценку доступности.
    1 платформа = 1 медаль в соответствии со следующей системой оценок.
    (полная информация обо всех протестированных платформах и брендах размещена в отчётах ниже)

    Золотую «медаль»
    мы присудили платформам, получившим все оценки 4 и выше.
    Cеребряную «медаль»
    мы присудили платформам, получившим максимум одну 3.
    • «Ситилинк»
      мобильные приложения iOS и Android сервиса «Ситилинк»

    Общие выводы

    Уровень доступности пяти протестированных онлайн-сервисов «Магазины электроники» можно оценить как средний. Все онлайн-сервисы, кроме сайта «ДНС», обеспечили отличную доступность контактной информации. Высокие оценки получили мобильные приложения «ДНС» для Android, «Ситилинк» для iOS и Android, а также сайт «Технопарк» и его мобильное приложение для Android за регистрацию, вход и изменение пароля.
    Наиболее адаптированными для незрячих пользователей стали мобильные приложения сервиса «Ситилинк» для iOS и Android. Они получили высокие оценки за авторизацию и регистрацию, восстановление пароля, информативность и доступность контактной информации. Общая структура и доступность в целом, информативность страницы с товаром, взаимодействие с отзывами и корзиной были оценены на четыре балла. Однако у них есть несколько проблем: размещенные рекламные баннеры не озвучиваются, не всегда понятно, какой фильтр выбран, возникают проблемы с определением цвета товара — они не озвучиваются, не подписаны кнопки добавления и удаления количества кнопок, закрытия окна и баллов в отзывах.
    Самыми недостаточно адаптированными оказались сайты «Плеер.ру», где взаимодействие модуля с отзывами недоступно для людей с нарушениями зрения, и сайт «Ситилинк», где доступность регистрации, входа или изменения на страницу на самом низком уровне.
    Типичные проблемы, с которыми сталкиваются незрячие пользователи при использовании сайтов и мобильных приложений сферы «Магазины электроники»:

    • В форме регистрации нового аккаунта нет аудиоверсии CAPTCHA, поэтому самостоятельно зарегистрироваться невозможно;
    • неподписанные кнопки, элементы, изображения;
    • ссылки, написанные транслитом;
    • модальные окна для скринридеров находятся в нижней части страницы, что неудобно незрячему человеку. Нужно, чтобы курсор экранного доступа автоматически фокусировался на важных элементах сайта;
    • трудности в навигации по заголовкам и ориентирам на стартовой странице;
    • интерактивные элементы не имеют роли кнопки;
    • текстовая индикация к цветам товаров отсутствует;
    • неудобный порядок полей для ввода данных: сначала идёт поле для ввода, а потом его название.
    Сводная таблица баллов доступности всех исследуемых магазинов
    Баллы доступности
    • Отличная доступность
      Проблем не замечено либо имеется 1–2 незначительных комментария.

    • Хорошая доступность
      Имеется несколько некритичных, не препятствующих прохождению сценария проблем.

    • Удовлетворительная доступность.
      Количество проблем значительно. Даже, если каждая из них не критична, все вместе они ощутимо ухудшают пользовательский опыт. Либо прохождение сценария требует использования дополнительных возможностей скринридера, в которых неопытные пользователи часто не разбираются.

    • Плохая доступность
      Прохождения сценария значительно затруднено. Если сценарий и возможно пройти, то только опытными пользователями программ экранного доступа.

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

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

    Оценка доступности каждого онлайн-сервиса «Магазины электроники»

    Сценарий
    Сайт
    iOS
    Android
    Общая структура, доступность в целом
    3
    4
    4
    Вход, регистрация и восстановление пароля
    3
    4
    5
    Фильтрация продуктов, доступность каталога
    3
    3
    4
    Доступность и информативность страницы с товаром и его характеристик
    3
    3
    3
    Доступность модуля отзывов к каждому товару
    4
    2
    3
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    3
    3
    4
    Доступность контактной информации
    5
    4
    3
    Общие комментарии:
    В целом доступность сайта находится на среднем уровне.

    • На главной странице веб-сайта можно выбрать город через модальное окно. Оно расположено для скринридеров в нижней части страницы. Приходится искать. Нужно, чтобы курсор экранного доступа автоматически находил важные элементы на сайте.

    • Подменю «Покупателям» с выпадающим списком открывается по клику. Это может запутать пользователя. Если добавить атрибут «aria-expanded», программа экранного доступа сможет понять, открыт список или закрыт.

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

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

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

    • Модуль отзывов к товару работает хорошо, но есть проблема с сортировкой комментариев. Когда выбираешь критерии отзыва в окне фильтрации, скринридер не видит, что там происходит. Из-за этого сложно сориентироваться.

    • В панели комментария нет подписей у кнопок оценки, поэтому непонятно, сколько баллов было поставлено товару. Это может привести к ошибкам и исказить объективную информацию на сайте.

    • В корзине много кнопок без подписей.

    • На странице оформления заказа присутствуют интерактивные элементы, нажатие на которые не распознаётся скринридером. Это затрудняет выбор магазина, способа оплаты и получения товара.

    Сценарий
    Сайт
    Android
    Общая структура, доступность в целом
    3
    3
    Вход, регистрация и восстановление пароля
    4
    4
    Фильтрация продуктов, доступность каталога
    3
    2
    Доступность и информативность страницы с товаром и его характеристик
    3
    3
    Доступность модуля отзывов к каждому товару
    4
    4
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    4
    4
    Доступность контактной информации
    5
    5
    Общие комментарии:

    В целом доступность сайта находится на среднем уровне.

    • На главной странице трудно ориентироваться. Часть кнопок и картинок не имеют подписей. Некоторые ссылки написаны транслитом. Есть кнопки, нажатие на которые не видно скринридерам, например, «Получи скидку до 30%» или «каталог».

    • В панели авторизации и регистрации кнопка «закрыть окно» не подписана. Названия полей для ввода данных расположены после поля, а не перед ним.

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

    • В каталоге есть неподписанные кнопки и картинки без подписей, а также нет навигации по заголовкам.

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

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

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

    • В панели отправки комментария кнопки выбора оценки не подписаны. Из-за этого нельзя узнать, сколько баллов поставил пользователь. Это может привести к ошибкам, которые исказят информацию на сайте.

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


    Сценарий
    Сайт
    Общая структура, доступность в целом
    3
    Вход, регистрация и восстановление пароля
    3
    Фильтрация продуктов, доступность каталога
    3
    Доступность и информативность страницы с товаром и его характеристик
    3
    Доступность модуля отзывов к каждому товару
    N/A
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    4
    Доступность контактной информации
    5
    Сценарий
    Сайт
    Общая структура, доступность в целом
    3
    Вход, регистрация и восстановление пароля
    3
    Фильтрация продуктов, доступность каталога
    3
    Доступность и информативность страницы с товаром и его характеристик
    3
    Доступность модуля отзывов к каждому товару
    N/A
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    4
    Доступность контактной информации
    5
    Общие комментарии:
    В целом доступность сайта находится на среднем уровне.

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

    • Текст с последними новостями магазина оформлен как заголовок четвёртого уровня, хотя это не нужно.

    • В поле редактирования поиска товаров есть неподписанная кнопка «найти».

    • Форма авторизации или регистрации представлена модальным окном. Скринридеры распознают такие объекты внизу страницы. Нужно, чтобы курсор автоматически фокусировался на одном из элементов в панели. Кнопка закрытия окна не подписана.

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

    • В каталоге товаров часто встречаются изображения без маркировки.

    • В карточке товара на сайте слишком много лишних элементов, нет навигации по заголовкам и ориентирам. Из-за этого трудно перемещать курсор скринридера на нужные объекты интерфейса. Сложно получить важную информацию о продукте.

    • Различные интерактивные элементы не имеют роли кнопки. Вместе с проблемами навигации по странице это делает процесс покупки практически невозможным.
    Сценарий
    Сайт
    iOS
    Android
    Общая структура, доступность в целом
    3
    4
    4
    Вход, регистрация и восстановление пароля
    1
    5
    5
    Фильтрация продуктов, доступность каталога
    4
    3
    3
    Доступность и информативность страницы с товаром и его характеристик
    3
    4
    4
    Доступность модуля отзывов к каждому товару
    3
    4
    4
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    3
    4
    4
    Доступность контактной информации
    4
    5
    5
    Общие комментарии:
    В целом доступность сайта находится на среднем уровне.

    • На главной странице сайта располагается рекламный баннер с индикатором загрузки. Этот индикатор циклично меняет своё значение от 0 до 100%. Но многие скринридеры воспринимают это как звук, связанный с установкой программы, а не с загрузкой страницы. Чтобы пользователи не путались, такой индикатор лучше заменить, например, на полосу прокрутки.

    • Многие функции на сайте представлены в виде модальных окон, например, смена города или авторизация. Скринридеры видят такие окна внизу страницы. Важно, чтобы курсор автоматически фокусировался на элементах внутри окна, чтобы пользователю было удобнее работать.
    • На сайте много неподписанных кнопок и изображений. Нет удобной навигации по заголовкам и другим элементам.

    • В форме регистрации нового аккаунта нет аудиоверсии CAPTCHA, поэтому самостоятельно зарегистрироваться невозможно.

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

    • Кнопка закрытия модального окна не подписана.

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

    • После нажатия на кнопку выбора критерия сортировки комментариев в отзывах скринридеры не получают информацию о выбранном пункте.
    Сценарий
    Сайт
    iOS
    Android
    Общая структура, доступность в целом
    4
    3
    3
    Вход, регистрация и восстановление пароля
    5
    4
    5
    Фильтрация продуктов, доступность каталога
    3
    4
    3
    Доступность и информативность страницы с товаром и его характеристик
    3
    4
    3
    Доступность модуля отзывов к каждому товару
    3
    3
    3
    Взаимодействие с корзиной. Оформление заказа, наличие поля для комментария
    3
    4
    2
    Доступность контактной информации
    5
    4
    5
    Общие комментарии:
    В целом доступность сайта находится на среднем уровне.

    • На главной странице есть неподписанные кнопки и изображения. Чтобы скринридер понимал, что кнопки отвечают за смену языка интерфейса сайта, рекомендуется присвоить им атрибут role="button".

    • Подменю «каталог» и «войти» с выпадающим списком реализовано как кликабельный элемент. Чтобы программа экранного доступа понимала, раскрыт список или свернут, рекомендуется присвоить этому объекту атрибут «aria-expanded». Это упростит пользователям работу с сайтом.

    • На странице отзывов можно ознакомиться с комментариями, но оставить свой отзыв на товар можно только через модальное окно. Скринридеры распознают такие объекты внизу страницы. Важно, чтобы при открытии модального окна курсор автоматически фокусировался на его элементах. Это облегчит пользователям навигацию по сайту. Также рекомендуется присвоить кнопкам для оценивания атрибут role="button", чтобы скринридер понимал, что их можно активировать.

    • В корзине есть интерактивные элементы, например, «trade-in» или дополнительная гарантия. После их активации для программ экранного доступа ничего не меняется. Нужно, чтобы скринридер получал информацию о том, отмечены эти элементы или нет.

    Еще сферы

    Протестированы сайты и приложения 7 банков: «Альфа-Банка», ВТБ, ПСБ, Росбанка, Сбербанка, «Совкомбанка», Банка «Тинькофф». Почти все представленные банки имеют доступность выше среднего.


    Мы оценили онлайн-доступность 5 известных площадок: Lamoda, OZON, «Wildberries», «Яндекс Маркет», «Мегамаркет». Каждая из них показала в целом хорошую доступность для незрячих пользователей.

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