Как адаптировать сайт для людей с нарушением зрения и незрячих

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

Фото: Tutatamafilm/shutterstock

Российский рынок eGrocery растет с каждым годом. По данным агентства Data Insight, за девять месяцев 2023 года он увеличился в 1,4 раза в денежном выражении и по итогам 2023 года составил около 600 млн заказов и почти 750 млрд рублей.

Удобство покупки продуктов питания через интернет особенно ценят люди с инвалидностью – не нужно идти в магазин, не всегда адаптированный для людей с разными видами ограничений здоровья; не нужно просить о помощи сотрудников магазина или кого-то из родственников; есть возможность неспеша ознакомиться с описаниями товаров и предложениями магазинов.

Согласно результатам опроса, 63% людей с ограничениями здоровья самостоятельно покупают продукты и бытовую химию через сайт и мобильное приложение ритейлеров, при этом 75% тратят на эти категории товаров от 11 до 40 тысяч ежемесячно. 42% респондентов отметили, что при выборе магазина ориентируются в том числе на доступность его приложения.

Доступность сайтов и приложений для незрячих людей совсем другого рода – она реализуется на уровне кода и обеспечивается программистами – это так называемая невизуальная доступность. Она означает, что ресурсы адаптированы для работы со скринридерами – программами экранного доступа, которые озвучивают контент на экране. Кроме того, это значит, что есть возможность управлять ресурсом только с помощью клавиатуры (без мыши) – именно так незрячие люди в основном пользуются скринридером. Поэтому, когда говорят об адаптированности сайтов для незрячих пользователей, также упоминают пользователей с нарушениями моторики – они тоже работают с компьютером без мыши.

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

А еще такой доступный сайт будет лучше продвигаться поисковыми системами. «Улучшая доступность сайта для незрячих пользователей, компании автоматически улучшают его SEO-характеристики, – комментирует Александр Пашкевич, тимлид невизуальной доступности в Everland. – Например, корректный текст гиперссылки, из которого понятно, куда она ведет, очень важен для незрячего человека. Фраза «Нажмите здесь» не очень информативна для тех, кто использует скринридер и не видит контекста. Поисковой системе корректный текст помогает понять релевантность страницы, на которую ссылается гиперссылка и соответствующим образом индексировать и ранжировать ее».  

Насколько онлайн-сервисы в ритейле адаптированы для незрячих пользователей?

В конце 2023 года инклюзивный проект Everland провел исследование и проверил доступность 90 платформ 36 брендов из 6 сфер: банки, путешествия, телеком, образовательные платформы, ритейл и маркетплейсы. Оценку проводили незрячие тестировщики, которые прошли специальное обучение на платформе проекта, ежедневно пользуются скринридерами и на собственном опыте знают, что такое недоступный сайт.

Площадки были выбраны на основе опроса незрячих участников сообщества Everland как самые популярные и часто используемые.

В самом начале тестирования были определены пользовательские сценарии для оценки, то есть те функции, которые важны для незрячего человека, который решит воспользоваться сервисом:

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

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

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

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

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

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

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

Проверка доступности проводилась по каждому из критериев и оценивалась по 5-балльной шкале.

5 – Отличная доступность. Проблем не замечено либо имеется 1–2 незначительных комментария.

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

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

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

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

По итогам оценки для каждой платформы каждого бренда (сайт, приложение на iOS и Android) был выведен средний бал. Отличную оценку доступности получили платформы, у которых по всем показателям было не менее 4 баллов, хорошую – те, у которых только 1 показатель имел оценку 3.

Доступность маркетплейсов и их приложений

Что касается маркетплейсов, то их показатели доступности оказались одними из самых высоких среди шести проверенных сфер. Среди лидеров в категории – сайт и приложение для iOS Wildberries, сайт «МегаМаркет», сайт «Яндекс Маркет», сайт и приложение для Android CDEK.Shopping.

Пример сайта, доступного для незрячих пользователей. Сайт Wildberries.ru

Но есть ряд проблем, которые все еще мешают комфортному использованию маркетплейсов незрячими людьми:

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

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

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

• Некорректное использование заголовков на странице – общая проблема для веб-сайтов маркетплейсов и интернет-магазинов ритейлеров. Когда заголовки в HTML-верстке сайта расставлены неверно, незрячий человек не может, например, понять, где основная страница, а где подраздел, не ориентируется в меню сайта.

Примеры ошибок невизуальной доступности маркетплейсов.

Доступность онлайн-магазинов ритейлеров и их приложений

Онлайн-платформы сферы «ритейл» показали доступность выше среднего, у некоторых онлайн-магазинов отмечены серьезные недоработки, связанные с доступностью, в мобильных приложениях на Android. Лидеры категории – сайт магазина и приложения для iOS и Android «Перекрёстка», приложение для iOS «Магнита», сайт и оба приложения «ВкусВилла», приложение для Android «Пятёрочки», приложение для iOS «Ашана».

Пример приложения, доступного для незрячих пользователей. Приложение для iOS «Перекрёстка»

Проблемы с невизуальной доступностью платформ в сфере «ритейл» в основном касаются сайтов онлайн-магазинов и, как отмечалось выше, их приложений на базе Android. Наиболее распространенные ошибки:

• Как и в случае с маркетплейсами, у мобильных приложений и веб-сайтов онлайн-магазинов часто не подписаны элементы страницы (кнопки, ссылки и так далее). Это может быть серьезным препятствием для использования сайта незрячим человеком, особенно если элементы выполняют важные функции, например, «Добавить в корзину», «Добавить в избранное».

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

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

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

Примеры ошибок невизуальной доступности онлайн-платформ ритейлеров.

Александр Пашкевич, тимлид направления невизуальной доступности, Everland: «В целом ситуация с доступностью онлайн-ресурсов в рунете, в том числе ритейлеров и маркетплейсов, начинает постепенно улучшаться, однако даже на площадках с хорошей доступностью можно встретить труднопроходимые для незрячих людей сценарии. Есть платформы, которые по-прежнему плохо адаптированы для пользователей с нарушениями зрения, а значит, недоступны для них как покупателей. А между тем адаптация онлайн-сервисов не требует больших затрат, достаточно следовать разработанным стандартам и рекомендациям».

Как сделать сайт доступным для незрячих пользователей?

На что ориентироваться?

Основным документом по цифровой доступности является WCAG, (Web content accessibility guideline). Это руководство, которое определяет стандарты доступности для пользователей с разными формами инвалидности. Документ разработан подразделением WAI (Web Accessibility Initiative) Консорциума Всемирной паутины. WAR-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) дополняет основной гайд и описывает техническую часть адаптации ресурса именно для незрячих пользователей. В России действует ГОСТ Р 52872-2019, который определяет требования к цифровой доступности. Кроме того, можно обратиться к руководствам, выпущенным Сбером и МТС.

Диагностика

Проводить оценку невизуальной доступности необходимо с учетом многообразия устройств, операционных систем и скринридеров. Для программ экранного доступа это NVDA и JAWS для Windows, VoiceOver для iOS и MacOS, TalkBack для Android. Также лучше использовать интернет-обозреватели, доступность которых декларирована разработчиками: Internet Explorer, Mozilla Firefox, Safari, Google Chrome и др.

Что учесть?

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

Используйте семантические теги и ориентиры

У каждого смыслового блока на странице должен быть ориентир. Например, role=«header» для шапки, role=«nav» для основного меню навигации, role=«main» для основной области страницы, role=«aside» для дополнительного контента и т.д. Это помогает незрячему пользователю ориентироваться на странице и облегчает навигацию.

Добавляйте подписи к элементам страницы

Только так незрячий пользователь поймет, какая функция у кнопки или ссылки и в какой раздел они его приведут. Напротив – визуальные элементы, которые не несут смысловой нагрузки и не подкрепляются текстом, необходимо «спрятать» от скринридера с помощью атрибута «aria-hidden».

Соблюдайте иерархию заголовков

Незрячий человек не может видеть выделение заголовка шрифтом, цветом и т.д. Скринридер подсказывает ему, есть ли на странице заголовки и какого они уровня. Поэтому если в разметке заголовки не расставлены по порядку от h1 к h6 или вообще не прописаны, то текст на странице выглядит единым полотном, в котором сложно ориентироваться.

Сопровождайте иллюстрации alt-текстами

Короткие alt-тексты к изображениям, которые зачитывает скринридер, помогают понять, что на них изображено, и таким образом передать информацию пользователю.

Добавляйте подсказки к формам заполнения 

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

Предусмотрите альтернативные варианты защиты от роботов

В формах не должна использоваться «капча» с просьбой ввести код с картинки или перенести графические элементы при помощи мыши без альтернативных методов прохождения, например, аудиоварианта.

Обеспечьте возможность перемещения между интерактивными элементами несколькими способами: с помощью клавиши Tab, с использованием средств скринридера или клавиш со стрелками.

Retail.ru