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

Требование WCAG A/AA Приоритет: Серьёзно

У некоторых переключателей и флажков нет названия

Некоторые самодельные переключатели (флажки, переключатели, радиокнопки или пункты меню, сделанные с ролями ARIA) не имеют читаемой подписи.

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

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

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

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

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

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

Дайте название каждому элементу с role="checkbox", "switch", "radio", "menuitemcheckbox" или "menuitemradio": видимый текст внутри, aria-labelledby со ссылкой на видимую подпись или aria-label. Где возможно, используйте родные <input type="checkbox"> или <input type="radio"> с <label>.

В Shopify

Обычно это самодельные переключатели фильтров, cookie-баннеры или виджеты приложений (подписки, подарочные опции). Добавьте подписи в Liquid-сниппетах темы; попросите разработчиков приложений подписать переключатели, которые добавляют их приложения.

В Shoptet (CZ)

Обычно это дополнения или собственный код (cookie-баннеры, фильтры). Попросите поставщика дополнения, Shoptet или партнёра добавить подписи.

В PrestaShop

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

В WooCommerce

Часто встречается в плагинах согласия на cookie, фильтров и опций товара, а также в переключателях конструкторов страниц. Поищите подписи в настройках плагина; если их нет, исправьте в дочерней теме или сообщите автору плагина.

Стандарты

Стандарты
СтандартПункт
WCAG 2.2 4.1.2 (A) Name, Role, Value
WCAG 2.1 4.1.2 (A) Name, Role, Value
WCAG 2.0 4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1 9.4.1.2
EN 301 549 3.2.1 9.4.1.2
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.4.1.2

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

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