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

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

Некоторые подписи указывают не на тот элемент

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

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

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

Вспомогательные технологии находят нужный текст по id. Если он повторяется, скринридер может прочитать подпись или ошибку другого поля, например адрес для счёта вместо адреса доставки или название другого фильтра.

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

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

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

Сделайте каждый id на странице уникальным, особенно те, на которые ссылаются aria-labelledby, aria-describedby, aria-controls или <label for>. Повторяющиеся блоки (карточки товаров, окна быстрого просмотра, мобильное и десктопное меню) должны создавать id с суффиксом, например id товара или секции. Проверьте каждый случай вручную: axe помечает их для ручной проверки.

В Shopify

Часто секция или сниппет выводится дважды (шапка для мобильных и десктопа, карточки товаров, быстрый просмотр) с фиксированным id. Добавьте уникальный суффикс в коде Liquid, например section.id или product.id; виджеты приложений должен исправить их разработчик.

В Shoptet (CZ)

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

В PrestaShop

Обычно в шаблонах .tpl темы или в модулях, которые выводят один и тот же блок несколько раз, например миниатюры товаров или меню для мобильных и десктопа. Сделайте id уникальными в теме или в переопределённых шаблонах модулей.

В WooCommerce

Часто встречается у конструкторов страниц и виджетов, размещённых дважды (мобильное и десктопное меню, повторённые формы), и у плагинов с жёстко прописанными id. Исправьте id в дочерней теме или настройках виджета; о коде плагина сообщите его автору.

Стандарты

Стандарты
СтандартПункт
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 duplicate-id-aria. dequeuniversity.com, github.com, www.w3.org

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