Деякі індикатори прогресу не мають назви

Деякі елементи, позначені як індикатор прогресу, не мають тексту, який пояснює, що вони показують, наприклад «додайте ще 500 грн для безкоштовної доставки», кроки оформлення замовлення чи індикатор завантаження.

Цей текст перекладено автоматично, носій мови його ще не вичитав.

Чому це важливо для ваших покупців

Користувачі програм зчитування з екрана чують лише «індикатор прогресу, 60%» і не знають, чи це поріг безкоштовної доставки, крок оформлення чи сторінка, що ще завантажується. Вони можуть пропустити пропозицію або чекати, не розуміючи чого.

Кого це стосується

незрячі покупці
користувачі програм зчитування з екрана

Як виправити

Дайте кожному елементу з role="progressbar" назву: aria-label (наприклад aria-label="До безкоштовної доставки") або aria-labelledby з посиланням на видимий текст поруч. За потреби додайте aria-valuetext зі зрозумілим значенням, наприклад «залишилось 500 грн».

У 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

Вбудований вміст не має назви
WCAG 4.1.2 A
Сторінка сама перезавантажується або переадресовує
WCAG 2.2.1 A
Зображення не мають текстового опису
WCAG 1.1.1 A
Деякі векторні зображення не мають текстового опису
WCAG 1.1.1 A

Усі правила, які ми перевіряємо