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

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

У некоторых индикаторов уровня нет названия

Некоторые элементы, отмеченные как индикатор уровня (meter: шкала со значением в диапазоне, например надёжность пароля, остаток на складе или рейтинг), не имеют текста, который говорит, что они измеряют.

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

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

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

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

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

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

Дайте каждому элементу с role="meter" название: aria-label (например aria-label="Надёжность пароля") или aria-labelledby со ссылкой на видимый заголовок или подпись. Если одно число непонятно, добавьте понятное значение через aria-valuetext.

В Shopify

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

В Shoptet (CZ)

В шаблонах Shoptet встречается редко. Если появилось, обратитесь в 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-meter-name. dequeuniversity.com, github.com, www.w3.org

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