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

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

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

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

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

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

Пользователи скринридеров и голосового управления не понимают, что делает элемент, и могут пропустить меню, фильтр или кнопку добавления в корзину.

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

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

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

Дайте название каждому элементу с role="button", "link" или "menuitem": видимый текст, aria-label или aria-labelledby. Лучше использовать нативные <button> или <a href> — они заодно дают поддержку клавиатуры.

В Shopify

Обычно это нестандартные кнопки-иконки в теме или приложениях. Добавьте названия в Liquid-сниппетах темы; о кнопках приложений сообщите разработчику.

В Shoptet (CZ)

Обычно это элементы шаблона или дополнений. Сообщите об этом в Shoptet или партнёру.

В PrestaShop

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

В WooCommerce

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

Стандарты

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

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