Анализ доступности интернет-магазина Wildberries

Часть 1 из 3. Шапка страницы

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

Клавиатура

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

Skip link

На сайте отсутствует ссылка "перейти к содержанию" (skip link), которая является важным элементом для удобства пользователей, особенно тех, кто перемещается по страницам с помощью клавиатуры. В настоящий момент навигация затруднена, особенно из-за объемной шапки Wildberries.

Добавление данной ссылки значительно улучшит пользовательский опыт, позволяя избежать многократного прохода через одни и те же интерактивные элементы. Skip link должен быть первым интерактивным элементом на странице и появляться при фокусировке. Он также может размещаться не только в шапке, но и в других удобных местах.

Имейте в виду, что сама ссылка skip link может отсутствовать в шапке или других частях страницы в случае, если количество интерактивных элементов невелико.

Фокус

На сайте обнаружена серьёзная ошибка: отсутствует стилизация :focus для интерактивных элементов. Это затрудняет навигацию пользователя и может создавать путаницу. Рекомендуется добавить соответствующие стили для :focus, такие как border, box-shadow или background, чтобы обеспечить пользователю понимание своего местоположения на странице.

Тем не менее, если вас смущает использование псевдокласса :focus, можно обратить внимание на :focus-visible. Он позволяет точно определить, что состояние элемента изменится только тогда, когда пользователь перейдёт на интерактивный элемент с помощью клавиатуры. Следует отметить, что :focus-visible хорошо поддерживается браузерными движками.

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

Некорректный HTML

В шапке проблема с интерактивностью элементов обусловлена ещё и некорректным HTML-кодом. На приведенном скриншоте видно, что изменить город доставки через клавиатуру невозможно из-за использования тега span. Этот тег не позволяет доступа к элементу с клавиатуры.

При верстке следует учитывать доступность элементов для интерактивного взаимодействия. Стандартные HTML-элементы, такие как button, a (с атрибутом href), input и другие, по умолчанию являются интерактивными. В случае необходимости можно использовать атрибуты tabindex и различные атрибуты WAI-ARIA для обеспечения корректной работы элементов.

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

Порядок интерактивных элементов

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

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

В редких случаях, если нельзя изменить порядок, можно воспользоваться свойством order в flexbox/grid или, в более критических ситуациях, менять местами DOM-узлы в разных breakpoint'ах с помощью JS.

Тем не менее, я рекомендую использовать правильный порядок интерактивных элементов уже на этапе разработки дизайна. На скриншоте смены города на мобильном устройстве видно, что теперь он сделан кнопкой (интерактивный элемент, на который можно попасть с клавиатуры, если фокус есть), однако его порядок в DOM-узле изменился, поскольку в Wildberries рендерятся разные HTML в разных breakpoint'ах.

Умный фокус

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

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

Клавиатурные сокращения

Для улучшения веб-доступности на сайте предлагается добавить функционал клавиатурных сокращений, позволяющих пользователям управлять сайтом без использования мыши. Например, при нажатии определённой клавиши, например "/", пользователь сможет сразу перейти к функции поиска сайта и начать поиск нужных товаров.

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

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

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

WAI-ARIA

Одним из правил WAI-ARIA является избегание его использования. Согласно статистике, пользователи часто допускают ошибки при его применении. Поэтому, если это возможно, рекомендуется достигать всех необходимых ролей и аспектов с помощью кастомного HTML.

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

Некоторые компоненты в шапке реализованы неправильно с точки зрения WAI-ARIA.

Также важно помнить о необходимости изменения атрибута aria-label в определённых ситуациях, например, когда интерактивное меню открывается или закрывается. Например, боковое меню имеет aria-label "Навигация по сайту", но при открытии меню этот текст остаётся неизменным.

Часть 2 из 3. Оформление товара на заказ

Иерархия заголовков

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

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

Проверить соответствие иерархии заголовков можно с помощью различных инструментов, таких как плагины для браузера, а также с помощью специализированных сервисов и screen reader. Эти инструменты позволяют анализировать структуру страницы и выявлять любые нарушения в порядке расположения заголовков.

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

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

Ориентиры

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

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

На скриншоте видно, что карточка товара создана с использованием тега article, что является правильным подходом. Однако, при анализе структуры a11y tree (доступной в Chrome), мы видим большое количество ориентиров типа article. Это может привести к затруднениям для пользователя, пытающегося понять содержание каждой карточки.

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

Как видно на скриншоте, в a11y tree уже есть описание к ориентиру, что предоставляет больше информации для пользователей, использующих screen reader.

Фокус на карточку

Важно настроить карточку товара таким образом, чтобы элементы, появляющиеся при наведении (:hover), также отображались при фокусировке элемента. Главное, чтобы порядок элементов внутри карточки был корректным.

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

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

WAI-ARIA карточки

На карточке товара также имеются проблемы, связанные с WAI-ARIA. Многие детали понятны только благодаря визуальному представлению, однако пользователи, пользующиеся screen reader'ом, могут испытывать затруднения в интерпретации этой информации.

Например, на скриншоте видно число "4.7", которое представляет рейтинг товара. Однако для пользователей, ориентирующихся на звуковую информацию, это число может быть непонятным. В таких случаях необходимо дополнить информацию о товаре с помощью атрибута aria-label или утилитарного класса .visually-hidden, чтобы предоставить дополнительный контекст. Например: aria-label="Рейтинг товара 4.7". Это позволит пользователям получить больше информации о контенте, особенно если они не могут видеть визуальное представление.

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

Модальное окно

Помимо основных проблем с доступностью на карточке товара, существуют также проблемы с модальным окном, которое появляется при быстром просмотре товара. Важно исправить следующие недочёты:

1. На изображениях в модальном окне отсутствует атрибут alt или он некорректен. Это несоответствие стандартам доступности и затрудняет восприятие содержимого для пользователей, которые не могут видеть изображения.
2. Нарушен порядок фокусировки и существуют проблемы с клавиатурной навигацией. Необходимо настроить так, чтобы фокус оставался внутри модального окна, пока пользователь не закроет его или не переместится на другой элемент. Это обеспечит более удобное взаимодействие с клавиатурой для пользователей, использующих ассистивные технологии.
3. Также существуют проблемы с WAI-ARIA: у кнопки закрытия модального окна отсутствует атрибут aria-label, а некоторые элементы не имеют правильных подписей, что приводит к тому, что screen reader не может корректно озвучить информацию. Добавление соответствующих атрибутов и подписей улучшит доступность модального окна для всех пользователей.
4. Некоторые элементы модального окна имеют некорректный HTML: например, кнопка закрытия является ссылкой. Рекомендуется использовать соответствующие элементы HTML для задачи (например, кнопка с атрибутом type="button" для закрытия модального окна).

Исправление этих проблем поможет сделать модальное окно более доступным для всех пользователей и повысит общую удобство его использования.

Заказ товара (aria-live)

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

Для улучшения доступности, когда мы динамически обновляем контент или предоставляем уведомления, необходимо использовать атрибуты aria-live. Эти атрибуты сообщают ассистивным технологиям, что содержимое элемента может изменяться и должно быть озвучено пользователям.

Карточка товара

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

1. Нарушение иерархии заголовков: Иерархия заголовков на карточке товара не соблюдается, что затрудняет понимание её структуры.
2. Проблемы с ориентирами: Ориентиры на карточке товара отсутствуют или недостаточно явны, что затрудняет навигацию пользователя по контенту.
3. Проблемы для пользователей с клавиатурой: Карточка товара не предоставляет должной поддержки для пользователей, использующих клавиатуру для навигации. Отсутствует инерция фокуса, некоторые элементы не доступны для фокусировки, что затрудняет использование сайта с клавиатуры.
4. Недостаточное использование WAI-ARIA: Многие элементы на карточке товара не имеют соответствующих атрибутов WAI-ARIA, что мешает пользователям с ограниченными возможностями получать информацию о контенте.
5. Некорректный HTML: Использование неправильных тегов в HTML нарушает ожидания пользователя и может вызывать функциональные проблемы, особенно для пользователей с ассистивными технологиями.
6. Отсутствие атрибута alt или его некорректное использование: Множество изображений на карточке товара либо не имеют атрибута alt, либо содержат неправильное описание, что мешает пользователям получать информацию о них.
7. Отсутствие настройки aria-live атрибутов: При добавлении товара в корзину не предусмотрены атрибуты aria-live, что делает уведомления о добавлении товара недоступными для пользователей с screen reader'ами.

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

Часть 3 из 3. Оплата заказа и авторизация/регистрация

Корзина

Ошибки на всех страницах часто дублируются. Что не так с страницей корзины?

1. Ошибки с WAI-ARIA. Многие интерактивные элементы либо не имеют подписи для screen reader'ов, либо текст некорректен.
2. Атрибуты aria-live. Они относятся к WAI-ARIA, но я выделяю их в отдельный пункт, потому что когда я изменяю количество или удаляю товар, screen reader не сообщает об этом пользователю. Необходимо сделать так, чтобы такие интерактивные действия были доступны для screen reader'ов.
3. Многие элементы показываются только при наведении мыши, но не при фокусе. Например, кнопки удаления товара или добавления товара в избранное.
4. Некорректный HTML. Интерактивные элементы не интерактивны, и есть другие проблемы. Например, в корзине есть текст "Выбрать адрес доставки", который реализован с использованием элемента div. Это означает, что к нему нельзя получить доступ с клавиатуры, у него отсутствует роль в a11y tree, так как он generic, и есть проблемы с JavaScript и так далее. Поэтому важно изначально выбирать правильные элементы HTML.

Войти или создать профиль

Есть несколько ошибок на данной странице:

1. Отсутствие фокуса. Невозможно определить, на каком элементе я нахожусь с помощью клавиатуры.
2. Сам dropdown слева не работает с клавиатуры, так как создан с использованием элемента div. Необходимо сделать так, чтобы при первом фокусе на самой странице я попадал на dropdown с номерами телефонов. Затем, когда я просматриваю все страны, я должен перейти к самому полю ввода, а затем к кнопке "Получить код".
3. Аналогичные проблемы с aria-live. Все состояния ошибок должны быть доступны для screen reader'ов. В данный момент, когда я ввожу некорректный номер, нижнее сообщение об ошибке появляется, но screen reader ничего не сообщает о данной ошибке. Кроме того, механизм отображения ошибки неправильный, так как ошибка появляется в потоке документа ниже поля ввода и изменяет высоту формы, что приводит к мелким скачкам страницы. Необходимо разместить сообщение об ошибке в правильном положении и добавить нижний отступ, чтобы высота страницы оставалась неизменной.
4. Проблема с иерархией заголовков, так как отсутствует тег h1.

SMS

Есть некоторые проблемы на данной странице:

1. Проблема с иерархией заголовков. Некоторые заголовки, относящиеся к странице авторизации, остаются видимыми, когда пользователь пытается получить код.
2. Проблема с aria-live. Например, если код введён неправильно или истёк таймер, screen reader не сообщает об этом. Это является проблемой доступности.

Оплата

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

Оформление

Когда заказ оформлен и необходимо оплатить его, возникают следующие проблемы:

1. Проблема с иерархией заголовков.
2. Некоторые тултипы не соответствуют стандартам WCAG.
3. Некорректное использование атрибута alt или его отсутствие.
4. Проблемы с клавиатурой и фокусом.
5. Ошибки в HTML, так как интерактивные элементы не настроены как интерактивные.