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

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

У некоторых кнопок форм нет названия

У некоторых кнопок, сделанных через <input type="button">, "submit" или "reset", нет читаемого текста, например у кнопки поиска или подписки на рассылку только с иконкой или пустым value.

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

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

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

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

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

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

Дайте каждой кнопке-input название. Обычно это осмысленный атрибут value, например value="Искать" или value="Применить промокод". Для кнопок-иконок добавьте aria-label или замените input на <button> с видимым или визуально скрытым текстом. Не оставляйте value пустым и не полагайтесь на фоновое изображение или атрибут title.

В Shopify

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

В Shoptet (CZ)

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

В PrestaShop

Обычно в модулях поиска, рассылки или купонов, шаблоны .tpl которых используют input-иконку с пустым value. Добавьте value или aria-label в теме или в переопределённых шаблонах модулей.

В WooCommerce

Часто встречается в виджетах поиска, формах рассылки, полях промокода и плагинах форм, которые выводят <input type="submit" value="">. Задайте текст кнопки в настройках виджета или плагина либо исправьте шаблон дочерней темы; о кнопках плагинов сообщите автору плагина.

Стандарты

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

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