Требование 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
Похожие проверки
-
У изображений нет текстового описания
WCAG 1.1.1 A
-
Нет быстрого перехода к основному содержимому
WCAG 2.4.1 A
-
Некоторые видео или звуки включаются сами со звуком
WCAG 1.4.2 A
-
Некоторые заголовки таблицы не описывают никаких данных
WCAG 1.3.1 A