Перейти к содержимому
Pandus

Требование WCAG A/AA Приоритет: Умеренно

У некоторых индикаторов прогресса нет названия

Некоторые элементы, отмеченные как индикатор прогресса, не имеют текста, который говорит, что они показывают, например «добавьте ещё 20 € для бесплатной доставки», шаги оформления заказа или индикатор загрузки.

Этот текст переведён автоматически, носитель языка его ещё не вычитал.

Почему это важно для ваших покупателей

Пользователи скринридеров слышат только «индикатор прогресса, 60%» и не знают, порог ли это бесплатной доставки, шаг оформления или страница, которая ещё загружается. Они могут пропустить предложение или ждать, не понимая чего.

Кого это касается

  • незрячие покупатели
  • пользователи скринридеров

Как исправить

Дайте каждому элементу с role="progressbar" название: aria-label (например aria-label="До бесплатной доставки") или aria-labelledby со ссылкой на видимый текст рядом. При необходимости добавьте aria-valuetext с понятным значением, например «осталось 20 €».

В Shopify

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

В Shoptet (CZ)

Обычно это индикатор бесплатной доставки или загрузки в шаблоне или дополнении. Обратитесь в Shoptet или к партнёру Shoptet.

В PrestaShop

Обычно это модуль бесплатной доставки, оформления заказа или загрузки. Добавьте aria-label в переопределённом шаблоне модуля или сообщите разработчику модуля.

В WooCommerce

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

Стандарты

Стандарты
СтандартПункт
WCAG 2.2 1.1.1 (A) Non-text Content
WCAG 2.1 1.1.1 (A) Non-text Content
WCAG 2.0 1.1.1 (A) Non-text Content
EN 301 549 4.1.1 9.1.1.1
EN 301 549 3.2.1 9.1.1.1
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.1.1

Автоматическая проверка: правило axe-core aria-progressbar-name. dequeuniversity.com, github.com, www.w3.org

Все правила, которые мы проверяем